Question 1

Qu'est-ce que l'App Router dans Next.js ?

Accepted Answer

L'App Router est le nouveau système de routing de Next.js 13+ basé sur le dossier app/. Il remplace le Pages Router et introduit les Server Components par défaut, les layouts partagés, et un modèle de routing plus flexible avec des conventions de fichiers comme page.tsx, layout.tsx et loading.tsx.

Question 2

Comment créer une route /about dans l'App Router ?

Accepted Answer

Dans l'App Router, chaque dossier représente un segment de route. Pour créer /about, il faut créer app/about/page.tsx. Le fichier page.tsx est obligatoire pour rendre une route accessible publiquement. Sans ce fichier, le dossier ne sera qu'un segment de chemin sans page affichée.

Question 3

Quel est le comportement par défaut des composants dans l'App Router ?

Accepted Answer

Dans l'App Router, tous les composants sont des Server Components par défaut. Ils s'exécutent uniquement sur le serveur et n'envoient aucun JavaScript au client, ce qui améliore les performances. Pour utiliser des fonctionnalités client (hooks, événements), il faut ajouter la directive 'use client' en haut du fichier.

Fondamentaux Next.js

Qu'est-ce que l'App Router dans Next.js ?

Réponse

Comment créer une route /about dans l'App Router ?

Réponse

Quel est le comportement par défaut des composants dans l'App Router ?

Réponse

Comment créer une route dynamique /posts/[id] dans l'App Router ?

À quoi sert le fichier layout.tsx dans l'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

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation 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