Kapitel 1: Next.js Einführung

📖 Lernziele

In diesem Kapitel lernen Sie:

✅ Was Next.js ist und warum es beliebt ist
✅ Die Kernkonzepte von Next.js 14
✅ Den Unterschied zwischen Next.js und anderen Frameworks
✅ Die Vorteile von Next.js gegenüber reinem React
✅ Typische Anwendungsszenarien
✅ Wie Sie Ihren Lernweg planen

1.1 Was ist Next.js?

🎯 Kernkonzept

Next.js ist ein React-Framework, das von Vercel entwickelt wird und produktionsbereite Funktionen bietet.

📝 Definition

Next.js = React + Routing + Rendering-Optimierung + Entwickler-Erfahrung

🔑 Hauptmerkmale

Merkmal	Beschreibung
Framework	Vollständiges Framework, nicht nur eine Bibliothek
Basierend auf React	Verwendet React für die Benutzeroberfläche
Server-Side Rendering	SEO-freundlich, schnelle Ladezeiten
Dateisystem-Routing	Keine manuelle Router-Konfiguration
Optimiert	Automatische Code-Splitting, Bildoptimierung

💡 Warum Next.js?

mermaid

graph LR
    A[React] --> B[Next.js]
    A --> C[Manuell konfigurieren]
    B --> D[SSR/SSG eingebaut]
    B --> E[Routing automatisch]
    B --> F[Optimierung integriert]
    C --> G[Viele Konfigurationen]

🎬 Beispiel: Einfacher Vergleich

Reines React (Create React App):

jsx

// Manuelle Router-Konfiguration
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Next.js (App Router):

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

✅ Keine Konfiguration nötig!

1.2 Next.js 14 Kernfunktionen

🚀 Next.js 14 Hauptneuerungen

Funktion	Beschreibung	Vorteil
App Router	Neues Routing-System	Bessere Organisation
Server Components	Rendering auf dem Server	Bessere Performance
Turbopack	Neuer Bundler	700x schneller als Webpack
Server Actions	Formular-Handling auf dem Server	Weniger Client-Code
Partial Prerendering	Hybrid-Rendering	Schnellere Seiten

📂 App Router (Empfohlen für Next.js 14)

app/
├── layout.js          # Globales Layout
├── page.js            # Startseite (/)
├── about/
│   └── page.js       # /about
├── blog/
│   ├── page.js       # /blog
│   └── [slug]/
│       └── page.js   # /blog/[slug]
└── api/
    └── route.js      # API-Routen

⚡ Server Components vs Client Components

Aspekt	Server Component	Client Component
Rendering	Server	Browser
Interaktivität	Keine	Ja (onClick, useState)
Datenzugriff	Direkt (Datenbank)	Über API
Bundle-Größe	0 KB	Größer

🎯 Turbopack Vorteile

bash

# Next.js 14 mit Turbopack
npm run dev -- --turbo

# Ergebnis:
# ✓ 700x schnellerer Bundler
# ✓ Sofortiges Hot Reloading
# ✓ Bessere Speichernutzung

1.3 Next.js vs React vs Nuxt.js

📊 Framework-Vergleich

Framework	Typ	Routing	Rendering	Sprache
Next.js	React-Framework	Dateisystem	SSR/SSG/ISR	JavaScript/TypeScript
Reines React	Bibliothek	Manuell (React Router)	CSR (Standard)	JavaScript/TypeScript
Nuxt.js	Vue-Framework	Dateisystem	SSR/SSG	JavaScript/TypeScript

🤔 Wann welches Framework?

✅ Next.js wählen, wenn:

✅ Sie ein React-Projekt haben
✅ SEO wichtig ist (Blog, E-Commerce)
✅ Sie Server-Side Rendering benötigen
✅ Sie Performance-Optimierung wollen

✅ Reines React wählen, wenn:

✅ Sie eine einfache SPA (Single Page Application) bauen
✅ SEO nicht kritisch ist (Dashboard, Admin-Panel)
✅ Sie vollständige Kontrolle wollen

✅ Nuxt.js wählen, wenn:

✅ Sie Vue.js bevorzugen
✅ Ähnliche Funktionen wie Next.js benötigen (für Vue)

💡 Entscheidungshilfe

Frage 1: Verwenden Sie React oder Vue?
  → React: Next.js
  → Vue: Nuxt.js

Frage 2: Ist SEO wichtig?
  → Ja: Next.js/Nuxt.js
  → Nein: Reines React/Vue

Frage 3: Benötigen Sie Server-Side Rendering?
  → Ja: Next.js
  → Nein: Create React App

1.4 Next.js Kernvorteile

🏆 Hauptvorteile im Überblick

Vorteil	Beschreibung	Nutzen
Server-Side Rendering (SSR)	HTML wird auf dem Server generiert	Bessere SEO, schnellere Ladezeit
Static Site Generation (SSG)	Seiten werden zur Build-Zeit generiert	Sehr schnell, kostenloses Hosting
Automatisches Routing	Dateisystem-basiert	Keine Router-Konfiguration
API-Routen	Backend-APIs in Next.js	Full-Stack-Entwicklung möglich
Bildoptimierung	Automatische WebP-Konvertierung	Kleinere Bilder, schnellere Seiten
Internationalisierung	Eingebautes i18n-System	Mehrsprachige Seiten einfach

📈 Performance-Vergleich

Ladezeit Vergleich (First Contentful Paint):

Reines React (CSR):
  → 1.5 - 2.5 Sekunden
  → Schlechtere SEO

Next.js (SSR):
  → 0.5 - 1.0 Sekunden
  → Bessere SEO

Next.js (SSG):
  → 0.1 - 0.3 Sekunden
  → Beste Performance

🎯 SEO-Vorteile

Problem bei reinem React:

html

<!-- Quellcode einer React SPA -->
<div id="root"></div>
<script src="bundle.js"></script>
<!-- Suchmaschinen sehen fast nichts! -->

Next.js Lösung (SSR):

html

<!-- Quellcode einer Next.js Seite (SSR) -->
<html>
  <head>
    <title>Meine Next.js Seite</title>
    <meta name="description" content="...">
  </head>
  <body>
    <h1>Vollständiger Inhalt</h1>
    <p>Suchmaschinen können alles lesen!</p>
  </body>
</html>

1.5 Anwendungsszenarien

🌐 Typische Einsatzgebiete

Szenario	Warum Next.js?	Beispiel
Unternehmens-Websites	SEO, Performance	Landing Pages, Portfolios
Blogs	SSG, Markdown-Support	Persönliche Blogs, News-Sites
E-Commerce	SSR, Performance	Online-Shops, Marktplätze
Dashboards	SPA-Modus möglich	Admin-Panels, Analytics
SaaS-Anwendungen	Full-Stack-Fähigkeiten	Web-Apps mit Backend
Marketing-Seiten	Schnelle Ladezeit	Landing Pages, Kampagnen

🎨 Beispiel: E-Commerce mit Next.js

jsx

// app/products/[id]/page.js (Server Component)
async function getProduct(id) {
  const res = await fetch(`https://api.shop.com/products/${id}`);
  return res.json();
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Preis: {product.price} €</p>
      <button>Kaufen</button>
    </div>
  );
}

Vorteile:

✅ SEO-optimiert (Produkte in Suchmaschinen findbar)
✅ Schnelle Ladezeit (bessere Conversion-Rate)
✅ Server-side Datenabfrage (sicherer)

1.6 Lernpfad-Planung

🗺️ Empfohlener Lernweg (für Anfänger)

Woche 1: Grundlagen
  ├─ Tag 1-2: Next.js Einführung (dieses Kapitel)
  ├─ Tag 3-4: React-Grundlagen auffrischen
  └─ Tag 5-7: Entwicklungsumgebung einrichten

Woche 2: Routing & Pages
  ├─ Tag 1-3: App Router verstehen
  ├─ Tag 4-5: Dynamische Routen
  └─ Tag 6-7: Nested Routes & Layouts

Woche 3: Datenabfrage
  ├─ Tag 1-3: Server Components
  ├─ Tag 4-5: Client Components
  └─ Tag 6-7: Datenabfrage (fetch, SWR)

Woche 4: Fortgeschrittene Themen
  ├─ Tag 1-2: API-Routen
  ├─ Tag 3-4: Authentifizierung
  ├─ Tag 5-6: Deployment
  └─ Tag 7: Abschlussprojekt

⚠️ Häufige Anfängerfehler (Vermeidung)

Fehler	Warum?	Lösung
Zu schnell starten	Next.js benötigt React-Grundlagen	Erst React lernen!
App Router ignorieren	Pages Router ist veraltet	App Router lernen (Next.js 14)
Server vs Client verwechseln	'use client' Directive vergessen	Kapitel 6 genau lesen
Zu komplex starten	Mit einfachen Projekten beginnen	Todo-App, Blog

📚 Lernressourcen (Übersicht)

Offizielle Dokumentation:

✅ Next.js Docs (Englisch)
✅ Next.js Deutsch (Nutzen Sie Übersetzer)

YouTube-Tutorials:

✅ Fireship (Kurz & knackig)
✅ Web Dev Simplified (Anfängerfreundlich)
✅ CodeWithAntonio (Praxisprojekte)

Praxisprojekte:

✅ Todo-App (Grundlagen)
✅ Blog (Routing, Markdown)
✅ E-Commerce (Full-Stack)

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Next.js Definition	React-Framework mit eingebautem Routing & Rendering
Next.js 14	App Router, Server Components, Turbopack
Vorteile	SSR, SSG, SEO, Performance, Entwickler-Erfahrung
Einsatzgebiete	Blogs, E-Commerce, Unternehmens-Websites
Lernweg	Schrittweise von Grundlagen zu fortgeschrittenen Themen

✅ Nächste Schritte

✅ Übung: Next.js offizielle Webseite besuchen
✅ Reaktivierung: React-Grundlagen auffrischen
✅ Weiter geht's: Kapitel 2 - Frontend & Entwicklungsumgebung

🎯 Selbsttest

Frage 1: Was ist der Hauptunterschied zwischen Next.js und reinem React?

Antwort anzeigen

Next.js ist ein Framework mit eingebautem Routing, SSR/SSG, während React eine Bibliothek ist, die manuell konfiguriert werden muss.

Frage 2: Welches Routing-System ist in Next.js 14 empfohlen?

Antwort anzeigen

Der App Router (app/-Verzeichnis) ist in Next.js 14 empfohlen.

Frage 3: Wann sollten Sie Next.js verwenden?

Antwort anzeigen

Wenn SEO wichtig ist, Server-Side Rendering benötigt wird oder eine produktionsbereite React-Anwendung gebaut werden soll.

🚀 Weiter zu Kapitel 2: Frontend & Entwicklungsumgebung

Kapitel 1: Next.js Einführung ​

📖 Lernziele ​

1.1 Was ist Next.js? ​

🎯 Kernkonzept ​

📝 Definition ​

🔑 Hauptmerkmale ​

💡 Warum Next.js? ​

🎬 Beispiel: Einfacher Vergleich ​

1.2 Next.js 14 Kernfunktionen ​

🚀 Next.js 14 Hauptneuerungen ​

📂 App Router (Empfohlen für Next.js 14) ​

⚡ Server Components vs Client Components ​

🎯 Turbopack Vorteile ​

1.3 Next.js vs React vs Nuxt.js ​

📊 Framework-Vergleich ​

🤔 Wann welches Framework? ​

✅ Next.js wählen, wenn: ​

✅ Reines React wählen, wenn: ​

✅ Nuxt.js wählen, wenn: ​

💡 Entscheidungshilfe ​

1.4 Next.js Kernvorteile ​

🏆 Hauptvorteile im Überblick ​

📈 Performance-Vergleich ​

🎯 SEO-Vorteile ​

1.5 Anwendungsszenarien ​

🌐 Typische Einsatzgebiete ​

🎨 Beispiel: E-Commerce mit Next.js ​

1.6 Lernpfad-Planung ​

🗺️ Empfohlener Lernweg (für Anfänger) ​

⚠️ Häufige Anfängerfehler (Vermeidung) ​

📚 Lernressourcen (Übersicht) ​

📝 Zusammenfassung ​

✅ Nächste Schritte ​

🎯 Selbsttest ​

Kapitel 1: Next.js Einführung

📖 Lernziele

1.1 Was ist Next.js?

🎯 Kernkonzept

📝 Definition

🔑 Hauptmerkmale

💡 Warum Next.js?

🎬 Beispiel: Einfacher Vergleich

1.2 Next.js 14 Kernfunktionen

🚀 Next.js 14 Hauptneuerungen

📂 App Router (Empfohlen für Next.js 14)

⚡ Server Components vs Client Components

🎯 Turbopack Vorteile

1.3 Next.js vs React vs Nuxt.js

📊 Framework-Vergleich

🤔 Wann welches Framework?

✅ Next.js wählen, wenn:

✅ Reines React wählen, wenn:

✅ Nuxt.js wählen, wenn:

💡 Entscheidungshilfe

1.4 Next.js Kernvorteile

🏆 Hauptvorteile im Überblick

📈 Performance-Vergleich

🎯 SEO-Vorteile

1.5 Anwendungsszenarien

🌐 Typische Einsatzgebiete

🎨 Beispiel: E-Commerce mit Next.js

1.6 Lernpfad-Planung

🗺️ Empfohlener Lernweg (für Anfänger)

⚠️ Häufige Anfängerfehler (Vermeidung)

📚 Lernressourcen (Übersicht)

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest