0Pricing
React Academy · Lektion

Dateikonventionen im App Router

Verstehen Sie das Verzeichnis app/ sowie die Dateien page.tsx, layout.tsx, loading.tsx und error.tsx.

Dateikonventionen im App Router ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Das Verzeichnis app/

Der App Router von Next.js verwendet das Verzeichnis app/. Ordner definieren URL-Segmente; spezielle Dateien innerhalb dieser Ordner legen das Verhalten für jedes Segment fest.

page.tsx – die UI der Route

page.tsx exportiert die React-Komponente, die für ein URL-Segment gerendert wird. Ohne eine page.tsx ist die Route nicht öffentlich zugänglich.

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

layout.tsx — Persistente Shells

layout.tsx umschließt untergeordnete Routen. Es bleibt bei der Navigation erhalten – sein Zustand wird nicht zurückgesetzt, wenn sich die untergeordnete Route ändert.

// 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 — Sofortige Ladeoberfläche

loading.tsx wird sofort gerendert, während die asynchronen Daten der Seite geladen werden. Es umschließt die Seite automatisch mit einer Suspense-Grenze.

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

error.tsx — Error Boundaries

error.tsx ist eine React-Error-Boundary für das Segment. Sie erhält den Fehler und eine reset-Funktion zum erneuten Versuch.

'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-Oberfläche

not-found.tsx wird gerendert, wenn notFound() aus einer Server Component aufgerufen wird oder keine Route übereinstimmt.

// 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 mit erneutem Mounten

template.tsx ähnelt layout.tsx, erstellt jedoch bei jeder Navigation eine neue Instanz – der Zustand wird zurückgesetzt und Effekte werden erneut ausgeführt. Verwenden Sie es für Animationen oder Analytics.

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

route.ts — API-Routen

route.ts (nicht route.tsx) exportiert Handler für HTTP-Methoden (GET, POST usw.), um API-Endpunkte im Verzeichnis app/ zu erstellen.

// 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 im Projektstamm wird vor jeder passenden Anfrage am Edge ausgeführt – beispielsweise für Authentifizierungsprüfungen, Weiterleitungen und das Umschreiben von Headern.

// 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*'] };

Colocation

Sie können routefremde Dateien (Komponenten, Hilfsfunktionen, Tests) in app/-Verzeichnissen gemeinsam mit den Routen ablegen. Nur Dateien mit den speziellen Konventionsnamen (page, layout usw.) werden als Routensegmente behandelt.

Verschachtelte Layouts

Jeder Ordner kann ein eigenes layout.tsx enthalten. Das verschachtelte Layout umschließt nur die untergeordneten Elemente seines Segments und wird mit dem darüberliegenden übergeordneten Layout kombiniert.

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

Kurztest

Welche Datei des App Routers stellt während des Ladens der asynchronen Daten einer Seite automatisch einen Suspense-Fallback bereit?

Zusammenfassung

Der App Router verwendet spezielle Dateien: page.tsx (Routenoberfläche), layout.tsx (persistente Shell), loading.tsx (Suspense-Fallback), error.tsx (Error Boundary), not-found.tsx (404), route.ts (API) und middleware.ts (Logik am Edge).

Häufig gestellte Fragen

Ist die Lektion „Dateikonventionen im App Router“ kostenlos?

Ja — der vollständige Text von „Dateikonventionen im App Router“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dateikonventionen im App Router“?

Verstehen Sie das Verzeichnis app/ sowie die Dateien page.tsx, layout.tsx, loading.tsx und error.tsx. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Dateikonventionen im App Router“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Dateikonventionen im App Router
  2. Server- und Client-Components in Next.js
  3. Dynamische Routes und Route-Gruppen
  4. Metadata API und SEO im App Router
← Zurück zu React Academy