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

Giới thiệu

Next.js App Router là một bước tiến lớn trong cách chúng ta xây dựng ứng dụng React. Với App Router, bạn có thể sử dụng React Server Components mặc định, giúp cải thiện hiệu suất đáng kể.

Server Components vs Client Components

Một trong những khái niệm quan trọng nhất là sự phân biệt giữa Server Components và Client Components:

• Server Components: Render trên server, có thể truy cập database trực tiếp, không có JavaScript phía client.
• Client Components: Render trên client, có thể sử dụng hooks như useState, useEffect.

Ví dụ cơ bản

Đây là cách tạo một Server Component đơn giản:

// app/page.tsx
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return <div>{json.message}</div>;
}

Kết luận

Next.js App Router mang lại nhiều tính năng mạnh mẽ. Hãy bắt đầu khám phá và áp dụng vào dự án của bạn!