Next.js 15 fullstack (App Router + Server Actions) · Lektion

Dynamiska rutter och parametrar

Lär dig implementera dynamiska rutter för att hantera variabla segment i URL:er och komma åt ruttparametrar

Lektion 2 av 411 steg

Dynamiska rutter och parametrar är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad är dynamiska routes?

Föreställ dig att du har en blogg med många inlägg. I stället för att skapa en separat sida för varje inlägg (som /blog/post-1 och /blog/post-2) kan du använda dynamiska routes.

Dynamiska routes låter dig skapa sidor som reagerar på variabla segment i URL:en, vilket gör applikationen skalbar och lätt att underhålla.

Definiera en grundläggande dynamisk route

I Next.js App Router definierar du ett dynamiskt routingssegment genom att omge ett mappnamn med hakparenteser []. Om du till exempel vill skapa en dynamisk route för blogginlägg skapar du en mapp med namnet [slug].

app/blog/[slug]/page.js

Den här strukturen matchar URL:er som /blog/first-post, /blog/another-article och så vidare.

Åtkomst till route-parametrar

När en dynamisk route matchas blir den variabla delen av URL:en tillgänglig som en route-parameter. Du kan komma åt dessa parametrar i din sidkomponent via propen params.

För app/blog/[slug]/page.js gör URL:en /blog/my-first-post att params.slug blir lika med 'my-first-post'.

Demo: enkel dynamisk sida

Nu ska vi se hur du skapar en enkel dynamisk sida som visar parametern slug från URL:en. Placera den här koden i app/blog/[slug]/page.js.

export default function BlogPostPage({ params }) {
  // params.slug will contain the dynamic part of the URL
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
      <p>This content is dynamically loaded!</p>
    </div>
  );
}

Förstå catch-all-segment

Vad gör du om du behöver matcha en sökväg med ett okänt antal segment? Då är catch-all-segment användbara. Du definierar dem med spread-syntaxen: [...slug].

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

Det här matchar URL:er som /docs/a, /docs/a/b, /docs/a/b/c och så vidare.

Åtkomst till catch-all-parametrar

När du använder ett catch-all-segment innehåller propen params en array med de matchade segmenten. För app/docs/[...slug]/page.js gäller alltså:

/docs/a -> params.slug är ['a']
/docs/a/b/c -> params.slug är ['a', 'b', 'c']

Demo: catch-all-sida

Så här kan du visa alla segment från en catch-all-route. Placera den här koden i app/docs/[...slug]/page.js.

export default function DocsPage({ params }) {
  // params.slug is an array of path segments
  const path = params.slug.join('/');
  return (
    <div>
      <h1>Documentation Path: /{path}</h1>
      <p>Showing content for: {path}</p>
    </div>
  );
}

Valfria catch-all-segment

Ibland vill du ha ett catch-all-segment som även kan matcha basvägen (det vill säga noll segment). Detta kallas ett valfritt catch-all och definieras med dubbla hakparenteser: [[...slug]].

app/users/[[...id]]/page.js

Detta matchar /users (där params.id är undefined) OCH /users/123 (där params.id är ['123']).

Demo: Valfritt catch-all

Det här exemplet visar en valfri catch-all-route som visar ett användar-ID eller 'Guest' om inget ID anges. Placera detta i app/users/[[...id]]/page.js.

export default function UserProfilePage({ params }) {
  // params.id will be undefined for /users, or ['123'] for /users/123
  const userId = params.id ? params.id[0] : 'Guest';
  return (
    <div>
      <h1>Welcome, {userId}</h1>
      <p>This page handles both base and dynamic paths.</p>
    </div>
  );
}

Frågesport: Dynamiska routes

Vilken av följande filstrukturer gör det möjligt för en Next.js App Router-applikation att hantera URL:er som /products/electronics/laptops och komma åt 'electronics' och 'laptops' separat?

Besvara frågan i den interaktiva lektionen

Repetition: Dynamiska routes och params

Bra jobbat! Du har lärt dig grunderna i dynamisk routing i Next.js App Router:

[slug] skapar ett enda dynamiskt segment.
[...slug] skapar ett catch-all-segment för flera sökvägar och returnerar en array.
[[...slug]] skapar ett valfritt catch-all som matchar noll eller fler segment.
Alla dynamiska segment nås via params-propen i dina page.js-komponenter.

Den här kraftfulla funktionen är viktig när du bygger flexibla och skalbara webbapplikationer!

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Dynamiska rutter och parametrar” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Dynamiska rutter och parametrar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Dynamiska rutter och parametrar”?

Lär dig implementera dynamiska rutter för att hantera variabla segment i URL:er och komma åt ruttparametrar Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Dynamiska rutter och parametrar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)