Zero to
Deployed.
Toggle your stack. Watch the command build itself. Ship your first production Next.js app in under 60 minutes.
// configure your stack
// estimated output
Build Size
Cold Start
Packages
Scroll to see how file-system routing works — no react-router needed.
// 01 — file-system routing
Every file is a
route.
No router configuration. No <Route path=...> components. Drop a page.tsx in a folder — it becomes a URL.
No config
Zero router setup. The folder structure is the config.
Parallel routes
Render multiple pages in the same layout simultaneously.
Middleware
Run code before any route — auth, A/B tests, redirects.
// 02 — server vs client components
The boundary that
changes everything.
The default is Server. Add 'use client' only when you need interactivity. Wrong choice = slow app or broken DB query.
// decision tree — which one do I use?
Need useState or useEffect?
→ 'use client'
Fetching from DB or external API?
→ Server (default)
onClick, onChange, onSubmit?
→ 'use client'
Reading env vars or file system?
→ Server (default)
The full starter kit includes 12 pre-wired component patterns.
Auth-gated Server Components, optimistic UI, streaming Suspense — all wired up.
// 03 — data fetching strategies
SSG. ISR. SSR.
Pick one.
The wrong choice costs 10× in TTFB or stale data. Here's the benchmark that ends the debate — with the exact fetch option for each.
// latency benchmark (p50, US East)
| Property | SSG | ISR | SSR |
|---|---|---|---|
| CDN Cacheable | ✓ | ✓ | ✗ |
| Per-request fresh | ✗ | ✗ | ✓ |
| Auth/personalized | ✗ | ✗ | ✓ |
| Zero cold-start | ✓ | ✓ | ✗ |
HTML generated at build time, served from CDN edge
Best for
Content that rarely changes
Trade-off
Stale until next deploy
Use Case
Marketing pages, blog posts, docs
Revalidation
Never (until rebuild)
// No fetch options = static by default
const data = await fetch('/api/posts');
// Or explicit:
const data = await fetch('/api/posts',
{ cache: 'force-cache' }
);// 04 — starter kit
Send Me the
Full Starter Kit.
Pre-wired Next.js 15 template: App Router, TypeScript, Tailwind, auth middleware, Server Components, streaming Suspense. Every pattern from this guide, production-ready.