PricingLoginStart free
React Academy · leksjon

Filkonvensjoner for App Router

Forstå app/-mappen og filene page.tsx, layout.tsx, loading.tsx og error.tsx.

Leksjon 1 av 413 trinn

Filkonvensjoner for App Router er en gratis leksjon i React 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 React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

app/-katalogen

Next.js App Router bruker app/-katalogen. Mapper definerer URL-segmenter, mens spesialfiler i mappene definerer virkemåten for hvert segment.

page.tsx – rutegrensesnittet

page.tsx eksporterer React-komponenten som rendres for et URL-segment. Uten en page.tsx er ruten ikke offentlig tilgjengelig.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Vedvarende skall

layout.tsx omslutter underordnede ruter. Det vedvarer ved navigering – tilstanden nullstilles ikke når den underordnede ruten endres.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Umiddelbart innlastingsgrensesnitt

loading.tsx gjengis umiddelbart mens sidens asynkrone data lastes inn. Den omslutter siden i en automatisk Suspense-grense.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Feilgrenser

error.tsx er en React-feilgrense for segmentet. Den mottar feilen og en reset-funksjon for å prøve på nytt.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — 404-grensesnitt

not-found.tsx gjengis når notFound() kalles fra en serverkomponent, eller når ingen rute passer.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Layouts som monteres på nytt

template.tsx ligner på layout.tsx, men oppretter en ny instans ved hver navigering – tilstanden nullstilles og effekter kjøres på nytt. Bruk den til animasjoner eller analyse.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — API-ruter

route.ts (ikke route.tsx) eksporterer behandlere for HTTP-metoder (GET, POST osv.) for å opprette API-endepunkter i app/-mappen.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — Edge-middleware

middleware.ts i prosjektroten kjører før hver samsvarende forespørsel på edge-plattformen – og brukes til autentiseringskontroller, omdirigeringer og omskriving av headere.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Samlokalisering

De kan plassere filer som ikke er ruter (komponenter, verktøy og tester) i app/-mapper. Bare filer med de spesielle navnekonvensjonene (page, layout osv.) behandles som rutesegmenter.

Nestede layouts

Hver mappe kan ha sin egen layout.tsx. Den nestede layouten omslutter bare barna i sitt segment og settes sammen med den overordnede layouten.

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

Hurtigsjekk

Hvilken App Router-fil tilbyr en automatisk Suspense-reservevisning mens sidens asynkrone data lastes inn?

Besvar den i den interaktive leksjonen

Oppsummering

App Router bruker spesialfiler: page.tsx (rutegrensesnitt), layout.tsx (vedvarende skall), loading.tsx (Suspense-reservevisning), error.tsx (feilgrense), not-found.tsx (404), route.ts (API) og middleware.ts (edge-logikk).

Gratis å komme i gang

Lær deg React 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
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Filkonvensjoner for App Router» gratis?

Ja – hele teksten i «Filkonvensjoner for 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 React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Filkonvensjoner for App Router»?

Forstå app/-mappen og filene page.tsx, layout.tsx, loading.tsx og error.tsx. Du øver på React 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 React Academy?

Ingen tidligere erfaring er nødvendig. React 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 «Filkonvensjoner for 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 React Academy-leksjonen?

Ja. Alle React 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

  1. Filkonvensjoner for App Router
  2. Server- kontra klientkomponenter i Next.js
  3. Dynamiske ruter og rutegrupper
  4. Metadata-API og SEO i App Router
← Tilbake til React Academy