Optional Catch-all

Double brackets make the catch-all optional: it also matches the folder itself. Perfect for a shop with filter paths: app/shop/[[...filters]]/page.tsx.

export default async function ShopPage({
  params,
}: {
  params: Promise<{ filters?: string[] }>;
}) {
  const { filters = [] } = await params;
  const [category, brand] = filters;
  return (
    <h1>
      {category ?? 'All products'} {brand ? '— ' + brand : ''}
    </h1>
  );
}