PricingLoginStart free
Frontend Academy · Lektion

Pages Router kontra App Router

Jämför Next.js routingparadigm: den filbaserade Pages Router och den nya App Router med nästlade layouter, laddning och felfångare.

Lektion 1 av 413 steg

Pages Router kontra App Router är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Två routrar, ett ramverk

Next.js har två routingsystem: den ursprungliga Pages Router-routern, med katalogen pages/, och den nyare App Router-routern, med katalogen app/ och Next 13+. Båda fungerar fortfarande i Next 14/15.

Pages Router — filbaserad routing

Varje fil under pages/ blir en rutt. Dynamiska segment använder hakparenteser: pages/users/[id].tsx matchar /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 — datahämtning

Särskilda exporter deklarerar beteendet för datahämtning: getStaticProps (SSG), getServerSideProps (SSR) och getStaticPaths (SSG med dynamiska rutter).

// 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 — mappbaserad routing

App Router använder mappar som ruttsegment. En page.tsx-fil i en mapp definierar sidan.

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ärskilda filer

Filer per segment ger kraftfulla byggstenar: layout.tsx (beständigt gränssnitt runt underordnade komponenter), loading.tsx (Suspense-fallback), error.tsx (error boundary) och not-found.tsx.

Kapslade layouter

App Router-layouter omsluter kapslade rutter och består under navigering – de monteras inte om.

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

Datahämtning i App Router

Server Components kan vara asynkrona och hämta data direkt – inga getServerSideProps eller getStaticProps behövs. Komponenten körs på servern och skickar endast HTML till 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>;
}

Client Components i App Router

Lägg till 'use client' högst upp i en fil för att markera komponenten som en Client Component, det vill säga interaktiv och körande i webbläsaren.

// 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 Routes kontra Route Handlers

Pages Router: pages/api/users.ts exporterar en standardfunktion med req/res. App Router: app/api/users/route.ts exporterar HTTP-metoder, GET och POST, som namngivna exporter med standardobjekten 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

Båda routrarna kan samexistera i samma projekt – flytta sidor stegvis, en i taget. App Router har företräde när det finns en konflikt.

När ska vilken användas?

Nya projekt: App Router, som är kraftfullare och det område som utvecklas mest just nu. Befintliga projekt med Pages Router: stanna kvar eller migrera gradvis. Små statiska webbplatser utan behov av layouter eller RSC: båda fungerar.

Snabbtest

Hur markerar man en komponent som en Client Component i Next.js App Router?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Pages Router jämfört med App Router

Pages Router: filbaserad, getStaticProps/getServerSideProps. App Router (Next 13+): mappbaserad, asynkrona Server Components, nästlade layouter, filer för inläsning och fel. Markera interaktivitet på klientsidan med 'use client'. API-rutter: pages/api/* jämfört med app/api/*/route.ts med exporter för HTTP-metoder. Båda kan samexistera; App Router utvecklas aktivt.

Gratis att börja

Lär dig HTML 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
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Pages Router kontra App Router” gratis?

Ja – hela texten till ”Pages Router kontra App Router” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Pages Router kontra App Router”?

Jämför Next.js routingparadigm: den filbaserade Pages Router och den nya App Router med nästlade layouter, laddning och felfångare. Ni övar på Frontend Academy 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy 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 1 av 4.

Hur lång tid tar lektionen ”Pages Router kontra App Router”?

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

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

  1. Pages Router kontra App Router
  2. Serverkomponenter och klientkomponenter
  3. SSG, SSR och ISR
  4. Next.js API-rutter och middleware
← Tillbaka till Frontend Academy