Oversikt over sider og oppsett
Utforsk forskjellen mellom sider og oppsett, og hvordan de sammen danner UI-strukturen i Next.js-applikasjonen din.
Oversikt over sider og oppsett er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren 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 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Velkommen til Pages og Layouts
Next.js-brukergrensesnitt bygger på to konsepter: Pages og Layouts. I denne leksjonen ser De hva hver av dem er, og hvordan de kombineres for å bygge grensesnittet Deres.
Hva er en Page?
En Page er en React-komponent som gjengir brukergrensesnittet for én rute. Eksporter den som standard fra en page.js-fil, så får ruten sin egen visning.
Opprette en enkel side
Her er en grunnleggende page.js som gjengir hjemmeruten /. En side er ganske enkelt en komponent som eksporteres som standard – ikke noe mer.
// app/page.js
export default function HomePage() {
return (
<h1>Welcome to My App!</h1>
);
}Hva er en Layout?
En Layout er et brukergrensesnitt som deles mellom sider – en omsluttende struktur som sørger for et enhetlig utseende. Eksporter den fra layout.js; den tar imot en children-prop for nestet innhold.
Rotlayouten
Alle apper som bruker App Router, trenger en rotlayout i app/layout.js. Den omslutter hele appen, inkludert html- og body-taggene – dette er stedet for globale stiler og metadata.
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Nestede layouter
Legg til en layout.js i en hvilken som helst mappe for å opprette en nestet layout. En app/dashboard/layout.js omslutter alle sider under dashboard – et unikt delt brukergrensesnitt for hver seksjon.
Slik kombineres de
Next.js nester layouter automatisk: En side gjengis inne i children i den overordnede layouten, som igjen ligger i dennes overordnede layout, helt opp til roten.
Eksempel: En bloggseksjon
Se for Dem en blogg: blog/layout.js gir en delt navigasjon, blog/page.js er indekssiden, og blog/first-post/page.js er et innlegg – hvert element nestes oppover i roten.
Kode: Eksempel på blogg-layout
Denne blog/layout.js omslutter alle /blog-sider med en topptekst, navigasjon og bunntekst – delt rammeverk som holder seg ensartet i hele seksjonen.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return (
<div>
<header><h1>My Awesome Blog</h1></header>
<nav>
<a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
</nav>
<main>{children}</main>
<footer><p>© 2023 CoddyKit Blog</p></footer>
</div>
);
}Kode: Eksempel på blogside
Her er også blog/page.js. Innholdet gjengis akkurat der {children} står inne i BlogLayout – siden settes inn i layouten.
// app/blog/page.js
export default function BlogHomePage() {
return (
<section>
<h2>Welcome to the Blog Homepage!</h2>
<p>Discover our latest articles and insights.</p>
</section>
);
}Quiz: Pages kontra Layouts
La oss sjekke forståelsen Deres av Pages og Layouts i Next.js.
Oppsummering: Pages og Layouts
Oppsummering: Pages (page.js) gjengir det unike brukergrensesnittet til en rute, Layouts (layout.js) deler brukergrensesnitt på tvers av ruter, og Next.js nester dem ved hjelp av children.
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
- 22
- Leksjoner
- 88
Ofte stilte spørsmål
Er leksjonen «Oversikt over sider og oppsett» gratis?
Ja – hele teksten i «Oversikt over sider og oppsett» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Next.js 15 fullstack (App Router + Server Actions)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.
Hva lærer jeg i «Oversikt over sider og oppsett»?
Utforsk forskjellen mellom sider og oppsett, og hvordan de sammen danner UI-strukturen i Next.js-applikasjonen din. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 fullstack (App Router + Server Actions)?
Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 3 av 4.
Hvor lang tid tar leksjonen «Oversikt over sider og oppsett»?
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 fullstack (App Router + Server Actions)-leksjonen?
Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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
- Prosjektoppsett og CLI
- Grunnleggende filsystembasert ruting
- Oversikt over sider og oppsett
- Stilisere Next.js-appen din