Die 10 wichtigsten Next.js Interviewfragen, die Sie 2026 kennen mussen

Next.js hat sich zum bevorzugten React-Framework fur Produktionsanwendungen entwickelt. Ob Sie sich auf eine Frontend- oder Full-Stack-Position vorbereiten, diese Fragen decken die Konzepte ab, nach denen Interviewer konsequent fragen.

1. Was ist Next.js und warum wurde man es anstelle von reinem React verwenden?

Next.js ist ein React-Framework, das Struktur und integrierte Funktionen fur die Erstellung produktionsreifer Anwendungen bietet. Wahrend React eine UI-Bibliothek ist, die eine manuelle Einrichtung fur Routing, Rendering-Strategien und Optimierung erfordert, handhabt Next.js diese Belange standardmassig.

Hauptvorteile gegenuber reinem React:

• Dateibasiertes Routing ohne zusatzliche Bibliotheken
• Serverseitiges Rendering (SSR) und statische Seitengenerierung (SSG) integriert
• Automatisches Code-Splitting pro Seite
• API-Routen fur Backend-Funktionalitat
• Integrierte Bild- und Schriftoptimierung

Verwenden Sie Next.js, wenn Sie SEO, schnelle initiale Seitenladungen benotigen oder den Konfigurationsaufwand reduzieren mochten.

2. Erklaren Sie den Unterschied zwischen SSR, SSG und CSR

Dies sind die drei primaren Rendering-Strategien in Next.js:

Serverseitiges Rendering (SSR): HTML wird auf dem Server fur jede Anfrage generiert. Die Seite ist immer aktuell, aber langsamer, da der Server bei jedem Besuch arbeitet. Verwenden Sie getServerSideProps fur diesen Ansatz.

Statische Seitengenerierung (SSG): HTML wird einmal zur Build-Zeit generiert und fur jede Anfrage wiederverwendet. Dies ist die schnellste Option, aber der Inhalt ist bis zum nachsten Build statisch. Verwenden Sie getStaticProps fur diesen Ansatz.

Clientseitiges Rendering (CSR): Der Browser empfangt eine minimale HTML-Hulle und JavaScript rendert den Inhalt. Dies fuhrt zu langsameren initialen Ladezeiten, funktioniert aber gut fur authentifizierte Dashboards, bei denen SEO keine Rolle spielt.

// SSR - lauft bei jeder Anfrage
export async function getServerSideProps() {
  const data = await fetchLiveData()
  return { props: { data } }
}

// SSG - lauft einmal zur Build-Zeit
export async function getStaticProps() {
  const data = await fetchStaticData()
  return { props: { data } }
}

3. Was ist Inkrementelle Statische Regenerierung (ISR)?

ISR kombiniert die Leistungsvorteile der statischen Generierung mit der Aktualitat des serverseitigen Renderings. Seiten werden zur Deploy-Zeit vorgebaut, aber Next.js regeneriert sie im Hintergrund nach einem festgelegten Intervall.

export async function getStaticProps() {
  const products = await fetchProducts()
  return {
    props: { products },
    revalidate: 60 // Seite alle 60 Sekunden regenerieren
  }
}

Wenn ein Benutzer eine Seite nach ihrem Revalidierungsfenster besucht, erhalt er sofort die gecachte Version, wahrend Next.js die Seite im Hintergrund neu erstellt. Der nachste Besucher erhalt die aktualisierte Version.

ISR ist ideal fur E-Commerce-Produktseiten, Blog-Beitrage oder jeden Inhalt, der sich periodisch andert, aber keine Echtzeit-Genauigkeit benotigt.

4. Wie funktioniert dateibasiertes Routing in Next.js?

Next.js erstellt automatisch Routen basierend auf der Dateistruktur in Ihrem pages-Verzeichnis (Pages Router) oder app-Verzeichnis (App Router).

pages/
  index.js          → /
  about.js          → /about
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug (dynamisch)
  api/
    users.js        → /api/users

Dynamische Routen verwenden eckige Klammern. Der Dateiname [slug].js entspricht jedem Wert und macht ihn uber den Router verfugbar:

import { useRouter } from "next/router"

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query
  // slug enthalt das dynamische Segment
}

Fur die statische Generierung dynamischer Routen mussen Sie auch getStaticPaths implementieren, um Next.js mitzuteilen, welche Pfade vorgerendert werden sollen.

5. Was ist der Zweck von getStaticPaths?

getStaticPaths teilt Next.js mit, welche dynamischen Routen zur Build-Zeit vorgerendert werden sollen. Ohne dies weiss Next.js nicht, welche Werte das dynamische Segment haben kann.

// pages/posts/[id].js
export async function getStaticPaths() {
  const posts = await getAllPosts()
  
  return {
    paths: posts.map(post => ({
      params: { id: post.id.toString() }
    })),
    fallback: "blocking" // oder false oder true
  }
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.id)
  return { props: { post } }
}

Fallback-Optionen:

• false - Unbekannte Pfade geben 404 zuruck
• true - Unbekannte Pfade zeigen einen Ladezustand wahrend der Generierung
• "blocking" - Unbekannte Pfade warten auf die Generierung bevor sie antworten (empfohlen)

6. Wie funktionieren API-Routen?

Dateien innerhalb von pages/api/ werden zu serverlosen API-Endpunkten. Jede Datei exportiert eine Handler-Funktion, die Request- und Response-Objekte ahnlich wie Express empfangt.

// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === "GET") {
    const users = await db.users.findMany()
    res.status(200).json(users)
  } else if (req.method === "POST") {
    const user = await db.users.create(req.body)
    res.status(201).json(user)
  } else {
    res.setHeader("Allow", ["GET", "POST"])
    res.status(405).end()
  }
}

API-Routen laufen nur serverseitig und werden als serverlose Funktionen auf Plattformen wie Vercel bereitgestellt. Sie sind nutzlich fur Formularverarbeitung, Datenbankoperationen und die Integration mit Drittanbieter-APIs ohne Anmeldedaten preiszugeben.

7. Erklaren Sie die Next.js Image-Komponente

Die next/image-Komponente ersetzt das Standard-<img>-Tag mit automatischer Optimierung:

import Image from "next/image"

export default function Avatar() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profilfoto"
      width={200}
      height={200}
      priority // Sofort laden fur Above-the-fold-Bilder
    />
  )
}

Automatische Optimierungen umfassen:

• Responsive Grossenanpassung basierend auf dem Gerat
• Konvertierung in moderne Formate (WebP, AVIF)
• Lazy Loading standardmassig
• Unterstutzung fur Blur-Platzhalter
• Verhinderung von Cumulative Layout Shift

Geben Sie immer width und height an, um Layout-Verschiebungen zu verhindern, oder verwenden Sie fill fur responsive Container.

8. Was ist Middleware in Next.js?

Middleware lauft bevor eine Anfrage abgeschlossen wird und ermoglicht es, Antworten zu modifizieren, Benutzer umzuleiten oder Header hinzuzufugen. Sie wird am Edge ausgefuhrt, was sie schnell fur Authentifizierungsprufungen und A/B-Tests macht.

// middleware.js (Projektwurzel)
import { NextResponse } from "next/server"

export function middleware(request) {
  const token = request.cookies.get("auth-token")
  
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url))
  }
  
  return NextResponse.next()
}

export const config = {
  matcher: ["/dashboard/:path*"]
}

Haufige Anwendungsfalle umfassen Authentifizierung, geolokationsbasierte Weiterleitungen, Bot-Erkennung und Anforderungsprotokollierung.

9. Wie handhaben Sie Umgebungsvariablen?

Next.js unterstutzt Umgebungsvariablen uber .env-Dateien mit einem wichtigen Unterschied zwischen serverseitigem und clientseitigem Zugriff.

# .env.local
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com

Nur serverseitig: Variablen ohne Prafix sind nur in getServerSideProps, getStaticProps und API-Routen verfugbar. Dies schutzt sensible Daten wie Datenbank-Anmeldedaten.

Clientseitig zuganglich: Variablen mit dem Prafix NEXT_PUBLIC_ werden in das JavaScript gebundelt und sind im Browser verfugbar. Verwenden Sie dies nur fur nicht-sensible Konfiguration.

// Nur serverseitig
export async function getServerSideProps() {
  // process.env.DATABASE_URL ist hier verfugbar
}

// Clientseitig zuganglich
const apiUrl = process.env.NEXT_PUBLIC_API_URL

10. Was sind die Unterschiede zwischen Pages Router und App Router?

Next.js 13 fuhrte den App Router als neues Paradigma neben dem traditionellen Pages Router ein.

Pages Router (pages/-Verzeichnis):

• Dateibasiertes Routing mit getStaticProps, getServerSideProps
• Verwendet _app.js fur globale Layouts
• Client-Komponenten standardmassig
• Stabil und umfassend dokumentiert

App Router (app/-Verzeichnis):

• React Server Components standardmassig
• Verschachtelte Layouts mit layout.js-Dateien
• Vereinfachter Datenabruf mit async-Komponenten
• Integrierte Lade- und Fehlerzustande
• Streaming- und Suspense-Unterstutzung

// App Router - Datenabruf ist einfacher
async function BlogPage() {
  const posts = await fetchPosts() // Direktes async in der Komponente
  return <PostList posts={posts} />
}

Fur neue Projekte wird der App Router empfohlen. Fur bestehende Projekte kann die Migration schrittweise erfolgen, da beide Router gleichzeitig funktionieren.

Bonus: Haufige Folgefragen

Interviewer vertiefen oft mit Fragen wie:

• Wie wurden Sie Authentifizierung in Next.js implementieren? (NextAuth.js, Middleware)
• Wie optimieren Sie Core Web Vitals? (Image-Komponente, Schriftoptimierung, Code-Splitting)
• Was ist der Unterschied zwischen next/link und einem regularen <a>-Tag? (Clientseitige Navigation vs. vollstandiges Neuladen)
• Wie handhaben Sie globalen State? (Context API, Zustand, Redux mit Provider im Layout)

Uben Sie, diese Konzepte laut zu erklaren. Interviewer schatzen klare Kommunikation genauso wie technische Genauigkeit.