Kom igång med App Router

Vad är App Router?

App Router är Next.js standardsätt att hantera routing sedan version 13. Istället för att lägga sidor i en pages/-mapp använder du app/-mappen. Varje undermapp representerar ett URL-segment och varje page.js-fil blir en sida besökaren kan nå.

Skillnaden mot den gamla Pages Router är inte bara strukturell. App Router bygger på React Server Components som standard, vilket innebär att komponenter renderas på servern och skickar minimal JavaScript till webbläsaren.

Filstruktur och routing

Routing i App Router är helt filsystembaserad. En fil på app/produkter/page.js svarar på URL:en /produkter. En fil på app/produkter/[id]/page.js svarar på /produkter/123, /produkter/abc och alla andra varianter av det dynamiska segmentet.

Varje route-mapp kan innehålla flera speciella filer med väldefinierade roller:

• page.js - den faktiska sidan som renderas för besökaren
• layout.js - ett omslag som delas av sidan och alla dess undersidor
• loading.js - visas med React Suspense medan sidan laddar
• error.js - visas om ett oväntat fel uppstår

Layouts och nesting

En av App Routers starkaste funktioner är nästade layouts. Skapa en layout.js i en mapp och den omsluter automatiskt alla undersidor i den mappen och djupare.

export default function ProduktLayout({ children }) {
  return (
    <div>
      <ProduktNav />
      {children}
    </div>
  );
}

Varje layoutnivå är oberoende av sina syskon. Vid navigation mellan undersidor renderas bara de delar av trädet om som faktiskt ändrats - layouten förblir monterad.

Laddningstillstånd

Skapa en loading.js-fil i samma mapp som din sida. Next.js visar den automatiskt med React Suspense medan data laddas på servern. Du behöver inte hantera laddningstillstånd manuellt i varje komponent.

export default function Loading() {
  return <div className="skeleton">Laddar...</div>;
}

Laddningsgränsen wrappas automatiskt kring din page.js. Det innebär att navigationen sker direkt och skeleton-vyns visas tills servern svarat.

Felhantering

error.js fungerar som en React Error Boundary för den aktuella rutten. Den måste vara en klientkomponent och tar emot ett error-objekt och en reset-funktion som försöker rendera sidan på nytt.

"use client";

export default function Error({ error, reset }) {
  return (
    <div>
      <p>Något gick fel: {error.message}</p>
      <button onClick={reset}>Försök igen</button>
    </div>
  );
}

Nästa steg

Nu när du förstår grunderna i App Router är nästa steg att lära dig Server Actions. Server Actions låter dig köra serversidekod direkt från formulär och klientkomponenter utan att behöva skapa separata API-rutter. Guiden Server Actions i praktiken tar vid här.