Next.js App Router: 7 patterns mọi dev nên biết

Next.js App Router đã mature đủ để dùng production. Nhưng nhiều dev vẫn chưa tận dụng hết sức mạnh của nó. Đây là 7 patterns mà mình dùng hàng ngày, giúp code sạch hơn và UX tốt hơn.

1. Layout Nesting — Chia sẻ UI giữa các routes

Layout là killer feature của App Router. Mỗi folder có thể có layout.tsx riêng, và chúng nest tự động:

// app/(admin)/admin/layout.tsx
import { AdminSidebar } from "@/components/admin/admin-sidebar";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";

export default async function AdminLayout({ children }) {
  const session = await auth();
  if (session?.user?.role !== "ADMIN") redirect("/login");

  return (
    <div className="flex min-h-screen">
      <AdminSidebar />
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

Layout không re-render khi navigate giữa các child routes. Sidebar, header giữ nguyên state.

2. Loading UI với loading.tsx

Đặt file loading.tsx cạnh page.tsx để tự động wrap trong Suspense boundary. Không cần quản lý loading state thủ công:

Khi user navigate, Next.js hiển thị loading UI ngay lập tức trong khi page đang fetch data. Instant perceived performance.

3. Error Boundary với error.tsx

Tương tự loading, error.tsx catch lỗi ở level route. Phần còn lại của app vẫn hoạt động bình thường. Nhớ thêm reset button để user retry.

4. Route Groups — Tổ chức không ảnh hưởng URL

Dùng (folder) để nhóm routes mà không tạo thêm URL segment. Ví dụ: (blog), (auth), (admin) giúp tổ chức code mà URL vẫn clean.

5. Parallel Routes — Render nhiều pages cùng lúc

Dùng @slot convention để render nhiều route segments đồng thời trong cùng một layout. Hữu ích cho dashboards:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,   // @analytics/page.tsx
  activity,    // @activity/page.tsx
}) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8">{children}</div>
      <div className="col-span-4 space-y-4">
        {analytics}
        {activity}
      </div>
    </div>
  );
}

Mỗi slot load independent, có loading/error state riêng. Một slot chậm không block slot khác.

6. Intercepting Routes — Modal pattern

Pattern hay nhất cho photo galleries, article previews. Dùng (.)route convention để intercept navigation và show modal, nhưng direct URL vẫn render full page. Instagram-style UX.

7. Server Actions cho Mutations

Thay vì tạo API route cho mỗi form, dùng Server Actions trực tiếp. Progressive enhancement — form hoạt động cả khi JS disabled:

Server Actions kết hợp với revalidatePath hoặc revalidateTag để tự động refresh data sau mutation. Không cần invalidate cache thủ công từ client.

Bonus: Metadata API

Đừng quên generateMetadata cho SEO. Nó chạy trên server, có thể async fetch data để tạo dynamic title, description, OG images. Mỗi page có metadata riêng, không cần thư viện bên ngoài.

Kết luận

App Router không chỉ là folder-based routing. Nó là một framework trong framework với rendering strategies, data patterns, và UX primitives built-in. Nắm vững 7 patterns này sẽ giúp bạn build app Next.js nhanh hơn và chuyên nghiệp hơn.