Développeur Next.js, les points à vérifier sur le rendu, le cache et le SEO

Pour un entretien de développeur Next.js, partez des versions. L'App Router, stable depuis Next.js 13.4, est le modèle par défaut : les composants sont rendus sur le serveur, sauf ceux marqués 'use client'. Next.js 16, sorti en octobre 2025, a rendu le cache explicite avec la directive 'use cache', fait de Turbopack le bundler par défaut et renommé middleware.ts en proxy.ts. La version courante est la 16.4. Beaucoup d'applications tournent encore sur le Pages Router, avec getServerSideProps et getStaticProps.

La plupart des CV associent React et Next.js. La différence se voit sur la frontière entre serveur et client : un profil qui a surtout fait du React dans le navigateur ajoute 'use client' en haut de chaque fichier et perd le bénéfice du rendu serveur. Les questions sur le cache révèlent aussi l'expérience réelle, car le comportement par défaut a changé entre les versions 14, 15 et 16, et les erreurs se paient en production : données périmées, page personnelle servie à un autre utilisateur.

Faites lire un composant existant et demandez où il s'exécute. Une Server Action sans contrôle d'accès est un autre bon sujet, puisqu'elle reste une route publique. Le PDF reprend 30 questions sur six axes avec un cas de 20 minutes.

Les briques Next.js que le poste utilise

App Router et Server Components

Le routeur du dossier app, par défaut depuis Next.js 13.4. Chaque dossier est un segment d'URL, avec ses fichiers page, layout, loading et error. Les composants sont des Server Components par défaut : ils s'exécutent sur le serveur, lisent la base ou l'API directement et n'envoient pas leur code au navigateur. Ceux qui gèrent des clics ou un état local portent la directive 'use client'.

Pages Router

L'ancien routeur du dossier pages, avec getServerSideProps, getStaticProps et les routes d'API de pages/api. Il reste pris en charge et très présent dans les applications existantes. Les deux routeurs peuvent cohabiter dans un même projet, ce qui permet une migration route par route.

Modes de rendu

Rendu à chaque requête (SSR), génération au build (SSG), régénération après un délai (ISR) et, avec Partial Prerendering, une page statique dont certaines zones sont rendues à la demande dans un Suspense. Le choix se fait page par page, selon la fraîcheur des données et la part de contenu personnel.

Cache et revalidation

Avec l'option cacheComponents de Next.js 16, rien n'est mis en cache sans la directive 'use cache', complétée par cacheLife pour la durée et cacheTag pour l'invalidation. revalidateTag, updateTag et revalidatePath rafraîchissent les données après une modification. C'est la partie qui a le plus changé d'une version à l'autre : demandez sur laquelle la personne a travaillé.

Server Actions et Route Handlers

Les Server Actions sont des fonctions 'use server' appelées depuis un formulaire ou un bouton, sans écrire d'API à la main. Les Route Handlers (fichiers route.ts) exposent de vrais points d'API, pour un webhook ou une application mobile. Les deux sont appelables depuis l'extérieur et doivent vérifier la session et les droits.

proxy.ts (ex-middleware)

Le nouveau nom de middleware.ts depuis Next.js 16. Il intercepte les requêtes avant le rendu pour les redirections, les réécritures, la langue ou un contrôle rapide de cookie, et tourne sur le runtime Node.js. Il ne remplace pas la vérification des droits dans la page ou l'action, ce qu'a rappelé en 2025 la faille CVE-2025-29927, qui permettait de contourner le middleware.

SEO technique et métadonnées

L'API Metadata (export metadata ou generateMetadata) produit le titre, la description, les balises Open Graph et l'URL canonique. Les fichiers sitemap.ts, robots.ts et opengraph-image complètent le dispositif. next/image et next/font aident à tenir les Core Web Vitals, en particulier le LCP et le CLS.

Déploiement

Vercel déploie Next.js sans configuration. Ailleurs, l'application tourne comme un serveur Node.js (next start, ou sortie standalone dans un conteneur) ou passe par un adaptateur, dont l'API est stable depuis Next.js 16.2. L'export statique supprime toutes les fonctions serveur. Plusieurs instances demandent un cache partagé configuré.

Turbopack et tests

Turbopack est le bundler par défaut depuis Next.js 16, webpack reste disponible sur option. Les composants client se testent avec Vitest ou Jest et Testing Library. Pour les Server Components asynchrones, la documentation de Next.js recommande des tests de bout en bout, avec Playwright par exemple.

Next.js est presque toujours demandé avec React et TypeScript, souvent avec Tailwind CSS. Les postes se répartissent entre le front-end, quand un back-end existe déjà et que Next.js sert l'interface, et le full-stack, quand les Server Components et les Server Actions accèdent eux-mêmes à la base, avec un ORM comme Prisma ou Drizzle. Dans le second cas, ajoutez des questions sur la base de données et la sécurité côté serveur. Indiquez dans l'offre le routeur utilisé, la version de Next.js et l'hébergement, Vercel ou serveur Node.js : ces choix changent ce que la personne devra maîtriser sur le cache et le déploiement.

Les points techniques à valider chez un développeur Next.js

• Frontière entre Server Components et composants client
• Modes de rendu (SSR, SSG, ISR, PPR)
• Cache et revalidation des données
• Server Actions, Route Handlers et sécurité
• SEO technique et Core Web Vitals
• Déploiement hors Vercel et migration de versions

Cinq questions pour tester un développeur Next.js

Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.

1. Question 1 · confirmé

   Pour corriger une erreur, un développeur a ajouté 'use client' en haut du layout racine. Quelles conséquences, et que proposez-vous à la place ?

   Une bonne réponseTout ce que ce layout importe devient du code client : le JavaScript envoyé au navigateur grossit, les composants ne peuvent plus lire la base ou un secret côté serveur, et le rendu serveur ne sert presque plus à rien. On isole la partie interactive (un bouton, un useState, un contexte) dans un petit composant client et on lui passe les composants serveur en children si besoin. Un fournisseur de contexte, pour le thème ou la session, va dans un composant client dédié que le layout importe.

   Signal d'alerte« Ça ne change rien, Next.js fait du SSR de toute façon. » Ou « 'use client' veut dire que le composant n'est rendu que dans le navigateur », alors qu'il est aussi pré-rendu sur le serveur puis hydraté.

2. Question 2 · confirmé à senior

   Une page affiche encore un tarif modifié il y a une heure dans le back-office. Comment trouvez-vous ce qui garde l'ancienne valeur ?

   Une bonne réponseLa personne demande d'abord la version de Next.js et le modèle de cache utilisé, puis remonte les couches : cache des données (fetch avec revalidate, ou 'use cache' avec cacheLife), page générée au build ou en ISR, cache du routeur dans le navigateur, CDN devant l'application. La correction passe par un tag sur la donnée (cacheTag, ou l'option next.tags de fetch) et un revalidateTag ou un updateTag déclenché par la modification, par exemple depuis un webhook du back-office. Elle vérifie sur un build de production, car next dev ne met pas en cache de la même façon.

   Signal d'alertePasser toute l'application en dynamique (force-dynamic, no-store) pour ne plus voir le problème, ou redéployer pour vider le cache.

3. Question 3 · confirmé

   Une Server Action supprime un document à partir de son identifiant. Que doit-elle contrôler avant d'agir ?

   Une bonne réponseUne Server Action est un point d'entrée public : n'importe qui peut l'appeler avec les arguments de son choix. Elle relit la session côté serveur, vérifie que l'utilisateur a des droits sur ce document précis, valide les entrées (avec Zod par exemple) et renvoie une erreur propre. Masquer le bouton dans l'interface ne protège rien. Les bons profils regroupent ces contrôles dans une couche d'accès aux données que les pages et les actions réutilisent.

   Signal d'alerte« L'action n'est appelée que par mon bouton, donc l'utilisateur a forcément le droit. » Ou un contrôle placé seulement dans proxy.ts.

4. Question 4 · senior

   Vous avez une page de liste publique, une page de détail mise à jour plusieurs fois par jour et un tableau de bord personnel. Quel rendu choisissez-vous pour chacune ?

   Une bonne réponseLa liste et le détail sont pré-rendus puis revalidés : generateStaticParams pour les pages les plus consultées, une durée de revalidation ou, mieux, une invalidation par tag au moment de la publication. Le tableau de bord dépend des cookies, il est donc rendu à la demande et jamais mis en cache partagé. Avec Cache Components, il peut garder une coquille statique (en-tête, navigation) et rendre ses zones personnelles dans un Suspense, ce que Next.js appelle Partial Prerendering. La personne parle de fraîcheur acceptable et de charge serveur, pas seulement d'acronymes.

   Signal d'alerteTout en SSR « pour être à jour », ou un tableau de bord personnel mis en cache comme une page publique.

5. Question 5 · confirmé

   Le LCP de la page d'accueil est mauvais sur mobile. Par où commencez-vous dans une application Next.js ?

   Une bonne réponsePar la mesure : données terrain (Search Console, rapport Chrome UX, useReportWebVitals), puis Lighthouse pour identifier l'élément LCP. Si c'est une image, next/image avec ses dimensions, un attribut sizes juste et loading="eager" ou fetchPriority="high" sur l'image principale (la prop priority, utilisée avant Next.js 16, est dépréciée au profit de preload). Si c'est du texte, next/font pour éviter le chargement tardif des polices. Viennent ensuite le JavaScript client, avec des composants passés en client sans raison ou des bibliothèques lourdes à charger avec next/dynamic, et le temps de réponse du serveur quand la page est dynamique.

   Signal d'alerteCompresser les images à la main sans rien mesurer, ou mettre du lazy loading sur l'image principale, ce qui retarde précisément le LCP.

Développeur Next.js : réponses aux questions des recruteurs

Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.