Aufgabe 14 - Mehrseiter mit Next.js

Aufgabe 14 - Mehrseiter mit Next.js

Worum geht es?

Ihr erstes echtes Next.js-Projekt: eine mehrseitige Anwendung mit gemeinsamem Layout, dynamischen Routen und der Leitfrage des Frameworks: “Wo läuft mein Code, Server oder Client?” (siehe Kapitel Next.js I).

Was Sie dafür brauchen

• Kapitel Next.js I vollständig; die React-Aufgaben 11 bis 13.
• Node.js, create-next-app (App Router, TypeScript).

Welche Kompetenzen Sie erwerben und zeigen

• Sie legen ein Next.js-Projekt an und definieren Seitenstruktur über Ordner.
• Sie setzen gemeinsame Layouts und dynamische Segmente um.
• Sie entscheiden begründet zwischen Server- und Client-Komponenten.

Pädagogische Einordnung

• Reproduktion: Projektgerüst und Routen nach den Framework-Konventionen anlegen (Teil A).
• Reorganisation und Transfer: dynamische Routen und Wiederverwendung umsetzen (Teile B und C).
• Reflexion, Problemlösung und Urteilsbildung: die Server/Client-Entscheidung begründen und empirisch belegen (Teil D).

Szenario: Vereins-Website

Der (fiktive) Schul-E-Sport-Verein braucht eine Website: Startseite, Team-Übersicht, Detailseite je Team, Terminliste und eine Über-uns-Seite.

Arbeitsaufträge

Die Übung ist auf etwa zwei Stunden ausgelegt. Teil D ist der Expertenteil.

Teil A - Das Gerüst

1. Projekt mit create-next-app anlegen (TypeScript, App Router), Beispielinhalte aufräumen, Dev-Server starten.
2. Wurzel-Layout mit Header, Navigation und Footer; die Navigation nutzt Link und erscheint auf jeder Seite.
3. Routen anlegen: /, /teams, /termine, /ueber-uns; jede Seite mit eigenem Titel und Platzhalterinhalt.
4. Die Daten (Teams, Termine) liegen als typisierte Arrays in lib/data.ts, nicht in den Komponenten (Vorgriff auf die Schichten).

Teil B - Dynamische Route

1. /teams listet alle Teams als verlinkte Karten; wo möglich, verwenden Sie Ihre Kartenkomponente aus Aufgabe 11 wieder.
2. /teams/[id] zeigt die Details eines Teams (Mitglieder, Spiele, Erfolge); die id kommt aus params.
3. Unbekannte IDs führen über notFound() auf eine selbst gestaltete not-found.tsx.

Teil C - Interaktion an der richtigen Stelle

1. Die Terminliste bekommt einen umschaltbaren Filter “nur Heimtermine”. Zerlegen Sie nach dem Kapitelmuster: Die Seite bleibt Server-Komponente und übergibt die Daten; die Filterkomponente ist Client-Komponente ("use client") mit useState.
2. Markieren Sie in der Navigation den aktiven Link (Hook usePathname aus next/navigation; auch das ist ein Client-Anliegen; begründen Sie in einem Satz, warum).

Teil D - Expertenteil: Wo läuft mein Code?

1. Erklären Sie an genau den zwei Fällen aus Teil C in vier bis sechs Sätzen, warum die Teamliste ohne "use client" auskommt und der Terminfilter nicht. Nennen Sie das Entscheidungskriterium allgemein.
2. Experiment: Setzen Sie in eine Server- und in die Client-Komponente je ein console.log("rendering <name>"). Dokumentieren Sie mit Screenshots, wo die Ausgabe erscheint (Terminal gegen Browser-Konsole), auch beim Navigieren zwischen Seiten.
3. Gegenprobe: Setzen Sie testweise "use client" auf die Teams-Seite und beobachten Sie, dass alles weiter funktioniert. Erklären Sie in drei Sätzen, warum es trotzdem die schlechtere Lösung ist (Stichworte: ansteckende Direktive, Bundle, künftiger Datenzugriff der Server-Seite).
4. Zusatz: Ergänzen Sie ein verschachteltes Layout nur für den /teams-Bereich (etwa eine Unternavigation) und erklären Sie, wie sich Wurzel- und Bereichs-Layout schachteln.

Wissenscheck

1. Wie entsteht in Next.js aus einem Ordner eine Route, und was macht page.tsx darin?
2. Was leistet Link gegenüber einem gewöhnlichen <a>?
3. Welche Fähigkeiten haben nur Client-Komponenten, welche nur Server-Komponenten?
4. Warum gehört "use client" so tief wie möglich in den Komponentenbaum?
5. Woher weiß eine Seite unter /teams/[id], welches Team gemeint ist?

Abgabe

Git-Repository mit lauffähigem Projekt (npm run dev genügt); die Antworten und Screenshots aus Teil D in der README.