PricingLoginStart free
Next.js 15 Fullstack Web Apps · Lezione

Route dinamiche e segmenti catch-all

Crei route flessibili che si adattano ai contenuti dinamici utilizzando segmenti dinamici e route catch-all.

Lezione 1 di 410 passaggi

Route dinamiche e segmenti catch-all è una lezione Next.js 15 Fullstack Web Apps gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Next.js 15 Fullstack Web Apps, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Next.js 15 Fullstack Web Apps include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Flexible Routing in Next.js

Welcome to dynamic routing in Next.js! Modern web applications often need flexible URLs for content like blog posts, product details, or user profiles.

Instead of creating a separate page for each item, dynamic routes let you use a single page template to handle many different URLs based on their path.

Creating Dynamic Segments

In Next.js, you create a dynamic route by enclosing a folder name in square brackets, like [slug].

This [slug] segment acts as a placeholder. Whatever value is in that part of the URL will be captured and made available to your page component.

  • Example: app/blog/[slug]/page.js
  • This will match URLs like /blog/hello-world or /blog/nextjs-tips.

Accessing Dynamic Parameters

When a dynamic route is matched, the value of the dynamic segment (e.g., slug) is passed to your page component as a property of the params object.

By default, Next.js App Router pages are React Server Components, which receive params as a prop.

// File: app/blog/[slug]/page.js

export default function BlogPostPage({ params }) {
  const { slug } = params; // If URL is /blog/my-post, slug will be 'my-post'

  return (
    <main>
      <h1>Blog Post: {decodeURIComponent(slug)}</h1>
      <p>This content is for the post identified by '{decodeURIComponent(slug)}'.</p>
    </main>
  );
}

Introducing Catch-all Segments

What if you need to match URLs with an unknown number of segments? For example, a documentation site where paths can be deeply nested (e.g., /docs/getting-started/installation).

This is where catch-all segments come in. They capture all subsequent path segments into an array.

Creating Catch-all Routes

To create a catch-all route, use three dots followed by the segment name inside square brackets: [...slug].

This will match any path that starts with the parent folder and capture all parts after it into an array.

  • Example: app/docs/[...slug]/page.js
  • Matches: /docs/a, /docs/a/b, /docs/a/b/c.
  • slug will be an array: ['a'], ['a', 'b'], ['a', 'b', 'c'].

Accessing Catch-all Parameters

Similar to dynamic segments, catch-all parameters are available via the params object. However, the value for a catch-all segment is always an array of strings.

Let's see an example of displaying the captured path segments from a URL like /docs/guide/setup/nextjs.

// File: app/docs/[...slug]/page.js

export default function DocsPage({ params }) {
  const { slug } = params; // If URL is /docs/intro/setup, slug is ['intro', 'setup']

  return (
    <main>
      <h2>Documentation Path: /{slug.join('/')}</h2>
      <p>Segments found: {slug.map(s => `<code>${s}</code>`).join(', ')}</p>
    </main>
  );
}

Optional Catch-all Segments

What if you want a catch-all route to also match the base path? For example, you want /docs to show an index page, but /docs/intro to show a specific guide.

You can make a catch-all segment optional by wrapping it in an extra set of square brackets: [[...slug]].

  • Example: app/docs/[[...slug]]/page.js
  • Matches: /docs and /docs/a/b.

Optional Catch-all Example

When using [[...slug]], the slug parameter will be an array of strings for sub-paths. However, it will be undefined if only the base path is matched (e.g., /docs).

You'll need to handle the undefined case in your component to show default content.

// File: app/docs/[[...slug]]/page.js

export default function OptionalDocsPage({ params }) {
  const { slug } = params; // If URL is /docs, slug is undefined
                           // If URL is /docs/intro, slug is ['intro']

  const pathDisplay = slug ? slug.join('/') : 'Home Index';

  return (
    <main>
      <h2>Docs: {pathDisplay}</h2>
      <p>This page handles both the base path and any sub-paths.</p>
    </main>
  );
}

Quick Check on Routing

Which of the following statements about Next.js dynamic and catch-all routes are TRUE?

Rispondi nella lezione interattiva

Recap: Dynamic & Catch-all Routes

You've mastered how to make your Next.js application's routing incredibly flexible!

  • Dynamic Segments ([slug]) allow a single page to handle many specific URLs, receiving a string parameter.
  • Catch-all Segments ([...slug]) capture multiple path segments into an array, useful for nested structures.
  • Optional Catch-all Segments ([[...slug]]) extend catch-alls to also match the base path, with the parameter being undefined for the base path.

These powerful patterns are fundamental for building scalable and content-rich applications in Next.js.

Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
12
Lezioni
48
Inizia a imparare gratisVisualizza il corso completo

Domande Frequenti

La lezione «Route dinamiche e segmenti catch-all» è gratuita?

Sì — il testo completo di «Route dinamiche e segmenti catch-all» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Next.js 15 Fullstack Web Apps, passa a CoddyKit PRO. Il corso Next.js 15 Fullstack Web Apps include 4 lezioni in totale.

Cosa imparerò in «Route dinamiche e segmenti catch-all»?

Crei route flessibili che si adattano ai contenuti dinamici utilizzando segmenti dinamici e route catch-all. Eserciti Next.js 15 Fullstack Web Apps con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Next.js 15 Fullstack Web Apps?

Non è richiesta alcuna esperienza precedente. Next.js 15 Fullstack Web Apps su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Route dinamiche e segmenti catch-all»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Next.js 15 Fullstack Web Apps?

Sì. Ogni lezione Next.js 15 Fullstack Web Apps include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Route dinamiche e segmenti catch-all
  2. Layout annidati e gruppi di route
  3. Route parallele e intercettanti
  4. Convenzioni per la UI di caricamento e degli errori
← Torna a Next.js 15 Fullstack Web Apps