Next.js 15 for fullstack-webapper · leksjon

Nestede oppsett og rutegrupper

Strukturer applikasjonen med nestede oppsett, og organiser ruter ved hjelp av rutegrupper for bedre modularitet.

Leksjon 2 av 411 trinn

Nestede oppsett og rutegrupper er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Nestede oppsett: Delt brukergrensesnitt

Velkommen! I denne leksjonen skal vi utforske to kraftige funksjoner i App Router: nestede oppsett og rutegrupper.

Nestede oppsett lar deg dele brukergrensesnittkomponenter (for eksempel topptekster, sidefelt eller bunntekster) mellom flere sider innenfor et bestemt segment av applikasjonen. Dette bidrar til et konsekvent uttrykk og reduserer duplisering av kode.

Slik fungerer oppsett

I Next.js 15 App Router defineres oppsett ved å opprette en layout.tsx-fil inne i en mappe.

En oppsettkomponent mottar en children-prop, som vil være innholdet i de nestede rutesegmentene (for eksempel page.tsx eller andre nestede oppsett).
Oppsett gjengis hierarkisk, noe som betyr at et ytre oppsett omslutter et indre oppsett.

Rotoppsettet

Alle Next.js App Router-prosjekter må ha et rotoppsett. Dette er den øverste layout.tsx-filen, som ligger direkte i app/-mappen.

Det definerer de nødvendige <html>- og <body>-taggene.
Det gjelder for alle ruter i applikasjonen.

Kode for rotoppsettet

Her er et grunnleggende eksempel på det nødvendige rotoppsettet. Legg merke til at det tar imot children som en prop.

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Opprette et nestet oppsett

For å opprette et nestet oppsett legger du ganske enkelt til en ny layout.tsx-fil i en undermappe i app/-mappen.

For eksempel vil app/dashboard/layout.tsx opprette et oppsett som gjelder for alle ruter under /dashboard.

Kodeeksempel på et nestet oppsett

Dette eksempelet viser en DashboardLayout som omslutter innholdet og legger til en navigasjonslinje som er spesifikk for dashborddelen. DashboardPage gjengis inne i dette oppsettet.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>
        <h1>Dashboard Nav</h1>
      </nav>
      {children}
    </section>
  );
}

// app/dashboard/page.tsx
export default function DashboardPage() {
  return (
    <div>
      <h2>Welcome to Dashboard</h2>
      <p>This content is inside the DashboardLayout.</p>
    </div>
  );
}

Introduksjon til rutegrupper

Rutegrupper er mapper i app/-mappen som ikke påvirker URL-banen. De brukes hovedsakelig til:

å organisere ruter i logiske grupper
å bruke bestemte oppsett på et utvalg ruter uten å endre URL-en

Du definerer en rutegruppe ved å sette mappenavnet i parentes, som i (groupName).

Hvorfor bruke rutegrupper?

Rutegrupper er svært nyttige for:

Separate oppsett: Bruk enkelt et unikt oppsett på en bestemt gruppe sider (for eksempel en (auth)-gruppe med et innloggingsoppsett).
Organisering av prosjektet: Hold relaterte ruter samlet for enklere vedlikehold.
Utelate segmenter: Hindre at et mappenavn vises i URL-banen.

Eksempel på oppsett for en rutegruppe

Her inneholder en (marketing)-rutegruppe sitt eget oppsett. Alle sider i denne gruppen (for eksempel /about) bruker dette oppsettet, men URL-en forblir /about, ikke /marketing/about.

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return (
    <>
      <header>
        <h1>Marketing Site</h1>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>&copy; 2024 Marketing</p>
      </footer>
    </>
  );
}

// app/(marketing)/about/page.tsx
export default function AboutPage() {
  return (
    <div>
      <h2>About Us</h2>
      <p>Learn more about our company.</p>
    </div>
  );
}

Sjekk av oppsett og grupper

Se på følgende Next.js App Router-struktur:

app/
├── layout.tsx
├── dashboard/
│   ├── layout.tsx
│   └── settings/
│       └── page.tsx
└── (auth)/
    └── login/
        └── page.tsx

Hvilke layout.tsx-filer vil gjelde for ruten app/dashboard/settings/page.tsx?

Besvar den i den interaktive leksjonen

Oppsummering: Oppsett og grupper

Du har lært hvordan du strukturerer Next.js-applikasjonen din ved hjelp av nestede oppsett og rutegrupper!

Nestede oppsett (`layout.tsx`) lar deg dele brukergrensesnittkomponenter mellom segmenter i appen og skape en konsekvent brukeropplevelse.
Rutegrupper (`(folder)`) bidrar til å organisere filstrukturen og bruke bestemte oppsett på grupper av ruter uten å påvirke URL-banen.

Disse funksjonene er avgjørende for å bygge skalerbare og vedlikeholdbare Next.js-applikasjoner!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Nestede oppsett og rutegrupper» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Nestede oppsett og rutegrupper», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Nestede oppsett og rutegrupper»?

Strukturer applikasjonen med nestede oppsett, og organiser ruter ved hjelp av rutegrupper for bedre modularitet. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Nestede oppsett og rutegrupper»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Dynamiske ruter og altomfattende segmenter
Nestede oppsett og rutegrupper
Parallelle og avskjærende ruter
Konvensjoner for laste- og feilsider

← Tilbake til Next.js 15 for fullstack-webapper