Next.js

Was ist es?

Next.js ist das React-Meta-Framework von Vercel — App Router mit React Server Components, File-System-Routing, Server Actions und integrierter Build-Pipeline. Seit Version 13 ist der App Router stabil, ab Version 15 standardmäßig, in Next.js 16 ist Turbopack der Default-Bundler für dev und build.

Quickstart

pnpm create next-app@latest my-app --ts --tailwind --app --turbopack
cd my-app && pnpm dev

Routen liegen in app/, jede page.tsx ist ein Server Component by default. Für Client-Code: "use client" ganz oben.

Typische Patterns

• Server Component fetcht direkt, kein getServerSideProps mehr:

  // app/projekte/page.tsx
  export default async function Page() {
    const projects = await db.from('projects').select('*')
    return <Grid items={projects.data} />
  }
  

• Route Handler statt API Routes: app/api/foo/route.ts exportiert GET/POST-Funktionen.
• Server Actions für Mutations: 'use server' Direktive in Funktionen, direkt aus Forms aufrufbar.
• Streaming via loading.tsx + Suspense-Boundaries für progressives Rendering.
• generateStaticParams + revalidate für ISR statt klassisches SSG.

Gotchas / Was oft schiefgeht

• "use client" propagiert nicht — jede importierte Component darunter ist client, aber Server Components dürfen nicht in Client Components importiert werden (umgekehrt schon).
• cookies()/headers() sind in 15+ async — await cookies() ist Pflicht.
• fetch()-Caching-Defaults haben sich mit 15 geändert: standardmäßig nicht mehr gecached, cache: 'force-cache' explizit setzen.
• Env-Vars: nur NEXT_PUBLIC_* landet im Client-Bundle, alles andere ist server-only.
• Middleware läuft im Edge Runtime — kein node:fs, kein pg-Driver.

Wann nicht?

Reine SPA ohne SEO-Bedarf oder Backend-Logik → Vite + React reicht. Pures Static-Site mit Markdown → Astro ist schlanker.