Next.js
Cap nhat 14 thg 2, 2026Next.js App Router Mental Model
Understanding the App Router: file conventions, server vs client components, and data fetching patterns.
nextjs
app-router
server-components
File Conventions
- `page.tsx`: Route entry point
- `layout.tsx`: Shared UI wrapper (persists across navigation)
- `loading.tsx`: Loading UI (Suspense boundary)
- `error.tsx`: Error boundary
- `not-found.tsx`: 404 page
Server vs Client Components
- Default is server. Add `'use client'` for interactivity.
- Server components can import client components.
- Client components CANNOT import server components (pass as children instead).
Data Fetching
- Server components: use `async/await` directly
- Client components: use React Query or SWR
- Route handlers: `app/api/route.ts` for API endpoints