Next.js hat die React-Entwicklung mit seinen leistungsstarken Funktionen und seinem intuitiven Design revolutioniert. Mit der Veröffentlichung von Next.js 13 rückt der neue App Router in den Mittelpunkt und bietet Entwicklern eine flexiblere und leistungsfähigere Möglichkeit, ihre Anwendungen zu strukturieren. In diesem umfassenden Leitfaden tauchen wir tief in den App Router ein und erkunden seine Funktionen und Best Practices. Um diese Konzepte zu veranschaulichen, verwenden wir ein Beispiel aus der Praxis: ein Anschreiben-Generator-Projekt.

Den App Router verstehen

Der App Router in Next.js 13 stellt einen Paradigmenwechsel in der Art und Weise dar, wie wir das Routing in React-Anwendungen angehen. Im Gegensatz zum vorherigen Pages Router verwendet der App Router einen dateisystembasierten Ansatz, der besser an der Art und Weise ausgerichtet ist, wie wir unsere Anwendungsstruktur mental modellieren.

Hauptvorteile des App Routers:

1. Intuitives dateibasiertes Routing: Routen werden durch die Dateistruktur in Ihrem App-Verzeichnis definiert.
2. Verbesserte Leistung: Integrierte Unterstützung für React Server-Komponenten.
3. Erhöhte Flexibilität: Einfachere Implementierung von Layouts, verschachteltem Routing und mehr.
4. Eingebaute Optimierungen: Automatische Codeaufteilung und Vorabruf.

Erste Schritte mit App Router

Beginnen wir mit der Einrichtung eines neuen Next.js 13-Projekts mit dem App Router. Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

npx create-next-app@latest my-app
cd my-app

Wenn Sie dazu aufgefordert werden, stellen Sie sicher, dass Sie „Ja“ für „Möchten Sie App Router verwenden?“ auswählen.

Grundlegendes Routing mit App Router

Im App Router stellt jeder Ordner ein Routensegment dar. Erstellen wir eine einfache Struktur für unseren Anschreiben-Generator:

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

Hier stellt page.tsx im Stammordner der App die Startseite dar. Die Anschreiben- und Vorlagenordner erstellen Routen für die jeweiligen Seiten.

In app/page.tsx:

export default function Home() {
  return 
Welcome to the Cover Letter Generator
;
}

In app/cover-letter/page.tsx:

export default function CoverLetter() {
  return 
Create Your Cover Letter
;
}

Mit dieser Struktur können Sie zu / für die Startseite und /cover-letter für die Seite zum Erstellen von Anschreiben navigieren.

Layouts und verschachtelte Routen

Eine der leistungsstarken Funktionen des App Routers ist die Möglichkeit, verschachtelte Layouts zu erstellen. Fügen wir ein gemeinsames Layout für unsere Anwendung hinzu.

In app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Dieses Layout wird auf alle Seiten unserer Anwendung angewendet und sorgt für eine einheitliche Navigationsstruktur.

Dynamische Routen

Dynamische Routen sind entscheidend für Anwendungen, die Inhalte basierend auf Parametern generieren. Lassen Sie uns eine dynamische Route zum Anzeigen bestimmter Anschreibenvorlagen implementieren.

Erstellen Sie eine neue Datei: app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return 
Template {params.id}
;
}

Wenn Sie nun zu /templates/1 oder /templates/formal navigieren, wird diese Komponente mit der entsprechenden ID gerendert.

Serverkomponenten und Datenabruf

Next.js 13 führt React Server-Komponenten ein, die es uns ermöglichen, Daten auf dem Server abzurufen. Lassen Sie uns dies in unserem Anschreiben-Generator umsetzen.

In app/cover-letter/page.tsx:

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    

      
Create Your Cover Letter
      

        {templates.map(template => (
          
{template.name}
        ))}
      
    
  );
}

Diese Komponente ruft Daten auf dem Server ab und verbessert so die Leistung und SEO.

Verlinkung und Navigation

Für die clientseitige Navigation verwenden Sie die Link-Komponente von Next.js. Aktualisieren Sie Ihre app/layout.tsx:

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  );
}

Praxisnahe Anwendung: Anschreiben-Generator

Da wir uns nun mit den Grundlagen befasst haben, schauen wir uns an, wie diese Konzepte in einem realen Projekt angewendet werden. Das Resumate-NextJS-Projekt auf GitHub ist ein hervorragendes Beispiel für einen mit Next.js erstellten Anschreiben-Generator.

Wichtige Erkenntnisse aus diesem Projekt:

1. Strukturiertes Routing: Das Projekt verwendet eine klare Routing-Struktur, die Belange zwischen verschiedenen Seiten und Komponenten trennt.

2. Serverseitiges Rendering: Nutzt die SSR-Funktionen von Next.js für verbesserte Leistung und SEO.

3. API-Routen: Implementiert API-Routen für serverseitige Logik und demonstriert, wie mit Formularübermittlungen und Datenverarbeitung umgegangen wird.

4. Styling: Verwendet Tailwind CSS für reaktionsschnelles und klares UI-Design.

5. Statusverwaltung: Implementiert die Kontext-API zur Verwaltung des Anwendungsstatus über Komponenten hinweg.

Fortgeschrittene Konzepte

Wenn Sie mit dem App Router besser vertraut sind, erkunden Sie diese erweiterten Konzepte:

1. Parallele Routen: Rendern Sie mehrere Seiten im gleichen Layout.
2. Abfangen von Routen: Passen Sie das Routing-Verhalten für bestimmte Szenarien an.
3. Routenhandler: Erstellen Sie API-Endpunkte innerhalb der App Router-Struktur.
4. Middleware: Fügen Sie Ihren Routen benutzerdefinierte serverseitige Logik hinzu.

Best Practices und Tipps

1. Nutzung von Serverkomponenten: Verwenden Sie sie zum Abrufen von Daten und für umfangreiche Berechnungen.
2. Bilder optimieren: Verwenden Sie die Next.js-Bildkomponente für die automatische Optimierung.
3. Implementieren Sie eine progressive Verbesserung: Stellen Sie sicher, dass Ihre App ohne JavaScript funktioniert, um die Barrierefreiheit zu verbessern.
4. TypeScript verwenden: Für eine verbesserte Entwicklererfahrung und Codequalität.
5. Regelmäßige Updates: Halten Sie Ihre Next.js-Version auf dem neuesten Stand, um von den neuesten Funktionen und Optimierungen zu profitieren.

Abschluss

Der Next.js 13 App Router stellt einen bedeutenden Fortschritt in der React-Anwendungsentwicklung dar. Durch die Bereitstellung eines intuitiven, dateisystembasierten Routingsystems und die Nutzung der Leistungsfähigkeit von React Server Components ermöglicht es Entwicklern, leistungsstarke, skalierbare und wartbare Webanwendungen zu erstellen.

Wie am Beispiel des Anschreiben-Generators gezeigt, vereinfacht der App Router den Prozess der Erstellung komplexer, dynamischer Webanwendungen. Unabhängig davon, ob Sie eine einfache Portfolio-Site oder eine komplexe Webanwendung erstellen, wird die Beherrschung des App Routers Ihre Next.js-Entwicklungserfahrung erheblich verbessern.

Denken Sie daran: Der beste Weg zu lernen ist, etwas zu tun. Klonen Sie das Resumate-NextJS-Repository, experimentieren Sie mit dem Code und versuchen Sie, Ihre eigenen Funktionen mithilfe des App Routers zu implementieren. Viel Spaß beim Codieren!