Step 1 — Project setup

Next.js 16 + TypeScript strict + Tailwind v4 + Turbopack — the 2026 modern fullstack baseline.

1. create-next-app

pnpm create next-app@latest my-fullstack

Question	Pick
TypeScript?	Yes
ESLint?	Yes
Tailwind CSS?	Yes
`src/` directory?	Yes
App Router?	Yes
Turbopack?	Yes
import alias?	No (default `@/*`)

2. Layout

my-fullstack/
├── src/
│   └── app/
│       ├── layout.tsx
│       ├── page.tsx
│       ├── globals.css
│       └── favicon.ico
├── public/
├── package.json
├── pnpm-lock.yaml
├── next.config.ts
└── tsconfig.json

File paths under src/app/ map to URLs.

3. Dev server

cd my-fullstack
pnpm dev

Default URL http://localhost:3000
HMR on file save
Turbopack builds significantly faster than Webpack

4. TypeScript strict

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

strict: true is the default. Consider adding noUncheckedIndexedAccess.

5. Edit the first page

src/app/page.tsx:

export default function Home() {
  return (
    <main className="grid min-h-screen place-items-center bg-slate-50">
      <section className="text-center space-y-4">
        <h1 className="text-4xl font-bold">My Fullstack</h1>
        <p className="text-slate-600">Next.js 16 · TypeScript · Tailwind v4</p>
        <a href="/about" className="inline-block rounded-md bg-slate-900 px-6 py-2 text-white">
          Get started
        </a>
      </section>
    </main>
  );
}

6. Add a route

The filesystem is the router. Add src/app/about/page.tsx to get /about.

Dynamic routes use brackets: src/app/posts/[id]/page.tsx → /posts/:id.

7. layout.tsx

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "My Fullstack",
  description: "Next 16 + TS + Tailwind",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav className="p-4 border-b">
          <a href="/" className="font-bold">My App</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

Nested layouts are supported per folder.

8. Tailwind v4

src/app/globals.css:

@import "tailwindcss";

@theme {
  --color-brand: #0ea5e9;
}

CSS-first config. --color-brand becomes text-brand, bg-brand, etc.

9. Env vars

.env.local:

DATABASE_URL=postgresql://localhost:5432/my_app
NEXT_PUBLIC_SITE_URL=http://localhost:3000

NEXT_PUBLIC_ names are exposed to the browser.

10. Lint

pnpm lint

11. Build & start

pnpm build
pnpm start

Output goes to .next/.

12. Gotchas

Port 3000 taken — pnpm dev -p 3001
Install fails — check Node 20+, reinstall
Changes not visible — hard reload
src/ not recognised — check tsconfig.json paths

Closing

pnpm create next-app lands you on a production-ready base. Dive into learning without boilerplate pain.

02-server-client

References: Next.js Getting Started · Tailwind v4.

1. create-next-app

pnpm create next-app@latest my-fullstack