Rute Catch-All […slug] – Capturarea tuturor segmentelor ulterioare din URL în Next.js

app/docs/[...slug]/page.tsx

// Se potrivește pe /docs/a, /docs/a/b, /docs/a/b/c
// params.slug va fi un array de șiruri: ['a', 'b', 'c']

Ce face Rute Catch-All [...slug] - Capturarea tuturor segmentelor ulterioare din URL

Adăugând trei puncte de suspensie în interiorul parantezelor drepte [...slug], segmentul devine de tip catch-all.

Este ideal pentru documentații tehnice, sisteme de fișiere virtuale sau categorii de produse cu adâncime nelimitată (ex: `/haine/barbati/pantaloni/sport`).

Next.js va transmite în `params.slug` o listă (array) ce conține fiecare componentă a căii descompusă.

Exemple

Exemplul 1: Construirea unei ierarhii de documentație cu rute catch-all

Unește segmentele din array pentru a căuta fișierul corespunzător.

export default async function DocsPage({
  params,
}: {
  params: { slug: string[] };
}) {
  const caleCompleta = params.slug.join('/');
  const doc = await incarcaDocumentatie(caleCompleta);

  return <div>Documentație pentru: {caleCompleta}</div>;
}

Ieșire în terminal

Gestionează orice adâncime de linkuri din secțiunea /docs/.

Greșeli frecvente

• Așteptarea ca […slug] să se potrivească și pe ruta rădăcină ‘/docs’; catch-all simplu cere cel puțin un segment. Pentru ruta rădăcină se folosește optional catch-all [[…slug]].

Comenzi înrudite

• Rute opționale Catch-All [[...slug]] - Includerea și a rutei de bază: Similar cu catch-all, dar folosește paranteze drepte duble pentru a face segmentele opționale, potrivindu-se și pe ruta părinte fără parametri.
• Segmente dinamice [id] - Crearea rutelor parametrizate: Generează rute dinamice unde segmentul definit între paranteze drepte [parametru] capturează valoarea din URL.