StackedThink

Blog

Minimal Next.js Repo Template for Indie Hackers

05 April 2025

A clean, production-ready starter repo for shipping tools, calculators, and micro-SaaS MVPs fast.

import Layout from '../../components/Layout'; import HubPage from '../../components/HubPage'; import { CodeIcon, PlayIcon } from '../../components/icons';

export const metadata = { title: 'Minimal Next.js Repo Template for Indie Hackers', description: 'A clean, production-ready starter repo for shipping tools, calculators, and micro-SaaS MVPs fast.', };

export default function NextjsRepoTemplateWalkthrough() { return (

For indie hackers who want to ship fast without getting bogged down in boilerplate or tooling debates. 

      <h2>What You Get</h2>
      <ul>
        <li>✅ Minimal, no-frills Next.js 14 (App Router) setup</li>
        <li>✅ Tailwind CSS preconfigured</li>
        <li>✅ Ready-to-deploy static export</li>
        <li>✅ No auth, no backend, no database — just client-side tools</li>
        <li>✅ Ready for tools like <a href="/ai-content-cost-calculator">AI Content Cost Calculator</a> or <a href="/cron-job-anomaly-detection-simulator">Cron Job Anomaly Simulator</a></li>
      </ul>

      <h2>File Structure</h2>
      <pre><code>nextjs-indie-starter/

├── app/ │ ├── layout.js │ ├── page.js │ └── globals.css ├── components/ │ ├── Layout.js │ └── ToolShell.js ├── public/ ├── next.config.js ├── package.json ├── tailwind.config.js └── README.md 

      <h2>Key Files</h2>

      <h3><code>app/page.js</code></h3>
      <pre><code>import ToolShell from '../components/ToolShell';

export default function Home() { return ( <ToolShell title="My Tool"> <p className="text-gray-700">Build your tool here.</p> </ToolShell> ); } 

      <h3><code>components/ToolShell.js</code></h3>
      <pre><code>export default function ToolShell({ title, children }) {

return ( <div className="max-w-3xl mx-auto p-6 bg-white rounded-2xl border border-gray-200 shadow-sm"> <h1 className="text-2xl font-bold text-gray-950 mb-4">{title}</h1> {children} </div> ); } 

      <h3><code>next.config.js</code></h3>
      <pre><code>/** @type {import('next').NextConfig} */

const nextConfig = { output: 'export', distDir: 'out', trailingSlash: true, images: { unoptimized: true }, };

export default nextConfig; 

      <h2>Setup Steps</h2>
      <ol>
        <li>Clone the repo: <code>git clone https://github.com/stackedthink/nextjs-indie-starter.git</code></li>
        <li>Install dependencies: <code>npm install</code></li>
        <li>Run dev server: <code>npm run dev</code></li>
        <li>Build static export: <code>npm run build</code></li>
      </ol>

      <h2>How to Extend</h2>
      <ul>
        <li>Add new pages in <code>app/</code> with <code>page.js</code> files</li>
        <li>Use <code>ToolShell</code> to wrap content</li>
        <li>Add client components for interactivity</li>
        <li>Deploy to Vercel, Netlify, or GitHub Pages</li>
      </ul>

      <h2>Monetise It</h2>
      <p>
        Ship a tool every week. Monetise with Gumroad, Lemon Squeezy, or embed a Buy Me a Coffee button.
        Pair with a <a href="/blog/ai-prompt-pack-indie-makers">prompt pack</a> or <a href="/prompt-pack-profit-calculator">resale calculator</a> to build a stack of micro-products.
      </p>

      <div className="mt-8 p-6 bg-gray-50 rounded-2xl border border-gray-200">
        <h3 className="font-semibold flex items-center gap-2">
          <PlayIcon className="w-5 h-5 text-gray-950" />
          <span>Ship Your First Tool</span>
        </h3>
        <p className="mt-2 text-gray-700">
          Clone the <a href="https://github.com/stackedthink/nextjs-indie-starter" className="text-blue-600 hover:underline">repo</a>, build a calculator or utility, and deploy it in under 30 minutes.
        </p>
      </div>
    </div>
  </HubPage>
</Layout>

); }

← Back to blog