[...slug] và [[...slug]] trong nextjs khác nhau gì, và chúng để làm gì hãy cho tôi ví dụ. (ok)

Trong Next.js, [...slug] và [[...slug]] là các Catch-All Routes, nhưng chúng có một điểm khác biệt quan trọng.

---

1. [...slug] (Bắt tất cả)

• Nó cho phép bắt nhiều segment trong URL.

• Nhưng không thể bỏ trống (ít nhất phải có một giá trị).

🔹 Ví dụ: pages/blog/[...slug].js

jsxCopyEditimport { useRouter } from 'next/router';

export default function BlogPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Slug: {JSON.stringify(slug)}</div>;
}

Kết quả:

URL	slug
/blog/	❌ Lỗi 404
/blog/post-1	["post-1"]
/blog/category/news	["category", "news"]

👉 Không thể truy cập /blog mà không có ít nhất một segment.

---

2. [[...slug]] (Tùy chọn bắt tất cả)

• Cũng bắt nhiều segment, nhưng có thể bỏ trống.

• Nếu không có gì, giá trị slug sẽ là undefined.

🔹 Ví dụ: pages/blog/[[...slug]].js

jsxCopyEditimport { useRouter } from 'next/router';

export default function BlogPage() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Slug: {JSON.stringify(slug)}</div>;
}

Kết quả:

URL	slug
/blog/	undefined
/blog/post-1	["post-1"]
/blog/category/news	["category", "news"]

👉 Có thể truy cập /blog mà không cần segment nào.

---

✅ Khi nào dùng?

Loại	Khi nào dùng?
[...slug]	Bắt buộc phải có ít nhất một segment trong URL.
[[...slug]]	Cho phép URL không có segment nào, hữu ích cho trang mặc định.

Bạn cần dùng cái nào trong project của mình? 🚀

4o