What is an optional catch-all route segment, and how is it different from a regular catch-all segment?

An optional catch-all segment, written with double brackets like [[...slug]], works just like a regular catch-all segment but also matches the base route with no additional segments at all, meaning the same page component can handle both the root path and any nested paths beneath it.

// app/shop/[[...slug]]/page.js
// Matches /shop, /shop/electronics, and /shop/electronics/phones
export default async function ShopPage({ params }) {
  const { slug } = await params;
  return <p>Category path: {slug ? slug.join('/') : 'All products'}</p>;
}