Kapitel 2: Frontend & Entwicklungsumgebung

📖 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Welche Vorkenntnisse Sie benötigen (React, ES6+, Node.js)
• ✅ Wie Sie VS Code und essenzielle Erweiterungen installieren
• ✅ Wie Sie Node.js und Paketmanager (npm/pnpm/yarn) konfigurieren
• ✅ Wie Sie Browser-Entwicklungstools verwenden
• ✅ Wie Sie Ihr erstes Next.js Programm in einem Online-Playground ausführen

---

2.1 Vorkenntnisse (Auffrischung)

🎯 Benötigte Grundlagen

Bevor Sie mit Next.js beginnen, sollten Sie mit folgenden Themen vertraut sein:

Thema	Warum wichtig?	Lernaufwand (Anfänger)
React Grundlagen	Next.js basiert auf React	2-4 Wochen
ES6+ Syntax	Moderne JavaScript-Features	1 Woche
Node.js Grundlagen	Next.js läuft auf Node.js	1 Woche
HTML/CSS	Web-Grundlagen	Bereits bekannt

📚 React Grundlagen (Auffrischung)

Komponenten:

// Funktionskomponente (React 16.8+)
function Welcome({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

// Verwendung
<Welcome name="Max" />

Hooks (useState, useEffect):

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('Count geändert:', count);
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Klicks: {count}
    </button>
  );
}

⚡ ES6+ Wichtige Konzepte

Arrow Functions:

// Alt
function add(a, b) {
  return a + b;
}

// Neu (Arrow Function)
const add = (a, b) => a + b;

Destructuring:

const user = { name: 'Max', age: 25 };

// Alt
const name = user.name;
const age = user.age;

// Neu (Destructuring)
const { name, age } = user;

Spread Operator:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

🛠️ Node.js Grundlagen

package.json:

{
  "name": "mein-projekt",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

Module (import/export):

// math.js
export const add = (a, b) => a + b;
export default function subtract(a, b) { return a - b; }

// main.js
import subtract, { add } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

---

2.2 Entwicklungsumgebung einrichten

📝 VS Code Installation

1. Download: https://code.visualstudio.com/
2. Installation: Folgen Sie dem Installations-Assistenten
3. Sprache: Deutsch einstellen (Strg+Umschalt+P → "Configure Display Language")

🔌 Empfohlene VS Code Erweiterungen

Erweiterung	Zweck	Pflicht?
ESLint	Code-Qualität prüfen	✅ Ja
Prettier	Code automatisch formatieren	✅ Ja
Next.js Snippets	Code-Snippets für Next.js	✅ Ja
Tailwind CSS IntelliSense	Tailwind-Autovervollständigung	⭐ Empfohlen
TypeScript Vue Plugin	TypeScript-Support	⭐ Empfohlen
GitLens	Git-Integration	⭐ Empfohlen
Prettier	Code-Formatierung	✅ Ja

⚙️ VS Code Konfiguration (settings.json)

{
  // Prettier als Standard-Formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  
  // ESLint automatisch fixen
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // Tailwind CSS
  "tailwindCSS.experimental.classRegex": [
    ["tw`([^`]*)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  
  // Auto-Import
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true
}

---

2.3 Node.js & Paketmanager konfigurieren

🟢 Node.js Installation

Version prüfen:

node --version  # Sollte v18.17.0 oder höher sein
npm --version   # Sollte v9.0.0 oder höher sein

Installation:

• Offizielle Webseite: https://nodejs.org/
• Empfohlene Version: Node.js 18.x (LTS) oder 20.x

Installation prüfen:

node --version
npm --version

📦 Paketmanager Vergleich

Paketmanager	Befehl	Geschwindigkeit	Empfehlung
npm	npm install	Normal	Standard
pnpm	pnpm install	Schnell	✅ Empfohlen für Next.js
yarn	yarn install	Schnell	Alternative

🚀 pnpm installieren (Empfohlen)

# pnpm global installieren
npm install -g pnpm

# Version prüfen
pnpm --version

Vorteile von pnpm:

• ✅ Schnellere Installation
• ✅ Weniger Speicherplatz (Symlinks)
• ✅ Strengere Abhängigkeitsverwaltung

---

2.4 Browser-Entwicklungstools

🔍 React Developer Tools

Installation (Chrome):

1. Chrome Web Store öffnen
2. "React Developer Tools" suchen
3. "Zur Chrome-Umgebung hinzufügen" klicken

Verwendung:

• Components Tab: React-Komponenten-Baum anzeigen
• Profiler Tab: Performance analysieren

🛠️ Next.js Debugging-Tipps

Console-Logs:

// app/page.js
export default function Home() {
  console.log('Rendering Home Page'); // Server-Side Log
  return <h1>Willkommen</h1>;
}

Browser DevTools:

• Netzwerk-Tab: API-Anfragen überwachen
• Quellcode-Tab: Breakpoints setzen
• Konsole: Fehler und Warnungen anzeigen

---

2.5 Erstes Next.js Programm (Online Playground)

🎮 Online Playgrounds (Keine lokale Installation nötig!)

Playground	Webseite	Vorteile
StackBlitz	stackblitz.com	Vollständige IDE im Browser
CodeSandbox	codesandbox.io	Einfach zu teilen
Next.js Playground	nextjs.org/playground	Offiziell von Next.js

🚀 Schnellstart mit StackBlitz

Schritte:

1. Gehen Sie zu stackblitz.com
2. Wählen Sie "Next.js" als Vorlage
3. Warten Sie, bis das Projekt geladen ist (ca. 30 Sekunden)
4. Bearbeiten Sie app/page.js

**Beispiel:

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>🎉 Mein erstes Next.js Projekt!</h1>
      <p>Erstellt im Online-Playground</p>
    </main>
  );
}

📝 Übung: "Hallo Next.js"

Aufgabe:

1. Öffnen Sie stackblitz.com
2. Erstellen Sie ein neues Next.js Projekt
3. Ändern Sie app/page.js zu:

export default function Home() {
  const name = "Welt";
  
  return (
    <div style={{ padding: '20px' }}>
      <h1>Hallo {name}!</h1>
      <p>Willkommen bei Next.js {14}</p>
      <button onClick={() => alert('Geklickt!')}>
        Klick mich
      </button>
    </div>
  );
}

4. Sehen Sie das Ergebnis in der Vorschau

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Vorkenntnisse	React, ES6+, Node.js Grundlagen auffrischen
VS Code	Installation + Erweiterungen (ESLint, Prettier, Next.js Snippets)
Node.js	Version 18+ installieren, pnpm als Paketmanager empfohlen
Browser-Tools	React Developer Tools installieren
Online Playground	Erstes Next.js Programm ohne Installation testen

✅ Nächste Schritte

1. ✅ Übung: React-Grundlagen auffrischen (falls nötig)
2. ✅ Installation: Node.js 18+ und pnpm installieren
3. ✅ VS Code: Erweiterungen installieren und konfigurieren
4. ✅ Weiter geht's: Kapitel 3 - Next.js Projekt erstellen

---

🎯 Selbsttest

Frage 1: Welche Node.js Version wird für Next.js 14 mindestens benötigt?

Antwort anzeigen

Node.js Version 18.17.0 oder höher.

Frage 2: Welcher Paketmanager wird für Next.js empfohlen?

Antwort anzeigen

pnpm (schneller, effizienter).

Frage 3: Wo können Sie Next.js online testen, ohne etwas zu installieren?

Antwort anzeigen

StackBlitz, CodeSandbox oder der offizielle Next.js Playground.

---

🚀 Weiter zu Kapitel 3: Next.js Projekt erstellen