Tìm Hiểu App Router Trong Next.js

App Router là kiến trúc routing mới của Next.js, thay thế Pages Router truyền thống.

Server Components Mặc Định

Trong App Router, mọi component đều là Server Component trừ khi bạn khai báo "use client".

// Đây là Server Component — chạy trên server
export default async function Page() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return <div>{posts.map(p => <h2 key={p.id}>{p.title}</h2>)}</div>;
}

Nested Layouts

Một trong những tính năng mạnh nhất là nested layouts:

// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="max-w-3xl mx-auto">
      <nav>Blog Navigation</nav>
      {children}
    </div>
  );
}

Loading và Error States

App Router hỗ trợ loading.tsx và error.tsx cho mỗi route segment:

// app/blog/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Đang tải...</div>;
}

Kết Luận

App Router mang lại trải nghiệm developer tốt hơn với Server Components, streaming, và data fetching tích hợp.

Server Components Mặc Định

Nested Layouts

Loading và Error States

Kết Luận

Nhận bài viết mới