Frontend Academy · Lektion

Pages Router kontra App Router

Sammenlign Next.js' routing-paradigmer: den filbaserede Pages Router og den nye App Router med indlejrede layouts, indlæsning og error boundaries.

Lektion 1 af 413 trin

Pages Router kontra App Router er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

To routere, ét framework

Next.js har to routingsystemer: det oprindelige Pages Router (pages/-mappe) og det nyere App Router (app/-mappe, Next 13+). Begge fungerer stadig i Next 14/15.

Pages Router — Filbaseret routing

Hver fil under pages/ bliver til en rute. Dynamiske segmenter bruger kantede parenteser: pages/users/[id].tsx matcher /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 — Datahentning

Særlige exports angiver adfærden for datahentning: 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 — Mapp基seret routing

App Router bruger 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 — Særlige filer

Filer pr. segment giver effektive primitiver: layout.tsx (vedvarende brugerflade omkring children), loading.tsx (Suspense-reservevisning), error.tsx (fejlgrænse), not-found.tsx.

Indlejrede layouts

App Router-layouts omslutter indlejrede ruter og bevares under navigation — uden ny montering.

// 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

Datahentning i App Router

Server Components kan være asynkrone og hente data direkte — uden getServerSideProps/getStaticProps. Komponenten kører på serveren og sender kun 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

Tilføj 'use client' øverst i en fil for at markere dens komponent som en Client Component (interaktiv, kører i browseren).

// 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 standardfunktion med req/res. App Router: app/api/users/route.ts eksporterer HTTP-metoder (GET, POST) som navngivne exports ved hjælp af standarden 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 });
}

Migreringsstrategi

Begge routere kan eksistere i det samme projekt — flyt sider én ad gangen. App Router har forrang, når der er en konflikt.

Hvornår skal du bruge hvilken?

Nye projekter: App Router (mere effektiv og det nuværende fokus for investeringer). Eksisterende projekter med Pages Router: fortsæt som nu, eller migrér gradvist. Små statiske websteder uden behov for layouts eller RSC: begge dele fungerer.

Hurtigt tjek

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

Besvar den i den interaktive lektion

Opsummering: Pages Router vs. App Router

Pages Router: filbaseret, getStaticProps/getServerSideProps. App Router (Next 13+): mappebaseret, asynkrone Server Components, indlejrede layouts samt loading- og error-filer. Markér interaktivitet på klienten med 'use client'. API-ruter: pages/api/* vs. app/api/*/route.ts med eksporterede HTTP-metoder. Begge kan eksistere side om side, men App Router er under aktiv videreudvikling.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Pages Router kontra App Router” gratis?

Ja — hele teksten til “Pages Router kontra App Router” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Pages Router kontra App Router”?

Sammenlign Next.js' routing-paradigmer: den filbaserede Pages Router og den nye App Router med indlejrede layouts, indlæsning og error boundaries. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Pages Router kontra App Router”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy