Next.js App Router: Hướng dẫn Chi tiết và Best Practices

Next.js App Router: Hướng dẫn Chi tiết

Next.js 13 giới thiệu App Router, thay thế Pages Router với những cải tiến đáng kể.

File-Based Routing

Cấu trúc thư mục tự động tạo routes:

app/
├── page.tsx           # /
├── blog/
│   ├── page.tsx       # /blog
│   └── [slug]/
│       └── page.tsx   # /blog/[slug]
└── api/
    └── users/
        └── route.ts   # POST /api/users

Server Components (Mặc định)

Component là Server Component mặc định, giảm JavaScript gửi tới client:

// Đây là Server Component
export default async function Post({ params }) {
  const post = await fetch(`/api/posts/${params.slug}`);
  return <h1>{post.title}</h1>;
}

Client Components

Dùng 'use client' cho interactivity:

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

App Router là tương lai của Next.js development!