Segmente dinamice [id] – Crearea rutelor parametrizate în Next.js

app/articole/[slug]/page.tsx

export default async function Pagina({ params }: { params: { slug: string } }) {
  return <h1>Articol: {params.slug}</h1>;
}

Ce face Segmente dinamice [id] - Crearea rutelor parametrizate

Când un URL conține identificatori dinamici (precum ID-uri de utilizatori sau slug-uri de articole), segmentul din folder este denumit între paranteze drepte: `[slug]` sau `[id]`.

Valoarea reală din URL este extrasă automat de Next.js și transmisă ca proprietate în obiectul `params` al componentei `page.tsx`.

Împreună cu funcția `generateStaticParams()`, permite pre-generarea statică a sutelor de pagini dinamice direct la momentul build-ului.

Exemple

Exemplul 1: Extragerea parametrului dinamic și încărcarea articolului corespunzător

Preia articolul pe baza slug-ului din URL.

export default async function ArticolDetaliu({
  params,
}: {
  params: { slug: string };
}) {
  const articol = await preiaArticol(params.slug);

  return (
    <article className="max-w-2xl mx-auto py-8">
      <h1 className="text-4xl font-bold">{articol.titlu}</h1>
      <div className="mt-4 text-gray-700">{articol.continut}</div>
    </article>
  );
}

Ieșire în terminal

Pagina afișează conținutul articolului specificat în URL.

Greșeli frecvente

• Uitarea că în versiunile foarte recente de Next.js (Next 15), proprietatea params a devenit o promisiune asincronă ce necesită await (ex: `const { slug } = await params`).

Comenzi înrudite

• Rute Catch-All [...slug] - Capturarea tuturor segmentelor ulterioare din URL: Extinde rutarea dinamică pentru a captura un număr variabil de segmente de cale imbricate într-un singur array.
• 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.
• app/page.tsx - Definirea conținutului specific al unei rute: Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.