Next-Js
Debutant
Quiz-Nextjs-Debutant
App-Router
Server-Components
Ssr
Ssg
Nextjs-Pages
Nextjs-Layouts
Questions-Entretien-Nextjs
Qcm-Nextjs
Apprendre-Nextjs
React
Front-End
📝
Entretien Next.js Débutant : pages, routing et SSR
20 questions sur les bases de Next.js : App Router, pages, layouts, server components, fetching de données et SSR/SSG. Idéal pour un premier entretien Next.js.
Banque de révision : les 30 questions corrigées
Voici l'intégralité des 30 questions de « Entretien Next.js Débutant : pages, routing et SSR », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.
Explication :
Next.js est un framework React développé par Vercel. Il étend React en ajoutant le rendu côté serveur (SSR), la génération de sites statiques (SSG), le routage basé sur les fichiers, et de nombreuses optimisations automatiques.
Next.js est le framework React le plus populaire en 2024. Il permet de créer des applications web complètes, du frontend au backend.
Explication :
La commande officielle est
npx create-next-app@latest mon-projet. Pendant l'installation, on vous propose de configurer TypeScript, ESLint, Tailwind CSS, le dossier src/ et l'App Router.
Ajoutez
--typescript pour activer TypeScript, --tailwind pour Tailwind CSS, --eslint pour ESLint automatiquement.
Explication :
Dans l'App Router (Next.js 13+), les routes sont définies dans le dossier
app/. Chaque sous-dossier avec un fichier page.js devient une route. Le dossier pages/ est l'ancienne approche (Pages Router). app/page.js correspond à la route /. app/blog/page.js correspond à la route /blog.
Explication :
Le fichier
page.js (ou page.tsx) est un fichier spécial qui exporte par défaut un composant React. Ce composant devient la page accessible à la route correspondante.
Chaque dossier de route doit contenir un
page.js pour être accessible publiquement.
Explication :
Le fichier
layout.js définit un composant qui enveloppe les pages enfants. Il persiste entre les navigations (ne se re-rend pas), ce qui améliore les performances. Le layout racine dans app/layout.js est obligatoire.
Le layout racine doit contenir les balises
<html> et <body>.
Explication :
Dans l'App Router, on crée un dossier
a-propos dans app/ avec un fichier page.js à l'intérieur. Le nom du dossier devient le segment de route.
Le fichier doit exporter par défaut un composant React :
export default function APropos() { return <h1>À propos</h1>; }.
Explication :
Dans l'App Router, tous les composants sont des Server Components par défaut. Ils s'exécutent sur le serveur, peuvent accéder directement aux bases de données, et ne sont jamais envoyés au navigateur (pas de JavaScript client).
Les Server Components ne peuvent pas utiliser
useState, useEffect ou onClick. Pour cela, il faut un Client Component.
Explication :
Le composant
<Link href="/route"> de next/link permet la navigation côté client sans rechargement complet. Il précharge automatiquement les pages pour une navigation plus rapide. <Link href="/blog">Blog</Link>. Pour les liens externes, utilisez une balise <a> classique.
Explication :
Le composant
<Image> de next/image optimise automatiquement les images locales et distantes. Il gère le lazy loading, le redimensionnement, la conversion en formats modernes, et évite le CLS (Cumulative Layout Shift).
Pour les images externes, configurez les domaines autorisés dans
next.config.js avec images.remotePatterns.
Explication :
Le fichier
loading.js est un fichier spécial qui s'affiche automatiquement pendant le chargement du contenu de la page. Il crée un Suspense automatique autour de la page.
Placez
loading.js dans le même dossier que page.js pour un indicateur de chargement spécifique à cette route.
Explication :
Par défaut, les composants sont des Server Components (exécutés sur le serveur, pas de JS client). Pour ajouter de l'interactivité (hooks, événements), on ajoute
"use client" en haut du fichier pour en faire un Client Component.
Un Client Component peut importer des Server Components, mais l'inverse n'est pas possible.
Explication :
Pour transformer un composant en Client Component, on ajoute la directive
"use client" tout en haut du fichier. Cela permet d'utiliser des hooks, des gestionnaires d'événements, et d'autres fonctionnalités interactives.
La directive
"use client" doit être la première ligne du fichier, avant tout import.
Explication :
Dans l'App Router, les Server Components peuvent être asynchrones. On peut utiliser
async/await directement avec fetch() pour récupérer des données et les afficher.
Exemple :
export default async function Page() { const data = await fetch("https://api.example.com"); const json = await data.json(); return <div>{json.title}</div>; }.
Explication :
Les routes dynamiques utilisent des noms de dossiers entre crochets :
app/blog/[slug]/page.js correspond à /blog/mon-article. Le paramètre slug est passé automatiquement au composant via params.
Pour des segments optionnels, utilisez
[[...param]] (catch-all optionnel).
Explication :
Le fichier
not-found.js permet de créer une page 404 personnalisée. Dans l'App Router, il peut être placé dans n'importe quel segment pour une page 404 spécifique à cette section.
Pour déclencher manuellement la page 404 depuis un composant, utilisez la fonction
notFound() importée depuis next/navigation.
Explication :
La commande
npm run dev lance le serveur de développement avec hot reload. Par défaut, l'application est accessible sur http://localhost:3000.
Utilisez
npm run build pour créer la version de production, puis npm start pour la servir.
Explication :
Le fichier
error.js crée une boundary d'erreur (Error Boundary) pour gérer les erreurs dans les pages enfants. Il doit être un Client Component ("use client") et reçoit error et reset comme props. error.js ne capture pas les erreurs dans le layout parent. Pour cela, créez un error.js dans le dossier du layout.
Explication :
Next.js n'a pas de composant intégré pour les liens actifs. On utilise
usePathname() de next/navigation pour obtenir le chemin courant et le comparer avec le href du lien.
Pattern courant :
const pathname = usePathname(); puis className={pathname === "/blog" ? "active" : ""}.
Explication :
next/font/google permet d'importer des polices Google Fonts de manière optimisée. La police est auto-hébergée (pas de requête externe) et optimisée pour éliminer le flash de texte invisible (FOUT).
Exemple :
import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"] });.
Explication :
Les styles globaux s'importent dans le layout racine
app/layout.js : import "./globals.css". Les fichiers CSS importés ailleurs doivent être des modules CSS (fichier.module.css).
Les modules CSS s'importent ainsi :
import styles from "./page.module.css" et s'utilisent avec className={styles.maClasse}.
Explication :
next.config.js est le fichier de configuration où l'on peut personnaliser Next.js : configurer les images externes, les redirections, les rewrites, les variables d'environnement, les en-têtes HTTP, etc.
Exemple de configuration d'images :
module.exports = { images: { remotePatterns: [{ hostname: "example.com" }] } }.
Explication :
Dans Next.js, les variables dans
.env.local sont accessibles via process.env.MA_VARIABLE. Pour qu'une variable soit accessible côté client (navigateur), elle doit être préfixée par NEXT_PUBLIC_.
Ne mettez jamais de secrets (clés API, tokens) dans des variables
NEXT_PUBLIC_. Elles seraient visibles dans le bundle client.
Explication :
Le composant
<Script> de next/script permet de charger des scripts tiers avec différentes stratégies : beforeInteractive, afterInteractive, lazyOnload. Cela optimise le chargement et les performances.
Pour les scripts analytics (Google Analytics, etc.), utilisez la stratégie
lazyOnload pour ne pas bloquer le rendu initial.
Explication :
Dans l'App Router, on crée
app/api/mon-endpoint/route.js qui exporte des fonctions GET, POST, etc. Chaque fonction doit retourner une réponse avec Response.json().
Exemple simple :
export async function GET() { return Response.json({ message: "Hello" }); }.
Explication :
npm run dev lance le serveur de développement avec hot reload pour coder. npm run build compile l'application pour la production (optimisations, minification). Ensuite npm start sert la version de production.
Utilisez
npm run dev pendant le développement, et npm run build && npm start pour tester la version de production localement.
Explication :
On peut soit importer l'image :
import logo from "./logo.png" puis <Image src={logo} />, soit la placer dans public/ et utiliser <Image src="/logo.png" />. L'import direct donne des informations de dimensions automatiquement.
Avec l'import direct, Next.js connaît la largeur et la hauteur, ce qui évite le CLS (Cumulative Layout Shift).
Explication :
Chaque dossier dans
app/ représente un segment de route. Par exemple, app/dashboard/settings/ correspond aux segments dashboard et settings, créant la route /dashboard/settings.
Un segment peut être statique (nom de dossier fixe), dynamique (
[id]), ou catch-all ([...slug]).
Explication :
Dans l'App Router, on exporte un objet
metadata ou une fonction generateMetadata. Exemple : export const metadata = { title: "Ma Page" }. Cela définit automatiquement la balise <title>.
Le metadata peut aussi inclure
description, openGraph, keywords pour un SEO complet.
Explication :
Tailwind CSS est un framework CSS utilitaire (classes comme
flex, text-center, bg-blue-500). Next.js l'intègre nativement et le propose comme option lors de create-next-app.
Lors de
npx create-next-app@latest, répondez "Yes" à "Would you like to use Tailwind CSS?" pour l'activer automatiquement.
Explication :
Le dossier
public/ à la racine du projet contient les fichiers statiques. Tout fichier dans ce dossier est servi à la racine du site : public/image.png est accessible via /image.png.
Placez-y les fichiers comme
robots.txt, favicon.ico, sitemap.xml, et les images statiques non importées. 
Quiz
Junior
20 questions
15 min
Entretien Next.js Junior : data fetching et middleware
Quiz
Débutant
20 questions
15 min
Entretien React Débutant — Composants, Props et State
Quiz
Senior
20 questions
15 min
Entretien Next.js Senior : performance et architecture
Quiz
Débutant
20 questions
15 min
Entretien JavaScript Débutant : variables et syntaxe
Quiz
Débutant
20 questions
15 min
Entretien Angular Débutant — Composants, Pipes et Routing
Quiz
Débutant
20 questions
15 min
HTML Débutant — Balises et structure
Quiz
Senior
20 questions
15 min
Entretien React Senior : performance et testing
Quiz
Junior
20 questions
15 min
Entretien React Junior : Hooks, Context et Router
Quiz
Débutant
20 questions
15 min
Entretien TypeScript Débutant — Types et Interfaces
Quiz
Débutant
20 questions
15 min
Entretien Tailwind CSS Débutant — Utilities et Bases
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Débutant
20 questions
15 min
jQuery Débutant — DOM & Sélecteurs
Quiz
Débutant
20 questions
15 min
Entretien Spring Boot Débutant : annotations et IoC
Quiz
Débutant
20 questions
15 min
Vue Débutant — Composants & Router
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Junior
20 questions
15 min
Entretien jQuery Junior : AJAX, plugins et perf
Quiz
Débutant
20 questions
15 min
Scrum Débutant — Rôles et Artifacts
Quiz
Débutant
20 questions
15 min
Entretien Git Débutant — Commits, Branches et Remote
Quiz
Débutant
20 questions
15 min
Entretien Node.js Débutant — Modules, NPM et Callbacks
Quiz
Junior
20 questions
15 min