Routing & Navigation Next.js
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
1Quelle est la syntaxe pour créer une route dynamique dans Next.js App Router ?
Quelle est la syntaxe pour créer une route dynamique dans Next.js App Router ?
Réponse
Les routes dynamiques dans Next.js App Router utilisent des crochets pour définir des segments d'URL variables. Par exemple, [id] crée une route qui capture n'importe quelle valeur à cette position dans l'URL. Cette valeur est ensuite accessible via les paramètres de la page. Cette convention permet de créer des pages génériques qui s'adaptent aux différents contenus sans créer de fichiers séparés pour chaque variation.
2Quel est le rôle principal du composant Link dans Next.js ?
Quel est le rôle principal du composant Link dans Next.js ?
Réponse
Le composant Link est l'élément de navigation recommandé dans Next.js. Il précharge automatiquement les routes visibles dans le viewport et permet une navigation côté client sans rechargement complet de la page. Contrairement à une balise a classique, Link maintient l'état de l'application et offre des transitions fluides entre les pages, améliorant significativement l'expérience utilisateur et les performances.
3Comment accéder aux paramètres d'une route dynamique dans une Server Component ?
Comment accéder aux paramètres d'une route dynamique dans une Server Component ?
Réponse
Dans Next.js App Router, les Server Components reçoivent automatiquement un objet params contenant les segments dynamiques de l'URL. Cet objet est passé comme prop à la fonction du composant. Par exemple, pour une route [id], params.id contiendra la valeur capturée. Cette approche simplifie l'accès aux paramètres sans avoir besoin de hooks côté client.
Quel est l'avantage principal des route groups dans Next.js ?
Quelle est la différence entre useRouter et usePathname ?
+19 questions d'entretien
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
API Routes Next.js
Metadata & SEO 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
Accède à toutes les questions, flashcards, tests techniques, exercices de code review et simulateurs d'entretien.
Commencer gratuitement