Question 1

Was ist die empfohlene Methode, um Metadata in Next.js App Router zu definieren?

Accepted Answer

Next.js App Router führt das `metadata`-Objekt ein, das aus Layouts und Pages exportiert wird, um Metadata type-safe und optimiert zu definieren. Dieser Ansatz ersetzt die `<Head>`-Komponenten aus Next.js 12 und ermöglicht serverseitiges Rendering von Metadata. Der `metadata`-Export ist statisch und wird zur Build Time analysiert, um eine bessere SEO-Performance zu erzielen.

Question 2

Wie generiert man dynamische Metadata basierend auf Route-Parametern in Next.js?

Accepted Answer

Die `generateMetadata`-Funktion ist asynchron und erhält `params` und `searchParams` als Argumente, wodurch Daten geladen werden können, um Metadata dynamisch aufzubauen. Sie wird serverseitig zur Renderzeit ausgeführt und kann API-Aufrufe durchführen. Dies ermöglicht die Erstellung einzigartiger Metadata für jede dynamische Seite, was für die SEO von Detailseiten essenziell ist.

Question 3

Wie handhabt Next.js das Zusammenführen von Metadata zwischen verschachtelten Layouts und Pages?

Accepted Answer

Next.js führt Metadata von übergeordneten Layouts automatisch mit untergeordneten Pages zusammen, wobei die Werte, die der Page am nächsten sind, Vorrang haben. Felder werden überschrieben (title, description), außer `openGraph.images` und `twitter.images`, die als Arrays zusammengeführt werden. Diese Kaskade ermöglicht es, Standard-Metadata auf Root-Ebene zu definieren und auf Page-Ebene zu überschreiben.

Next.js Metadata & SEO

Was ist die empfohlene Methode, um Metadata in Next.js App Router zu definieren?

Antwort

Wie generiert man dynamische Metadata basierend auf Route-Parametern in Next.js?

Antwort

Wie handhabt Next.js das Zusammenführen von Metadata zwischen verschachtelten Layouts und Pages?

Antwort

Was ist der Vorteil der Verwendung von `title.template` in Next.js Metadata?

Was ist die empfohlene Methode, um Favicons in Next.js App Router zu definieren?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

TypeScript mit React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview