Kapitel 3: Next.js Projekt erstellen & Verzeichnisstruktur

📖 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Drei Möglichkeiten kennen, ein Next.js-Projekt zu erstellen
• ✅ Projektabhängigkeiten installieren und Projekt starten
• ✅ Die Verzeichnisstruktur eines Next.js-Projekts verstehen
• ✅ Die wichtigsten Konfigurationsdateien kennen
• ✅ Umgebungsvariablen konfigurieren

---

3.1 Drei Erstellungsmethoden

🎯 Methode 1: create-next-app (Empfohlen)

Befehl:

npx create-next-app@latest mein-nextjs-projekt

Interaktive Abfragen:

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

Empfohlene Antworten (für Anfänger):

• ✅ TypeScript: Yes (typensicherer)
• ✅ ESLint: Yes (Code-Qualität)
• ✅ Tailwind CSS: Yes (einfaches Styling)
• ✅ src/ directory: No (Standard)
• ✅ App Router: Yes (Next.js 14 Standard)
• ✅ Import Alias: No (Standard)

⚡ Methode 2: Offizielle Vorlagen

Blog-Vorlage:

npx create-next-app@latest --template blog-starter

E-Commerce Vorlage:

npx create-next-app@latest --example ecommerce

Admin Dashboard:

npx create-next-app@latest --example admin-dashboard

Beliebte Vorlagen:

Vorlage	Beschreibung	Webseite
blog-starter	Einfacher Blog	Offiziell
ecommerce	Online-Shop	Community
admin-dashboard	Admin-Panel	Community
portfolio	Portfolio-Website	Community

🛠️ Methode 3: Manuell initialisieren

Schritte:

# 1. Verzeichnis erstellen
mkdir mein-nextjs-projekt
cd mein-nextjs-projekt

# 2. package.json erstellen
npm init -y

# 3. Next.js und React installieren
npm install next@latest react@latest react-dom@latest

# 4. package.json scripts hinzufügen
# (siehe unten)

# 5. Erstes Skript erstellen
mkdir app
echo 'export default function Home() { return <h1>Willkommen!</h1> }' > app/page.js

package.json (manuell):

{
  "name": "mein-nextjs-projekt",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

---

3.2 Abhängigkeiten installieren & Projekt starten

📦 Installationsbefehle

Befehl	Beschreibung	Dauer
npm install	Abhängigkeiten installieren (npm)	Normal
pnpm install	Abhängigkeiten installieren (pnpm)	Schnell ✅
yarn install	Abhängigkeiten installieren (yarn)	Schnell

🚀 Projekt starten

Entwicklungsserver starten:

npm run dev
# oder
pnpm dev

Ergebnis:

▲ Next.js 14.x.x
- Local:        http://localhost:3000
- Environments: .env.local

✓ Starting...
✓ Ready in 2.5s

Andere Befehle:

Befehl	Beschreibung
npm run dev	Entwicklungsserver starten (Hot Reload)
npm run build	Produktions-Build erstellen
npm run start	Produktions-Server starten
npm run lint	ESLint ausführen

🛑 Server stoppen

Strg + C drücken (in der Konsole)

---

3.3 Verzeichnisstruktur im Detail

📂 Standardstruktur (App Router)

mein-nextjs-projekt/
├── app/                        # App Router (Next.js 14 empfohlen)
│   ├── layout.js               # Globales Layout
│   ├── page.js                 # Startseite (/)
│   ├── about/                  # /about Route
│   │   └── page.js
│   ├── blog/                   # /blog Route
│   │   ├── page.js
│   │   └── [slug]/            # Dynamische Route (/blog/[slug])
│   │       └── page.js
│   ├── api/                    # API-Routen
│   │   └── route.js
│   └── globals.css             # Globales CSS
├── components/                 # Wiederverwendbare Komponenten
│   ├── Button.js
│   ├── Header.js
│   └── Footer.js
├── lib/                        # Hilfsfunktionen, API-Client
│   ├── api.js
│   └── utils.js
├── public/                     # Statische Assets
│   ├── images/
│   ├── fonts/
│   └── favicon.ico
├── next.config.js              # Next.js Konfiguration
├── tailwind.config.js          # Tailwind CSS Konfiguration
├── postcss.config.js           # PostCSS Konfiguration
├── package.json                # Projektabhängigkeiten
└── README.md                  # Projektdokumentation

📖 Wichtige Verzeichnisse erklärt

Verzeichnis/Datei	Zweck	Wichtig?
app/	App Router (Seiten, Layouts)	✅ Sehr wichtig
components/	Wiederverwendbare React-Komponenten	✅ Wichtig
lib/	Hilfsfunktionen, API-Wrapper	⭐ Empfohlen
public/	Statische Dateien (Bilder, Fonts)	✅ Wichtig
next.config.js	Next.js Konfiguration	⭐ Fortgeschritten

📂 App Router vs Pages Router

App Router (Next.js 13+):

app/
├── layout.js       # Layout
├── page.js         # Seite (/)
├── about/
│   └── page.js     # /about

Pages Router (Alt):

pages/
├── _app.js         # Globales Layout
├── index.js        # Startseite (/)
├── about.js        # /about

Empfehlung: Verwenden Sie App Router für neue Projekte!

---

3.4 next.config.js Konfiguration

⚙️ Basis-Konfiguration

/** @type {import('next').NextConfig} */
const nextConfig = {
  // React Strict Mode aktivieren
  reactStrictMode: true,
  
  // Bilder-Domains konfigurieren
  images: {
    domains: ['example.com', 'via.placeholder.com'],
  },
  
  // Umgebungsvariablen (nicht für sensible Daten!)
  env: {
    CUSTOM_KEY: 'my-value',
  },
  
  // Webpack-Konfiguration (falls nötig)
  webpack: (config, { isServer }) => {
    // Hier können Sie Webpack anpassen
    return config;
  },
};

module.exports = nextConfig;

🚀 Fortgeschrittene Konfiguration

Rewrites (Proxy):

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*', // Proxy zu Backend
      },
    ];
  },
};

Redirects:

const nextConfig = {
  async redirects() {
    return [
      {
        source: '/alt',
        destination: '/neu',
        permanent: true,
      },
    ];
  },
};

---

3.5 Umgebungsvariablen konfigurieren

🔒 Umgebungsdateien

Datei	Zweck	Git?
.env.local	Lokale Entwicklung (geheim)	❌ Nein
.env.development	Entwicklungsumgebung	✅ Ja
.env.production	Produktionsumgebung	✅ Ja
.env	Standard (alle Umgebungen)	✅ Ja

📝 Beispiel .env.local

# .env.local (Niemals in Git committen!)

# Datenbank
DATABASE_URL=postgresql://user:password@localhost:5432/mydb

# API-Keys
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=geheim_12345

# Auth
NEXTAUTH_SECRET=dein_geheimer_schluessel
NEXTAUTH_URL=http://localhost:3000

🔑 Zugriff auf Umgebungsvariablen

Im Server-Code (Node.js):

// Vollständiger Zugriff (auch auf geheime Variablen)
const secretKey = process.env.SECRET_API_KEY;

Im Client-Code (Browser):

// Nur Variablen mit NEXT_PUBLIC_ Präfix sind zugänglich!
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

⚠️ WICHTIG:

• ✅ NEXT_PUBLIC_ Präfix → Im Browser sichtbar
• ❌ Kein Präfix → Nur auf dem Server sichtbar (sicherer)

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Erstellungsmethoden	create-next-app (einfach), Vorlagen, manuell
Verzeichnisstruktur	app/, components/, lib/, public/
Befehle	npm run dev, npm run build, npm run start
Konfiguration	next.config.js (Rewrites, Redirects, Bilder)
Umbgebungsvariablen	.env.local, .env.development, .env.production

✅ Nächste Schritte

1. ✅ Übung: Erstellen Sie ein neues Next.js-Projekt mit create-next-app
2. ✅ Erkundung: Öffnen Sie das Projekt in VS Code und erkunden Sie die Struktur
3. ✅ Weiter geht's: Kapitel 4 - Routing-System

---

🎯 Selbsttest

Frage 1: Welcher Befehl erstellt ein neues Next.js-Projekt?

Antwort anzeigen

`npx create-next-app@latest projekt-name`

Frage 2: Wo werden Seiten im App Router gespeichert?

Antwort anzeigen

Im `app/`-Verzeichnis, mit `page.js` Dateien.

Frage 3: Wie greift man im Client-Code auf Umgebungsvariablen zu?

Antwort anzeigen

Nur Variablen mit `NEXT_PUBLIC_` Präfix (z.B. `process.env.NEXT_PUBLIC_API_URL`).

---

🚀 Weiter zu Kapitel 4: Routing-System