Next.js

Qu'est-ce que Next.js ?

Next.js est un framework React qui permet de générer les pages sur le serveur, à la construction ou à la demande. C'est ce qui rend une application React compatible avec les exigences du référencement.

Le rendu côté serveur, par défaut

Une application React classique envoie une page vide et construit tout dans le navigateur. Next.js produit le HTML en amont — à la construction, à la requête, ou par régénération périodique — et le sert complet.

S'y ajoutent les briques dont un site a besoin sans les réécrire : routage par fichiers, métadonnées et données structurées par page, optimisation des images, redirections et réécritures d'URL, génération du sitemap.

Les points d'attention

• Vérifier le mode de rendu de chaque page : un composant client mal placé peut vider le HTML servi.
• Déclarer les métadonnées et la canonique par page, pas au niveau du gabarit.
• Traiter les redirections dans la configuration plutôt que côté navigateur.
• Surveiller le poids du JavaScript envoyé : le rendu serveur ne dispense pas de mesurer.

Exemple concret

Pour gérer un filtre par thème, la page qui liste les articles d’un éditeur de logiciel de facturation porte la directive « use client » de bout en bout. Le HTML servi arrive sans les titres d’articles : ils n’apparaissent qu’après exécution du JavaScript. Le découpage change, la liste reste rendue sur le serveur et seul le sélecteur devient un composant client. Les titres sont dans la première réponse.

À retenir

Next.js ne garantit rien à lui seul : il donne les moyens de servir un site rapide et lisible par les robots. Un projet Next mal configuré se référence aussi mal qu'un autre.