Dynamisches Routing & Navigation in Next.js

1import { notFound } from 'next/​navigation';
2
3// 1. Strikte Typisierung für die asynchronen Parameter in Next.js 15+
4interface PageProps {
5  params: Promise<{ slug?: string[] }>;
6}
7
8export default async function CatchAllPage({ params }: PageProps) {
9  // 2. Wir müssen die Params in Next.js 15 awaiten!
10  const resolvedParams = await params;
11  
12  // 3. Den Array-Slug wieder zu einem String zusammenbauen (z.B. "unternehmen/​team")
13  // Falls kein Slug existiert (Startseite), setzen wir einen leeren String oder "index"
14  const currentSlug = resolvedParams.slug ? resolvedParams.slug.join('/') : 'index';
15
16  // 4. (Simulation) Wir rufen unsere Contao-API auf
17  // Den echten Fetcher bauen wir in der nächsten Iteration dieses Artikels!
18  const contaoData = await fetch(`http://localhost:8080/​api/​v1/​page/${currentSlug}`);
19
20  // 5. 404 Handling: Wenn Contao die Seite nicht kennt, werfen wir die Next.js 404-Seite
21  if (!contaoData.ok) {
22    notFound(); 
23  }
24
25  const page = await contaoData.json();
26
27  // 6. Das Frontend-Rendering (Vorübergehender Platzhalter)
28  return (
29    <main className="container mx-auto py-12">
30      <h1 className="text-4xl font-bold text-brand-primary">
31        {page.routing?.tit​le || 'Seite gefunden!'}
32      </​h1>
33      <p className="mt-4 text-slate-600">
34        Aktueller Slug: <code className="bg-slate-100 p-1 rounded">/{currentSlug}</​code>
35      </​p>
36    </​main>
37  );
38}

1// Datei: frontend/​src/​types/​contao.ts
2
3export interface ContaoMeta {
4  id: number;
5  type: string;
6  language: string;
7}
8
9export interface ContaoRouting {
10  alias: string;
11  tit​le: string;
12}
13
14// Generisches Interface für alle Inhaltselemente
15export interface ContaoContentElement {
16  id: number;
17  type: string;
18  // Weitere spezifische Felder (text, image_url, etc.) werden hier abgeleitet
19  [key: string]: any; 
20}
21
22export interface ContaoArticle {
23  id: number;
24  elements: ContaoContentElement[];
25}
26
27export interface ContaoPageData {
28  meta: ContaoMeta;
29  routing: ContaoRouting;
30  content: {
31    articles: ContaoArticle[];
32  };
33}

1// Datei: frontend/​src/​lib/​api/​contao.ts
2import { ContaoPageData } from '@/​types/​contao';
3
4const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
5const API_SECRET = process.env.CONTAO_API_KEY;
6
7export async function getContaoPageBySlug(slug: string): Promise<ContaoPageData | null> {
8  if (!API_SECRET) {
9    throw new Error('CONTAO_API_KEY ist in den Umgebungsvariablen nicht definiert.');
10  }
11
12  try {
13    // Next.js 15 Fetch-Konfiguration: Wir nutzen Tags für On-Demand Revalidation
14    const res = await fetch(`${API_BASE_URL}/​api/​v1/​page/${slug}`, {
15      method: 'GET',
16      headers: {
17        'Accept': 'application/​json',
18        'Authorization': `Bearer ${API_SECRET}`,
19      },
20      next: {
21        // Caching-Strategie (ISR): Der Cache wird nach 3600 Sekunden als stale markiert
22        // oder kann über den Tag 'contao-pages' manuell invalidiert werden.
23        revalidate: 3600, 
24        tags: ['contao-pages', `page-${slug}`],
25      },
26    });
27
28    if (!res.ok) {
29      if (res.status === 404) return null; // Seite existiert nicht -> 404 im Frontend
30      throw new Error(`Contao API Fehler: ${res.statusText}`);
31    }
32
33    const data: ContaoPageData = await res.json();
34    return data;
35    
36  } catch (error) {
37    console.error(`Fehler beim Abrufen der Seite /${slug}:`, error);
38    return null;
39  }
40}

1// Datei: frontend/​src/​app/[[...slug]]/​page.tsx
2import { notFound } from 'next/​navigation';
3import { getContaoPageBySlug } from '@/​lib/​api/​contao';
4
5interface PageProps {
6  params: Promise<{ slug?: string[] }>;
7}
8
9export default async function CatchAllPage({ params }: PageProps) {
10  const resolvedParams = await params;
11  const currentSlug = resolvedParams.slug ? resolvedParams.slug.join('/') : 'index';
12
13  // 1. Daten über unseren typsicheren Service holen
14  const pageData = await getContaoPageBySlug(currentSlug);
15
16  // 2. Sauberes 404-Handling
17  if (!pageData) {
18    notFound(); 
19  }
20
21  // Ab hier hast du volle Autovervollständigung für "pageData"!
22  return (
23    <main className="container mx-auto py-12">
24      <h1 className="text-4xl font-bold mb-8">
25        {pageData.routing.tit​le}
26      </​h1>
27      
28      {/* Artikel-Iteration (Platzhalter) */}
29      {pageData.content.articles.map((article) => (
30        <section key={article.id} className="mb-12 border-b pb-8">
31          <p className="text-slate-500">Artikel-ID: {article.id}</​p>
32          <p>Hier rendern wir später die {article.elements.length} Inhaltselemente...</​p>
33        </​section>
34      ))}
35    </​main>
36  );
37}

1// Datei: frontend/​src/​types/​contao.ts (Ergänzung)
2
3export interface ContaoNavItem {
4  id: number;
5  tit​le: string;
6  href: string; // z.B. "/​unternehmen/​team"
7  isActive?: boolean;
8  subitems?: ContaoNavItem[]; // Rekursive Struktur für Dropdowns!
9}

1// Datei: frontend/​src/​lib/​api/​contao.ts (Ergänzung)
2
3export async function getContaoNavigation(menuId: string = 'main'): Promise<ContaoNavItem[]> {
4  if (!API_SECRET) return [];
5
6  try {
7    const res = await fetch(`${API_BASE_URL}/​api/​v1/​navigation/${menuId}`, {
8      headers: { 'Authorization': `Bearer ${API_SECRET}` },
9      next: { 
10        revalidate: 3600, // Caching für 1 Stunde
11        tags: ['contao-navigation'] // Erlaubt sofortige Invalidierung bei Menü-Änderungen
12      }
13    });
14
15    if (!res.ok) throw new Error('Navigation API Error');
16    return res.json();
17  } catch (error) {
18    console.error('Fehler beim Abrufen der Navigation:', error);
19    return [];
20  }
21}

1// Datei: frontend/​src/​components/​layout/​MainNavigation.tsx
2'use client'; // Client Component für Interaktivität (Hover/​Click states)
3
4import Link from 'next/​link';
5import { usePathname } from 'next/​navigation';
6import { ContaoNavItem } from '@/​types/​contao';
7
8interface Props {
9  items: ContaoNavItem[];
10}
11
12export default function MainNavigation({ items }: Props) {
13  // Next.js Hook, um die aktive Route auszulesen
14  const pathname = usePathname();
15
16  // Eine rekursive Render-Funktion für unendlich tiefe Menüs
17  const renderNavTree = (navItems: ContaoNavItem[], level = 0) => {
18    return (
19      <ul className={`flex ${level === 0 ? 'gap-6' : 'flex-col gap-2 pl-4 mt-2'}`}>
20        {navItems.map((item) => {
21          // Prüfen, ob wir uns auf der aktuellen Route befinden
22          const isActive = pathname === item.href || pathname?.startsWith(`${item.href}/`);
23
24          return (
25            <li key={item.id} className="relative group">
26              <Link 
27                href={item.href}
28                className={`text-sm font-medium transition-colors hover:text-brand-primary ${
29                  isActive ? 'text-brand-primary' : 'text-slate-700'
30                }`}
31              >
32                {item.tit​le}
33              </​Link>
34              
35              {/* Dropdown rendern, falls Sub-Items existieren */}
36              {item.subitems && item.subitems.length > 0 && (
37                <div className={level === 0 ? "absolute left-0 top-full hidden group-hover:block bg-white shadow-lg p-4 rounded-md min-w-[200px]" : "block"}>
38                  {renderNavTree(item.subitems, level + 1)}
39                </​div>
40              )}
41            </​li>
42          );
43        })}
44      </​ul>
45    );
46  };
47
48  return (
49    <nav aria-label="Hauptnavigation">
50      {renderNavTree(items)}
51    </​nav>
52  );
53}

1// Datei: frontend/​src/​app/​layout.tsx
2import type { Metadata } from "next";
3import { getContaoNavigation } from "@/​lib/​api/​contao";
4import MainNavigation from "@/​components/​layout/​MainNavigation";
5import "@/​styles/​globals.css";
6
7export const metadata: Metadata = {
8  tit​le: {
9    template: '%s | Headless Masterclass',
10    default: 'Contao Next.js Headless Masterclass',
11  }
12};
13
14export default async function RootLayout({
15  children,
16}: {
17  children: React.ReactNode;
18}) {
19  // 1. Navigation auf dem Server laden (Profitiert vom Next.js Cache!)
20  const navItems = await getContaoNavigation('main');
21
22  return (
23    <html lang="de">
24      <body className="bg-slate-50 text-slate-900 font-sans antialiased min-h-screen flex flex-col">
25        
26        {/* Globaler Header */}
27        <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
28          <div className="container mx-auto px-4 h-16 flex items-center justify-between">
29            <div className="text-xl font-bold text-brand-primary">LOGO</​div>
30            {/* Wir reichen die Server-Daten an die Client Component weiter */}
31            <MainNavigation items={navItems} />
32          </​div>
33        </​header>
34
35        {/* Hier injiziert Next.js die dynamischen [[...slug]] Pages */}
36        <div className="flex-grow">
37          {children}
38        </​div>
39
40        {/* Globaler Footer */}
41        <footer className="bg-slate-900 text-slate-400 py-8 mt-12">
42          <div className="container mx-auto px-4 text-center">
43            &copy; {new Date().getFullYear()} Contao Headless Masterclass
44          </​div>
45        </​footer>
46        
47      </​body>
48    </​html>
49  );
50}

1// Datei: frontend/​src/​lib/​api/​contao.ts (Ergänzung)
2
3export async function getContaoAllAliases(): Promise<string[]> {
4  if (!API_SECRET) return [];
5
6  try {
7    const res = await fetch(`${API_BASE_URL}/​api/​v1/​routing/​aliases`, {
8      headers: { 'Authorization': `Bearer ${API_SECRET}` }
9    });
10    if (!res.ok) return [];
11    return res.json();
12  } catch (error) {
13    return [];
14  }
15}

1import { notFound } from 'next/​navigation';
2import { getContaoPageBySlug, getContaoAllAliases } from '@/​lib/​api/​contao';
3
4interface PageProps {
5  params: Promise<{ slug?: string[] }>;
6}
7
8// NEU: Diese Funktion wird nur während des Builds (npm run build) ausgeführt!
9export async function generateStaticParams() {
10  const aliases = await getContaoAllAliases();
11  
12  // Next.js erwartet ein Array von Objekten, die den Ordner-Namen ('slug') matchen
13  return aliases.map((alias) => ({
14    // 'index' wird zum leeren Array (Root /), ansonsten splitten wir den String
15    slug: alias === 'index' ? [] : alias.split('/'),
16  }));
17}
18
19export default async function CatchAllPage({ params }: PageProps) {
20  const resolvedParams = await params;
21  const currentSlug = resolvedParams.slug ? resolvedParams.slug.join('/') : 'index';
22
23  const pageData = await getContaoPageBySlug(currentSlug);
24
25  if (!pageData) notFound(); 
26
27  return (
28    <main className="container mx-auto py-12">
29      <h1 className="text-4xl font-bold mb-8">
30        {pageData.routing.tit​le}
31      </​h1>
32      {/* ... Artikel-Rendering ... */}
33    </​main>
34  );
35}