Which ORM should be used, Drizzle or Prisma?

Either works with Next.js App Router and Vercel's serverless functions. Drizzle has a lighter runtime and a SQL-like query builder; Prisma has a larger ecosystem and a more guided schema workflow. This guide uses Drizzle for the main path and links the Prisma equivalent at the database step.

Does this cover the Pages Router?

No. This guide targets the App Router exclusively, including Server Components, Server Actions and the current routing conventions in Next.js 16.

How long does shipping a production app actually take?

About four weeks of part-time work for a developer comfortable with React and TypeScript: roughly a week each for routing and layouts, data and database wiring, authentication, and hardening plus deployment.

Is Auth.js required, or can another auth provider be used?

Auth.js (NextAuth v5) is the path this guide follows because it works with Server Components and Server Actions out of the box. Clerk or a custom session system can replace it at the authentication phase without changing the rest of the build.

EN2 versions

Build and ship a production Next.js app

A production-ready Next.js application deployed to Vercel with App Router, Server Components, data fetching, authentication, and a database — built from scratch and shipped in about 4 weeks of part-time work.

Fby Finito HQEchipa Finito

Created 3 months agoUpdated 3 weeks ago

Free preview: 5 of 27 steps

Work through them in the real run view, exactly as a buyer does. No account, no payment, nothing saved.

Try it free

Free

3 free unlocks per month — yours to keep forever

Refined across 2 versionsUpdated Sep 2026

Start for free

Try 5 of 27 steps free

No account needed — nothing is saved.

Included with every copy

Your own copy — keep it forever
Gets better over time — free updates included
Run it on web and mobile
Invite a partner to go through it with you — you share the same progress
Make it your own — a private copy you can edit to fit your situation
1 knowledge checks to test what you've learned
The playbook's community — ask questions, get additions, and see how other buyers improve it, right on the step

Save

Who it's for

React developers who can build a component and reach for hooks, but have not shipped a full-stack Next.js app before. Comfortable with TypeScript and a terminal; wants to go from create-next-app to a live URL without hitting every footgun the docs half-explain.

About this playbook

A hands-on build path from `create-next-app` to a live production URL: App Router routing and layouts, data fetching in Server Components, a database wired through Drizzle or Prisma, authentication with Auth.js v5, and deployment to Vercel. Each phase names the exact file to create and the gotcha that costs the most time when skipped.

What you'll do, step by stepFree preview

5 phases · 27 steps

Only a sample is open: 5 of 27 steps can be read in full. The rest unlock when you buy.

Phase 1: Plan and scaffold the project
5 steps
Phase 2: Build routes and layouts
5 steps
Phase 3: Wire data fetching and a database
9 steps
Phase 4: Add authentication
4 steps
Phase 5: Harden and deploy to production
4 steps

Try 5 of 27 steps free

Unlock all 27 stepsFree

Details

Estimated duration20 hours 15 min

Steps27

Estimated budget0–20 €/month (free tiers)

What you need first

Node.js 20.9.0 or later installed. A GitHub account. A free Vercel account. A free-tier Postgres database (Vercel Postgres, Neon or Supabase). Comfortable with the terminal and basic Git commands.

Common questions

Glossary

App Router: The file-system-based router in the app/ directory that supports layouts, Server Components, and route conventions like loading.tsx and error.tsx.
Server Component: A React component that renders on the server by default in the App Router, with no client-side JavaScript shipped unless it opts into 'use client'.
Server Action: An async function marked 'use server' that runs on the server and can be called directly from a form or client event, used for mutations.
Route group: A folder wrapped in parentheses, like (marketing), that organizes routes without affecting the URL path.
Connection pooling: Reusing a limited set of database connections across serverless function invocations instead of opening a new one per request, required because serverless functions scale by spinning up many short-lived instances.
proxy.ts: The Next.js 16 replacement for middleware.ts, used to intercept requests before they reach a route — commonly for redirecting unauthenticated visitors.