Trung BìnhNext.js iconNext.js

Dynamic routes và catch-all routes trong Next.js App Router?

Dynamic routes trong App Router sử dụng cú pháp folder name trong ngoặc vuông, ví dụ app/blog/[slug]/page.tsx sẽ match URL /blog/anything. Next.js 15: params là Promise — cần const { slug } = await params trong async Server Component, hoặc React.use(params) trong Client Component.

  • Catch-all routes dùng app/[...slug]/page.tsx để match nhiều segments như /a/b/c (params.slug là mảng).
  • Optional catch-all app/[[...slug]]/page.tsx còn match root route.
  • TypeScript: { params: Promise<{ slug: string }> } cho dynamic route.

Xem toàn bộ Next.js cùng filter theo level & chủ đề con.

Mở danh sách Next.js