Question 1

Quelle est la méthode recommandée pour définir les métadonnées dans Next.js App Router ?

Accepted Answer

Next.js App Router introduit l'objet `metadata` exporté depuis les layouts et pages pour définir les métadonnées de manière type-safe et optimisée. Cette approche remplace les composants `<Head>` de Next.js 12 et permet un rendu côté serveur des métadonnées. L'export `metadata` est statique et analysé au build time pour une meilleure performance SEO.

Question 2

Comment générer des métadonnées dynamiques basées sur les paramètres de route dans Next.js ?

Accepted Answer

La fonction `generateMetadata` est asynchrone et reçoit `params` et `searchParams` en arguments, permettant de charger des données pour construire les métadonnées dynamiquement. Elle est exécutée côté serveur au moment du rendu et peut effectuer des appels API. Cela permet de créer des métadonnées uniques pour chaque page dynamique, essentielles pour le SEO des pages de détail.

Question 3

Comment Next.js gère-t-il la fusion des métadonnées entre layouts imbriqués et pages ?

Accepted Answer

Next.js fusionne automatiquement les métadonnées des layouts parents vers les pages enfants, avec priorité aux valeurs les plus proches de la page. Les champs sont écrasés (title, description) sauf pour `openGraph.images` et `twitter.images` qui sont fusionnés en tableaux. Cette cascade permet de définir des métadonnées par défaut au niveau racine et de les surcharger au niveau page.

Metadata & SEO Next.js

Quelle est la méthode recommandée pour définir les métadonnées dans Next.js App Router ?

Réponse

Comment générer des métadonnées dynamiques basées sur les paramètres de route dans Next.js ?

Réponse

Comment Next.js gère-t-il la fusion des métadonnées entre layouts imbriqués et pages ?

Réponse

Quel est l'intérêt d'utiliser `title.template` dans les métadonnées Next.js ?

Quelle est la méthode recommandée pour définir les favicons dans Next.js App Router ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Optimisation Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien