Kapitel 15: Häufige Fehler & Interviewfragen

📖 Lernziele

In diesem Kapitel lernen Sie:

✅ Häufige Anfängerfehler vermeiden
✅ Typische Fehlermeldungen verstehen und lösen
✅ Next.js Kernkonzepte für Interviews beherrschen
✅ Praxisnahe Interviewfragen beantworten
✅ Interview-Tipps für Next.js Entwickler

15.1 Häufige Anfängerfehler

❌ Fehler 1: `'use client'` Directive vergessen

Problem:

jsx

// ❌ Falsch (Fehlermeldung: Hooks can only be used in Client Components)
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0); // Fehler!
}

Lösung:

jsx

// ✅ Richtig
'use client'; // ⚠️ WICHTIG: Muss ganz oben stehen!

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0); // Funktioniert!
}

❌ Fehler 2: Falsche Verzeichnisstruktur (App Router)

Problem:

app/
├── home/
│   └── page.js     → /home (Nicht /)
└── about/
    └── page.js   → /about

Lösung (Startseite):

app/
├── page.js           → / (Startseite!)
└── about/
    └── page.js   → /about

❌ Fehler 3: Daten direkt in Client Component abfragen (ohne useEffect)

Problem:

jsx

'use client';

export default function Posts() {
  // ❌ Falsch: Direkter await in Client Component (funktioniert nicht!)
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
}

Lösung (Server Component verwenden):

jsx

// ✅ Richtig: Server Component (Standard)
export default async function Posts() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Oder mit useEffect (Client Component):

jsx

'use client';

import { useState, useEffect } from 'react';

export default function Posts() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    async function loadPosts() {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
    }
    loadPosts();
  }, []);
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

❌ Fehler 4: `className` statt `class` verwenden

Problem:

jsx

// ❌ Falsch
<div class="container">Hallo</div>

Lösung:

jsx

// ✅ Richtig
<div className="container">Hallo</div>

❌ Fehler 5: Lokale Bilder falsch importieren

Problem:

jsx

// ❌ Falsch
<img src="/images/logo.png" alt="Logo" />

Lösung (mit next/image):

jsx

// ✅ Richtig
import Image from 'next/image';
import logo from '@/public/logo.png';

export default function Header() {
  return (
    <Image 
      src={logo} 
      alt="Logo" 
      width={100} 
      height={50} 
    />
  );
}

15.2 Typische Fehlermeldungen

⚠️ Fehler 1: `Hydration failed`

Fehlermeldung:

Error: Hydration failed.

Ursache: Server-HTML stimmt nicht mit Client-HTML überein.

Lösung:

jsx

'use client';

import { useEffect, useState } from 'react';

export default function ClientOnlyComponent() {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  if (!isClient) return null; // ⚠️ Verhindert Hydration-Fehler
  
  return <div>Nur auf Client sichtbar</div>;
}

⚠️ Fehler 2: `Module not found`

Fehlermeldung:

Error: Cannot find module '@/components/Button'

Ursache: Falscher Import-Pfad oder fehlende jsconfig.json Konfiguration.

Lösung (jsconfig.json):

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

⚠️ Fehler 3: `404 Page not found`

Fehlermeldung:

404 - This page could not be found.

Ursache: Keine page.js Datei im entsprechenden Verzeichnis.

Lösung:

app/
└── blog/
    └── page.js   ← Diese Datei muss existieren!

15.3 Next.js Kernkonzepte für Interviews

🎯 Frage 1: Was ist der Unterschied zwischen App Router und Pages Router?

Antwort:

App Router: Neuer Ansatz (Next.js 13+), verwendet app/-Verzeichnis, unterstützt Server Components.
Pages Router: Älterer Ansatz, verwendet pages/-Verzeichnis.

Beispiel:

App Router:    app/about/page.js        → /about
Pages Router:  pages/about.js            → /about

🎯 Frage 2: Was sind Server Components und warum sind sie nützlich?

Antwort:

Server Components werden auf dem Server gerendert.
Vorteile: Kleinere Bundle-Größe, direkter Datenbankzugriff, bessere SEO.

Beispiel:

jsx

// Server Component (Standard)
export default async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

🎯 Frage 3: Was ist der Unterschied zwischen SSG, SSR und ISR?

Modus	Bedeutung	Verwendung
SSG (Static Site Generation)	HTML wird zur Build-Zeit generiert	Blog, Dokumentation
SSR (Server-Side Rendering)	HTML wird bei jeder Anfrage generiert	E-Commerce, Suche
ISR (Incremental Static Regeneration)	SSG + automatische Aktualisierung	Blog mit regelmäßigen Updates

Beispiel (ISR):

jsx

export default async function Page() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // Alle 60 Sekunden aktualisieren
  });
  const posts = await res.json();
  return <PostList posts={posts} />;
}

🎯 Frage 4: Wie funktioniert Datenabfrage in Next.js?

Antwort:

Server Components: Direkt mit async/await und fetch().
Client Components: Mit useEffect oder Bibliotheken wie SWR/React Query.

Beispiel (Server Component):

jsx

export default async function Page() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <PostList posts={posts} />;
}

Beispiel (Client Component mit SWR):

jsx

'use client';

import useSWR from 'swr';

export default function Page() {
  const { data, error, isLoading } = useSWR('https://api.example.com/posts', url => fetch(url).then(r => r.json()));
  
  if (isLoading) return <p>Lädt...</p>;
  if (error) return <p>Fehler</p>;
  
  return <PostList posts={data} />;
}

15.4 Praxisnahe Interviewfragen

🎯 Frage 1: Erklären Sie das Routing-System von Next.js 14.

Antwort: Next.js 14 verwendet App Router (dateisystem-basiert). Jede page.js Datei erstellt eine Route.

Beispiel:

app/
├── page.js         → /
├── about/page.js   → /about
└── blog/
    └── [slug]/
        └── page.js → /blog/[slug]

🎯 Frage 2: Wie verwalten Sie den State in einer Next.js Anwendung?

Antwort:

Lokaler State: useState, useReducer
Globaler State: Context API, Zustand, Redux Toolkit
Server-State: SWR oder React Query

Beispiel (Zustand):

javascript

// store/useStore.js
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

export default useStore;

🎯 Frage 3: Wie optimieren Sie die Performance einer Next.js Anwendung?

Antwort:

✅ Bildoptimierung: next/image verwenden
✅ Code-Splitting: Automatisch durch Next.js
✅ ISG/SSR: Richtigen Rendering-Modus wählen
✅ Lazy Loading: next/dynamic verwenden

Beispiel (Lazy Loading):

jsx

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('@/components/HeavyComponent'), {
  loading: () => <p>Lädt...</p>,
});

export default function Page() {
  return (
    <div>
      <DynamicComponent />
    </div>
  );
}

15.5 Interview-Tipps für Next.js Entwickler

🎯 Tipp 1: Verstehen Sie die Architektur

✅ App Router vs Pages Router
✅ Server Components vs Client Components
✅ Rendering-Modi (SSG, SSR, ISR)

🎯 Tipp 2: Praktische Erfahrung

✅ Erstellen Sie ein Portfolio-Projekt (Blog, E-Commerce)
✅ Verwenden Sie echte APIs (z.B. JSONPlaceholder)
✅ Deployen Sie auf Vercel

🎯 Tipp 3: Wichtige Bibliotheken kennen

Bibliothek	Zweck
SWR	Datenabfrage (Caching, Revalidierung)
Zustand	State Management (einfach)
Tailwind CSS	Styling (schnell)
TypeScript	Typensicherheit

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Häufige Fehler	`use client` Directive, falsche Verzeichnisstruktur, Hydration-Fehler
Fehlermeldungen	`Hydration failed`, `Module not found`, `404`
Interviewfragen	App Router vs Pages Router, Server Components, SSG/SSR/ISR
Tipps	Architektur verstehen, praktische Erfahrung sammeln

✅ Nächste Schritte

✅ Übung: Beheben Sie absichtlich Fehler in einem Next.js-Projekt
✅ Übung: Beantworten Sie die Interviewfragen laut
✅ Weiter geht's: Kapitel 16 - Erweiterte Lernrichtungen

🎯 Selbsttest

Frage 1: Was macht die 'use client' Directive?

Antwort anzeigen

Sie macht eine Komponente zur Client Component (ermöglicht Hooks wie `useState`).

Frage 2: Was ist der Unterschied zwischen SSG und SSR?

Antwort anzeigen

SSG generiert HTML zur Build-Zeit (schneller), SSR generiert HTML bei jeder Anfrage (immer aktuell).

Frage 3: Wie vermeidet man Hydration-Fehler?

Antwort anzeigen

Durch `useEffect` für client-seitige Inhalte oder `next/dynamic` für Lazy Loading.

🚀 Weiter zu Kapitel 16: Erweiterte Lernrichtungen

Kapitel 15: Häufige Fehler & Interviewfragen ​

📖 Lernziele ​

15.1 Häufige Anfängerfehler ​

❌ Fehler 1: 'use client' Directive vergessen ​

❌ Fehler 2: Falsche Verzeichnisstruktur (App Router) ​

❌ Fehler 3: Daten direkt in Client Component abfragen (ohne useEffect) ​

❌ Fehler 4: className statt class verwenden ​

❌ Fehler 5: Lokale Bilder falsch importieren ​

15.2 Typische Fehlermeldungen ​

⚠️ Fehler 1: Hydration failed ​

⚠️ Fehler 2: Module not found ​

⚠️ Fehler 3: 404 Page not found ​

15.3 Next.js Kernkonzepte für Interviews ​

🎯 Frage 1: Was ist der Unterschied zwischen App Router und Pages Router? ​

🎯 Frage 2: Was sind Server Components und warum sind sie nützlich? ​

🎯 Frage 3: Was ist der Unterschied zwischen SSG, SSR und ISR? ​

🎯 Frage 4: Wie funktioniert Datenabfrage in Next.js? ​

15.4 Praxisnahe Interviewfragen ​

🎯 Frage 1: Erklären Sie das Routing-System von Next.js 14. ​

🎯 Frage 2: Wie verwalten Sie den State in einer Next.js Anwendung? ​

🎯 Frage 3: Wie optimieren Sie die Performance einer Next.js Anwendung? ​

15.5 Interview-Tipps für Next.js Entwickler ​

🎯 Tipp 1: Verstehen Sie die Architektur ​

🎯 Tipp 2: Praktische Erfahrung ​

🎯 Tipp 3: Wichtige Bibliotheken kennen ​

📝 Zusammenfassung ​

✅ Nächste Schritte ​

🎯 Selbsttest ​

Kapitel 15: Häufige Fehler & Interviewfragen

📖 Lernziele

15.1 Häufige Anfängerfehler

❌ Fehler 1: `'use client'` Directive vergessen

❌ Fehler 2: Falsche Verzeichnisstruktur (App Router)

❌ Fehler 3: Daten direkt in Client Component abfragen (ohne useEffect)

❌ Fehler 4: `className` statt `class` verwenden

❌ Fehler 5: Lokale Bilder falsch importieren

15.2 Typische Fehlermeldungen

⚠️ Fehler 1: `Hydration failed`

⚠️ Fehler 2: `Module not found`

⚠️ Fehler 3: `404 Page not found`

15.3 Next.js Kernkonzepte für Interviews

🎯 Frage 1: Was ist der Unterschied zwischen App Router und Pages Router?

🎯 Frage 2: Was sind Server Components und warum sind sie nützlich?

🎯 Frage 3: Was ist der Unterschied zwischen SSG, SSR und ISR?

🎯 Frage 4: Wie funktioniert Datenabfrage in Next.js?

15.4 Praxisnahe Interviewfragen

🎯 Frage 1: Erklären Sie das Routing-System von Next.js 14.

🎯 Frage 2: Wie verwalten Sie den State in einer Next.js Anwendung?

🎯 Frage 3: Wie optimieren Sie die Performance einer Next.js Anwendung?

15.5 Interview-Tipps für Next.js Entwickler

🎯 Tipp 1: Verstehen Sie die Architektur

🎯 Tipp 2: Praktische Erfahrung

🎯 Tipp 3: Wichtige Bibliotheken kennen

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest