Next.js ist ein Fullstack-React-Framework. Server Components, dateibasiertes Routing, API-Routes — produktionsreifes React.
App Router¶
// app/page.tsx — Server Component (Standard) export default async function Home() { const posts = await db.posts.findMany(); return ( {posts.map(p => {p.title})}
); } // app/api/posts/route.ts — API Route export async function GET() { const posts = await db.posts.findMany(); return Response.json(posts); } export async function POST(req: Request) { const body = await req.json(); const post = await db.posts.create({ data: body }); return Response.json(post, { status: 201 }); }
Server vs. Client Components¶
// Server Component (Standard) — kein ‘use client’ // Läuft auf dem Server, kein JS an den Client gesendet, kann async/await verwenden // Client Component — Interaktivität ‘use client’; import { useState } from ‘react’; export default function Counter() { const [count, setCount] = useState(0); return setCount(c => c + 1)}>{count}; }
Wichtigste Erkenntnis¶
Server Components für Data Fetching, Client Components für Interaktivität. App Router ist die Zukunft von Next.js.