Bắt đầu với Next.js

Next.js là một framework React bổ sung thêm định tuyến (routing), render phía server, và công cụ build sẵn có trên nền React. Bài viết này giúp bạn đi từ con số 0 đến một ứng dụng chạy được.

Tạo một dự án mới

npx create-next-app@latest my-app
cd my-app
npm run dev

Lệnh này sẽ khởi tạo một dự án sử dụng App Router, TypeScript và Tailwind CSS theo mặc định.

Hiểu về App Router

Mỗi thư mục trong app/ tương ứng với một đoạn URL. Một tệp page.tsx trong thư mục nào sẽ biến đoạn đó thành một route:

app/
  page.tsx          -> /
  about/page.tsx    -> /about
  blog/[slug]/page.tsx -> /blog/:slug

Layouts

Tệp layout.tsx bao bọc mọi trang bên dưới nó trong cây thư mục và được giữ nguyên qua các lần điều hướng — dùng nó cho header, footer, sidebar.

Bước tiếp theo

Bạn có thể lấy dữ liệu trực tiếp trong các component trang bằng async/await — không cần thư viện fetch dữ liệu riêng cho các trường hợp cơ bản.