Les 10 Questions d Entretien Next.js que Vous Devez Connaitre en 2026

Published: 1/11/2026 · Updated: 1/14/2026

Les 10 Questions d Entretien Next.js que Vous Devez Connaitre en 2026 - Key Takeaways

Next.js est devenu le framework React de reference pour les applications de production. Que vous vous prepariez pour un poste frontend ou full-stack, ces questions couvrent les concepts que les recruteurs demandent systematiquement.

1. Qu est-ce que Next.js et pourquoi l utiliser plutot que React seul?

Next.js est un framework React qui fournit une structure et des fonctionnalites integrees pour construire des applications pretes pour la production. Alors que React est une bibliotheque d interface utilisateur qui necessite une configuration manuelle pour le routage, les strategies de rendu et l optimisation, Next.js gere ces preoccupations nativement.

Avantages cles par rapport a React seul:

Routage base sur les fichiers sans bibliotheques supplementaires
Rendu cote serveur (SSR) et generation de sites statiques (SSG) integres
Division automatique du code par page
Routes API pour la fonctionnalite backend
Optimisation integree des images et des polices

Utilisez Next.js quand vous avez besoin de SEO, de chargements de page initiaux rapides ou que vous voulez reduire la surcharge de configuration.

2. Expliquez la difference entre SSR, SSG et CSR

Ce sont les trois principales strategies de rendu dans Next.js:

Rendu Cote Serveur (SSR): Le HTML est genere sur le serveur pour chaque requete. La page est toujours a jour mais plus lente car le serveur travaille a chaque visite. Utilisez getServerSideProps pour cette approche.

Generation de Sites Statiques (SSG): Le HTML est genere une fois au moment de la compilation et reutilise pour chaque requete. C est l option la plus rapide mais le contenu est statique jusqu a la prochaine compilation. Utilisez getStaticProps pour cette approche.

Rendu Cote Client (CSR): Le navigateur recoit une coquille HTML minimale et JavaScript rend le contenu. Cela resulte en des chargements initiaux plus lents mais fonctionne bien pour les tableaux de bord authentifies ou le SEO n importe pas.

// SSR - s execute a chaque requete
export async function getServerSideProps() {
  const data = await fetchLiveData()
  return { props: { data } }
}

// SSG - s execute une fois au moment de la compilation
export async function getStaticProps() {
  const data = await fetchStaticData()
  return { props: { data } }
}

3. Qu est-ce que la Regeneration Statique Incrementale (ISR)?

L ISR combine les avantages de performance de la generation statique avec la fraicheur du rendu cote serveur. Les pages sont pre-construites au moment du deploiement, mais Next.js les regenere en arriere-plan apres un intervalle specifie.

export async function getStaticProps() {
  const products = await fetchProducts()
  return {
    props: { products },
    revalidate: 60 // Regenerer la page toutes les 60 secondes
  }
}

Quand un utilisateur visite une page apres sa fenetre de revalidation, il recoit immediatement la version en cache tandis que Next.js reconstruit la page en arriere-plan. Le visiteur suivant obtient la version mise a jour.

L ISR est ideal pour les pages de produits e-commerce, les articles de blog ou tout contenu qui change periodiquement mais n a pas besoin de precision en temps reel.

4. Comment fonctionne le routage base sur les fichiers dans Next.js?

Next.js cree automatiquement des routes basees sur la structure de fichiers dans votre repertoire pages (Pages Router) ou app (App Router).

pages/
  index.js          → /
  about.js          → /about
  blog/
    index.js        → /blog
    [slug].js       → /blog/:slug (dynamique)
  api/
    users.js        → /api/users

Les routes dynamiques utilisent des crochets. Le nom de fichier [slug].js correspond a n importe quelle valeur et la rend disponible via le routeur:

import { useRouter } from "next/router"

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query
  // slug contient le segment dynamique
}

Pour la generation statique de routes dynamiques, vous devez egalement implementer getStaticPaths pour indiquer a Next.js quels chemins pre-rendre.

5. Quel est le but de getStaticPaths?

getStaticPaths indique a Next.js quelles routes dynamiques pre-rendre au moment de la compilation. Sans cela, Next.js ne sait pas quelles valeurs le segment dynamique peut avoir.

// pages/posts/[id].js
export async function getStaticPaths() {
  const posts = await getAllPosts()
  
  return {
    paths: posts.map(post => ({
      params: { id: post.id.toString() }
    })),
    fallback: "blocking" // ou false, ou true
  }
}

export async function getStaticProps({ params }) {
  const post = await getPost(params.id)
  return { props: { post } }
}

Options de fallback:

false - Les chemins inconnus retournent 404
true - Les chemins inconnus affichent un etat de chargement pendant la generation
"blocking" - Les chemins inconnus attendent la generation avant de repondre (recommande)

6. Comment fonctionnent les routes API?

Les fichiers a l interieur de pages/api/ deviennent des points de terminaison API serverless. Chaque fichier exporte une fonction handler qui recoit des objets requete et reponse similaires a Express.

// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === "GET") {
    const users = await db.users.findMany()
    res.status(200).json(users)
  } else if (req.method === "POST") {
    const user = await db.users.create(req.body)
    res.status(201).json(user)
  } else {
    res.setHeader("Allow", ["GET", "POST"])
    res.status(405).end()
  }
}

Les routes API s executent uniquement cote serveur et sont deployees comme fonctions serverless sur des plateformes comme Vercel. Elles sont utiles pour le traitement de formulaires, les operations de base de donnees et l integration avec des API tierces sans exposer les identifiants.

7. Expliquez le composant Image de Next.js

Le composant next/image remplace la balise standard <img> avec une optimisation automatique:

import Image from "next/image"

export default function Avatar() {
  return (
    <Image
      src="/profile.jpg"
      alt="Photo de profil"
      width={200}
      height={200}
      priority // Charger immediatement pour les images above-the-fold
    />
  )
}

Les optimisations automatiques incluent:

Dimensionnement responsif base sur l appareil
Conversion vers des formats modernes (WebP, AVIF)
Chargement paresseux par defaut
Support des placeholders avec flou
Prevention du Decalage Cumulatif de Mise en Page

Specifiez toujours width et height pour prevenir le decalage de mise en page, ou utilisez fill pour les conteneurs responsifs.

8. Qu est-ce que le middleware dans Next.js?

Le middleware s execute avant qu une requete ne soit completee, vous permettant de modifier les reponses, rediriger les utilisateurs ou ajouter des en-tetes. Il s execute a la peripherie, le rendant rapide pour les verifications d authentification et les tests A/B.

// middleware.js (racine du projet)
import { NextResponse } from "next/server"

export function middleware(request) {
  const token = request.cookies.get("auth-token")
  
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url))
  }
  
  return NextResponse.next()
}

export const config = {
  matcher: ["/dashboard/:path*"]
}

Les cas d utilisation courants incluent l authentification, les redirections basees sur la geolocalisation, la detection de bots et la journalisation des requetes.

9. Comment gerez-vous les variables d environnement?

Next.js supporte les variables d environnement via les fichiers .env avec une distinction importante entre l acces cote serveur et cote client.

# .env.local
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com

Cote serveur uniquement: Les variables sans prefixe sont uniquement disponibles dans getServerSideProps, getStaticProps et les routes API. Cela protege les donnees sensibles comme les identifiants de base de donnees.

Accessible cote client: Les variables prefixees avec NEXT_PUBLIC_ sont incluses dans le JavaScript et disponibles dans le navigateur. Utilisez cela uniquement pour la configuration non sensible.

// Cote serveur uniquement
export async function getServerSideProps() {
  // process.env.DATABASE_URL est disponible ici
}

// Accessible cote client
const apiUrl = process.env.NEXT_PUBLIC_API_URL

10. Quelles sont les differences entre Pages Router et App Router?

Next.js 13 a introduit l App Router comme nouveau paradigme aux cotes du traditionnel Pages Router.

Pages Router (repertoire pages/):

Routage base sur les fichiers avec getStaticProps, getServerSideProps
Utilise _app.js pour les mises en page globales
Composants client par defaut
Stable et largement documente

App Router (repertoire app/):

React Server Components par defaut
Mises en page imbriquees avec fichiers layout.js
Recuperation de donnees simplifiee avec composants async
Etats de chargement et d erreur integres
Support du Streaming et Suspense

// App Router - la recuperation de donnees est plus simple
async function BlogPage() {
  const posts = await fetchPosts() // Async direct dans le composant
  return <PostList posts={posts} />
}

Pour les nouveaux projets, l App Router est recommande. Pour les projets existants, la migration peut etre faite de maniere incrementale puisque les deux routeurs fonctionnent simultanement.

Bonus: Questions de Suivi Courantes

Les recruteurs approfondissent souvent avec des questions comme:

Comment implementeriez-vous l authentification dans Next.js? (NextAuth.js, middleware)
Comment optimisez-vous les Core Web Vitals? (Composant Image, optimisation des polices, division du code)
Quelle est la difference entre next/link et une balise <a> standard? (Navigation cote client vs rechargement complet)
Comment gerez-vous l etat global? (Context API, Zustand, Redux avec provider dans le layout)

Entrainez-vous a expliquer ces concepts a voix haute. Les recruteurs valorisent une communication claire autant que la precision technique.