Know-How
Next.js tutorial — fullstack React
Next.js je fullstack React framework. Server Components, file-based routing, API routes — produkční 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 ;
}
Klíčový takeaway
Server Components pro data fetching, Client Components pro interaktivitu. App Router je budoucnost Next.js.