Next.js is a fullstack React framework. Server Components, file-based routing, API routes — production-ready React.
App Router¶
// app/page.tsx — Server Component (default) 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 (default) — no ‘use client’ // Runs on server, no JS sent to client, can use async/await // Client Component — interactivity ‘use client’; import { useState } from ‘react’; export default function Counter() { const [count, setCount] = useState(0); return setCount(c => c + 1)}>{count}; }
Key Takeaway¶
Server Components for data fetching, Client Components for interactivity. App Router is the future of Next.js.