Frontend Academy · leksjon

Pages Router kontra App Router

Sammenlign Next.js' rutingparadigmer: den filbaserte Pages Router og den nye App Router med nestede oppsett, lasting og feilgrenser.

Leksjon 1 av 413 trinn

Pages Router kontra App Router er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 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 Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

To rutere, ett rammeverk

Next.js har to rutingssystemer: den opprinnelige Pages Router (pages/-mappen) og den nyere App Router (app/-mappen, Next 13+). Begge fungerer fortsatt i Next 14/15.

Pages Router — Filbasert ruting

Hver fil under pages/ blir en rute. Dynamiske segmenter bruker hakeparenteser: pages/users/[id].tsx samsvarer med /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — Henting av data

Spesielle eksporter deklarerer hvordan data skal hentes: getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG med dynamiske ruter).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — Mappebasert ruting

App Router bruker mapper som rutesegmenter. En page.tsx-fil i en mappe definerer siden.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — Spesielle filer

Filer for hvert segment gir kraftige primitiver: layout.tsx (vedvarende grensesnitt rundt underordnede elementer), loading.tsx (Suspense-fallback), error.tsx (Error Boundary), not-found.tsx.

Nestede layouter

App Router-layouter pakker inn nestede ruter og består under navigering – de monteres ikke på nytt.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Henting av data i App Router

Serverkomponenter kan være asynkrone og hente data direkte – ingen getServerSideProps/getStaticProps. Komponenten kjører på serveren og sender bare HTML til klienten.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Klientkomponenter i App Router

Legg til 'use client' øverst i en fil for å merke komponenten som en klientkomponent (interaktiv og kjører i nettleseren).

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API-ruter kontra route handlers

Pages Router: pages/api/users.ts eksporterer en standardfunksjon med req/res. App Router: app/api/users/route.ts eksporterer HTTP-metoder (GET, POST) som navngitte eksporter ved hjelp av standardene Request/Response.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Strategi for migrering

Begge ruterne kan eksistere i samme prosjekt – flytt sider én om gangen. App Router har forrang når det oppstår en konflikt.

Når bør de ulike brukes?

Nye prosjekter: App Router (kraftigere og det nåværende satsingsområdet). Eksisterende prosjekter med Pages Router: fortsett som før eller migrer gradvis. Små statiske nettsteder uten behov for layouter eller RSC: begge fungerer.

Kort kontroll

Hvordan markerer man en komponent som en Client Component i Next.js App Router?

Besvar den i den interaktive leksjonen

Oppsummering: Pages Router kontra App Router

Pages Router: filbasert, getStaticProps/getServerSideProps. App Router (Next 13+): mappebasert, asynkrone Server Components, nestede oppsett, samt filer for lasting og feil. Marker klientinteraktivitet med 'use client'. API-ruter: pages/api/* kontra app/api/*/route.ts med eksporter for HTTP-metoder. Begge kan eksistere samtidig, men App Router er under aktiv utvikling.

Gratis å komme i gang

Lær deg HTML 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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Pages Router kontra App Router» gratis?

Ja – hele teksten i «Pages Router kontra App Router» 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 Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Pages Router kontra App Router»?

Sammenlign Next.js' rutingparadigmer: den filbaserte Pages Router og den nye App Router med nestede oppsett, lasting og feilgrenser. Du øver på Frontend Academy 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy 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 1 av 4.

Hvor lang tid tar leksjonen «Pages Router kontra App Router»?

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 Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-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

← Tilbake til Frontend Academy