Dynamic routes và generateStaticParams hoạt động như thế nào?

Question

Accepted Answer

**Dynamic routes** dùng tên thư mục có dấu ngoặc để khớp các segment URL biến đổi, và **`generateStaticParams`** cho Next.js biết những trang nào cần pre-render lúc build (cho SSG/ISR). ## Dynamic segment ```tsx // app/blog/[slug]/page.tsx → khớp /blog/hello, /blog/anything export default async function Post({ params }: { params: { slug: string } }) { const post = await getPost(params.slug); // params.slug là giá trị trong URL return

{post.title}

; } ``` ## generateStaticParams — pre-render các trang cụ thể ```tsx // Cho Next.js biết danh sách các slug cần build tĩnh export async function generateStaticParams() { const posts = await getAllPosts(); return posts.map(post => ({ slug: post.slug })); // → build /blog/post-1, /blog/post-2, ... thành HTML tĩnh lúc build } ``` Không có nó, một dynamic route được render theo yêu cầu (SSR). **Có** nó, Next.js pre-generate một trang tĩnh cho mỗi param trả về lúc build — cho bạn tốc độ SSG cho một tập các trang động đã biết (mỗi bài blog, mỗi sản phẩm). ## Xử lý các param không có trong danh sách ```tsx // điều gì xảy ra với một slug KHÔNG được generateStaticParams trả về? export const dynamicParams = true; // (mặc định) render các slug lạ theo yêu cầu (giống ISR) // export const dynamicParams = false; // trả 404 cho slug không được pre-build ``` Điều này cho phép bạn pre-build các trang phổ biến nhất và vẫn phục vụ (hoặc 404) phần đuôi dài. ## Catch-all và param lồng nhau ```text app/shop/[...categories]/page.tsx → /shop/a/b/c (params.categories = ['a','b','c']) app/[lang]/[slug]/page.tsx → multiple params: { lang, slug } ``` ```tsx export async function generateStaticParams() { return [{ lang: "en", slug: "about" }, { lang: "vi", slug: "about" }]; } ``` ## Tại sao điều này quan trọng Cặp này là cách bạn sinh tĩnh các tập lớn trang động (blog, e-commerce catalog, tài liệu) để có hiệu năng và SEO hàng đầu, trong khi `dynamicParams` điều khiển fallback cho các trang không được build trước. Hiểu `generateStaticParams` (những trang nào cần pre-build) cùng với các tùy chọn caching/`revalidate` là cốt lõi của việc làm SSG/ISR cho nội dung động trong App Router.