Step 1 — Project setup

pnpm create next-app@latest my-fullstack \
  --typescript --tailwind --app --src-dir --turbo
cd my-fullstack

Flags:

• --typescript — strict mode
• --tailwind — Tailwind CSS v4 preset
• --app — App Router (not Pages Router)
• --src-dir — code under src/
• --turbo — Turbopack (faster than Webpack)

Edit the first page

src/app/page.tsx:

export default function Home() {
  return (
    <main className="grid min-h-screen place-items-center">
      <h1 className="text-3xl font-bold">My Fullstack</h1>
    </main>
  );
}

pnpm dev and open http://localhost:3000.

Next

Step 2: Server vs Client Components →