Kapitel 4: Routing-System

📖 Lernziele

In diesem Kapitel lernen Sie:

✅ Das App Router Konzept verstehen (Next.js 14)
✅ Seiten und Layouts erstellen
✅ Dynamische Routen und verschachtelte Routen
✅ Routing-Parameter abrufen
✅ Navigation zwischen Seiten
✅ 404-Seiten und Weiterleitungen

4.1 App Router Grundkonzepte

🎯 Kernkonzept

Next.js 14 verwendet App Router (Dateisystem-basiertes Routing).

Wie es funktioniert:

Datei-Struktur → Automatische Route

app/page.js         →  /
app/about/page.js   →  /about
app/blog/page.js    →  /blog

📂 Wichtige Dateien im App Router

Datei	Zweck	Pflicht?
`page.js`	Seiteninhalt	✅ Ja (für jede Route)
`layout.js`	Gemeinsames Layout	⭐ Empfohlen
`loading.js`	Ladezustand	❌ Optional
`error.js`	Fehlerbehandlung	❌ Optional
`not-found.js`	404-Seite	❌ Optional

🎬 Beispiel: Einfache Route

Datei: app/about/page.js

jsx

export default function AboutPage() {
  return (
    <div>
      <h1>Über uns</h1>
      <p>Willkommen auf unserer Über uns Seite!</p>
    </div>
  );
}

Zugriff: http://localhost:3000/about

4.2 Pages Router Grundlagen (Kompatibilität)

📖 Was ist Pages Router?

Pages Router ist der ältere Routing-Ansatz (Next.js 12 und früher).

Vergleich:

Aspekt	App Router (Neu)	Pages Router (Alt)
Verzeichnis	`app/`	`pages/`
Dateiname	`page.js`	`index.js` oder `[name].js`
Layouts	`layout.js`	`_app.js`
Empfehlung	✅ Next.js 14 Standard	⚠️ Nur für alte Projekte

📂 Pages Router Struktur

pages/
├── _app.js           # Globales Layout
├── index.js          # Startseite (/)
├── about.js          # /about
└── blog/
    └── [slug].js     # /blog/[slug]

Wann Pages Router verwenden?

⚠️ Nur bei bestehenden Projekten, die noch Pages Router verwenden
✅ Bei neuen Projekten: Immer App Router verwenden!

4.3 Dynamische Routen

🎯 Dynamische Routen erstellen

Szenario: Blog mit verschiedenen Artikeln (/blog/artikel-1, /blog/artikel-2)

Datei-Struktur:

app/
└── blog/
    └── [slug]/
        └── page.js    →  /blog/[slug]

📝 Beispiel: Blog-Artikel Seite

Datei: app/blog/[slug]/page.js

jsx

// Server Component (standardmäßig)
export default function BlogPost({ params }) {
  const { slug } = params;
  
  return (
    <article>
      <h1>Blog-Artikel: {slug}</h1>
      <p>Dies ist der Inhalt des Artikels...</p>
    </article>
  );
}

Zugriff:

http://localhost:3000/blog/erster-artikel → slug = "erster-artikel"
http://localhost:3000/blog/nextjs-tutorial → slug = "nextjs-tutorial"

🌟 Catch-all Routen (`[...slug]`)

Datei: app/blog/[...slug]/page.js

jsx

export default function BlogCatchAll({ params }) {
  const { slug } = params; // Array!
  
  return (
    <div>
      <h1>Pfad: {slug.join(' / ')}</h1>
    </div>
  );
}

Zugriff:

/blog/a → slug = ["a"]
/blog/a/b → slug = ["a", "b"]
/blog/a/b/c → slug = ["a", "b", "c"]

4.4 Verschachtelte Routen (Nested Routes)

🎯 Layouts erstellen

Szenario: Dashboard mit gemeinsamem Sidebar-Layout.

Datei-Struktur:

app/
├── layout.js           # Root Layout (überall)
├── page.js             # Startseite (/)
└── dashboard/
    ├── layout.js       # Dashboard Layout
    ├── page.js         # /dashboard
    └── einstellungen/
        └── page.js     # /dashboard/einstellungen

📝 Beispiel: Dashboard Layout

Datei: app/dashboard/layout.js

jsx

export default function DashboardLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      {/* Sidebar */}
      <aside style={{ width: '200px', background: '#f0f0f0', padding: '20px' }}>
        <h3>Dashboard</h3>
        <nav>
          <ul>
            <li><a href="/dashboard">Übersicht</a></li>
            <li><a href="/dashboard/einstellungen">Einstellungen</a></li>
          </ul>
        </nav>
      </aside>
      
      {/* Hauptinhalt */}
      <main style={{ flex: 1, padding: '20px' }}>
        {children}
      </main>
    </div>
  );
}

Datei: app/dashboard/page.js

jsx

export default function DashboardPage() {
  return <h1>Dashboard Übersicht</h1>;
}

Ergebnis:

/dashboard → Zeigt Sidebar + "Dashboard Übersicht"
/dashboard/einstellungen → Zeigt Sidebar + Einstellungen-Seite

4.5 Routing-Parameter abrufen

🎯 Parameter in Server Components

Datei: app/blog/[slug]/page.js

jsx

// Next.js 14: params als Prop
export default function BlogPost({ params }) {
  const { slug } = params;
  
  return <h1>Artikel: {slug}</h1>;
}

🎯 Parameter in Client Components

Datei: app/blog/[slug]/page.js (Client Component)

jsx

'use client'; // WICHTIG!

import { useParams } from 'next/navigation';

export default function BlogPost() {
  const params = useParams();
  const { slug } = params;
  
  return <h1>Artikel: {slug}</h1>;
}

🔍 Query-Parameter abrufen

URL: /blog?q=nextjs&page=2

Client Component:

jsx

'use client';

import { useSearchParams } from 'next/navigation';

export default function SearchPage() {
  const searchParams = useSearchParams();
  const query = searchParams.get('q'); // "nextjs"
  const page = searchParams.get('page'); // "2"
  
  return (
    <div>
      <p>Suche nach: {query}</p>
      <p>Seite: {page}</p>
    </div>
  );
}

🔗 Link-Komponente

Import:

jsx

import Link from 'next/link';

Verwendung:

jsx

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Startseite</Link>
      <Link href="/about">Über uns</Link>
      <Link href="/blog/erster-artikel">Artikel</Link>
    </nav>
  );
}

Client Component:

jsx

'use client';

import { useRouter } from 'next/navigation';

export default function MyComponent() {
  const router = useRouter();
  
  const navigateToBlog = () => {
    router.push('/blog'); // Navigiert zu /blog
  };
  
  const goBack = () => {
    router.back(); // Zurück zur vorherigen Seite
  };
  
  return (
    <div>
      <button onClick={navigateToBlog}>Zum Blog</button>
      <button onClick={goBack}>Zurück</button>
    </div>
  );
}

4.7 404-Seiten & Weiterleitungen

📝 404-Seite erstellen

Datei: app/not-found.js

jsx

export default function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '100px' }}>
      <h1>404 - Seite nicht gefunden</h1>
      <p>Die angeforderte Seite existiert nicht.</p>
      <Link href="/">Zur Startseite</Link>
    </div>
  );
}

🔄 Weiterleitungen (Redirects)

In Server Components:

jsx

import { redirect } from 'next/navigation';

export default function OldPage() {
  // Weiterleitung zu neuer URL
  redirect('/neu');
  
  // Diese Zeile wird nie erreicht
  return null;
}

In next.config.js:

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/alt',
        destination: '/neu',
        permanent: true, // 301 Redirect
      },
    ];
  },
};

module.exports = nextConfig;

4.8 Middleware (Routing Interception)

🎯 Was ist Middleware?

Middleware führt Code vor dem Laden einer Seite aus (z.B. für Auth-Prüfung).

Datei: middleware.js (im Projekt-Root)

javascript

import { NextResponse } from 'next/server';

export function middleware(request) {
  // Beispiel: Auth-Prüfung
  const token = request.cookies.get('token');
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

// Welche Routen sollen abgefangen werden?
export const config = {
  matcher: ['/dashboard/:path*'],
};

Szenario: /dashboard nur für eingeloggte Benutzer.

middleware.js:

javascript

import { NextResponse } from 'next/server';

export function middleware(request) {
  const isLoggedIn = checkAuth(request); // Eigene Funktion
  
  if (!isLoggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
App Router	Dateisystem-Routing (`app/`-Verzeichnis)
Dynamische Routen	`[slug]` für variable Pfade
Verschachtelte Routen	Layouts für komplexe Strukturen
Parameter	`useParams()` und `useSearchParams()` Hooks
Navigation	`<Link>` Komponente und `useRouter()`
404 & Redirects	`not-found.js` und `redirect()` Funktion
Middleware	Routing-Interception (z.B. Auth-Prüfung)

✅ Nächste Schritte

✅ Übung: Erstellen Sie dynamische Routen für einen Blog
✅ Übung: Implementieren Sie ein Dashboard-Layout
✅ Weiter geht's: Kapitel 5 - Seiten & Komponenten

🎯 Selbsttest

Frage 1: Welche Datei erstellt eine Route im App Router?

Antwort anzeigen

`page.js`

Frage 2: Wie erstellt man eine dynamische Route für Blog-Artikel?

Antwort anzeigen

Erstellen Sie ein Verzeichnis `app/blog/[slug]/page.js`. Der Parameter `slug` ist dann in `params.slug` verfügbar.

Frage 3: Was ist der Unterschied zwischen App Router und Pages Router?

Antwort anzeigen

App Router (neu, `app/`-Verzeichnis) ist der Next.js 14 Standard. Pages Router (alt, `pages/`-Verzeichnis) ist nur für Kompatibilität.

🚀 Weiter zu Kapitel 5: Seiten & Komponenten

Kapitel 4: Routing-System

📖 Lernziele

4.1 App Router Grundkonzepte

🎯 Kernkonzept

📂 Wichtige Dateien im App Router

🎬 Beispiel: Einfache Route

4.2 Pages Router Grundlagen (Kompatibilität)

📖 Was ist Pages Router?

📂 Pages Router Struktur

4.3 Dynamische Routen

🎯 Dynamische Routen erstellen

📝 Beispiel: Blog-Artikel Seite

🌟 Catch-all Routen (`[...slug]`)

4.4 Verschachtelte Routen (Nested Routes)

🎯 Layouts erstellen

📝 Beispiel: Dashboard Layout

4.5 Routing-Parameter abrufen

🎯 Parameter in Server Components

🎯 Parameter in Client Components

🔍 Query-Parameter abrufen

4.6 Navigation

🔗 Link-Komponente

🚀 Programmatische Navigation

4.7 404-Seiten & Weiterleitungen

📝 404-Seite erstellen

🔄 Weiterleitungen (Redirects)

4.8 Middleware (Routing Interception)

🎯 Was ist Middleware?

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest

Kapitel 4: Routing-System ​

📖 Lernziele ​

4.1 App Router Grundkonzepte ​

🎯 Kernkonzept ​

📂 Wichtige Dateien im App Router ​

🎬 Beispiel: Einfache Route ​

4.2 Pages Router Grundlagen (Kompatibilität) ​

📖 Was ist Pages Router? ​

📂 Pages Router Struktur ​

4.3 Dynamische Routen ​

🎯 Dynamische Routen erstellen ​

📝 Beispiel: Blog-Artikel Seite ​

🌟 Catch-all Routen ([...slug]) ​

4.4 Verschachtelte Routen (Nested Routes) ​

🎯 Layouts erstellen ​

📝 Beispiel: Dashboard Layout ​

4.5 Routing-Parameter abrufen ​

🎯 Parameter in Server Components ​

🎯 Parameter in Client Components ​

🔍 Query-Parameter abrufen ​

4.6 Navigation ​

🔗 Link-Komponente ​

🚀 Programmatische Navigation ​

4.7 404-Seiten & Weiterleitungen ​

📝 404-Seite erstellen ​

🔄 Weiterleitungen (Redirects) ​

4.8 Middleware (Routing Interception) ​

🎯 Was ist Middleware? ​

🔐 Anwendungsfall: Login-Schutz ​

📝 Zusammenfassung ​

✅ Nächste Schritte ​

🎯 Selbsttest ​

Kapitel 4: Routing-System

📖 Lernziele

4.1 App Router Grundkonzepte

🎯 Kernkonzept

📂 Wichtige Dateien im App Router

🎬 Beispiel: Einfache Route

4.2 Pages Router Grundlagen (Kompatibilität)

📖 Was ist Pages Router?

📂 Pages Router Struktur

4.3 Dynamische Routen

🎯 Dynamische Routen erstellen

📝 Beispiel: Blog-Artikel Seite

🌟 Catch-all Routen (`[...slug]`)

4.4 Verschachtelte Routen (Nested Routes)

🎯 Layouts erstellen

📝 Beispiel: Dashboard Layout

4.5 Routing-Parameter abrufen

🎯 Parameter in Server Components

🎯 Parameter in Client Components

🔍 Query-Parameter abrufen

4.6 Navigation

🔗 Link-Komponente

🚀 Programmatische Navigation

4.7 404-Seiten & Weiterleitungen

📝 404-Seite erstellen

🔄 Weiterleitungen (Redirects)

4.8 Middleware (Routing Interception)

🎯 Was ist Middleware?

🔐 Anwendungsfall: Login-Schutz

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest