Migration SEO: Transformer React en Next.js

1. Pourquoi Next.js ? Le super-pouvoir SEO de React

Votre expérience avec React vous a familiarisé avec la création d'interfaces utilisateur dynamiques. Cependant, une application create-react-app standard envoie une page HTML quasi vide au navigateur, qui doit ensuite exécuter le JavaScript pour afficher le contenu. C'est ce qui pénalise le SEO et les Core Web Vitals.

Next.js est un framework qui étend React avec des fonctionnalités conçues pour le web moderne, en résolvant ces problèmes.

Comme vous venez de le lire, Next.js vous apporte sur un plateau :

• Server-Side Rendering (SSR) et Static Site Generation (SSG) : Le serveur peut pré-rendre les pages en HTML avant de les envoyer au client. Résultat : les moteurs de recherche reçoivent un contenu complet, et le LCP est considérablement amélioré.
• Metadata API : Une manière simple et centralisée de gérer les balises <title>, <meta name="description">, et autres informations cruciales pour le SEO.
• Image Optimization : Un composant <Image> qui optimise automatiquement les images (format, taille, chargement différé) pour des performances optimales.

Ces fonctionnalités transforment React, une bibliothèque d'UI, en un puissant framework capable de produire des applications web full-stack rapides et optimisées pour le SEO.

2. Initialisation de votre premier projet Next.js

Passons à l'action. Nous allons utiliser create-next-app, l'outil en ligne de commande officiel pour démarrer un nouveau projet Next.js. Votre expérience de développeur full-stack et votre familiarité avec la ligne de commande rendront cette étape très simple.

Ouvrez votre terminal et lancez la commande :
npx create-next-app@latest

L'installateur vous posera plusieurs questions. Voici les choix que je vous recommande pour ce projet, qui correspondent aux meilleures pratiques actuelles :

• What is your project named? : Choisissez un nom, par exemple my-nextjs-app.
• Would you like to use TypeScript? : Yes. Votre expérience en développement vous permettra d'apprécier rapidement la sécurité apportée par le typage.
• Would you like to use ESLint? : Yes. Indispensable pour maintenir une qualité de code constante.
• Would you like to use Tailwind CSS? : Yes. C'est le standard de facto pour le style dans l'écosystème Next.js.
• Would you like to use src/ directory? : No. Pour ce premier projet, gardons la structure la plus simple possible. Laisser les fichiers dans le dossier app à la racine est plus direct.
• Would you like to use App Router? : Yes. C'est la nouvelle architecture de routage de Next.js, plus puissante et recommandée pour tous les nouveaux projets.
• Would you like to customize the default import alias? : No. Le réglage par défaut (@/*) est excellent.

Une fois le processus terminé, naviguez dans le répertoire de votre projet (cd my-nextjs-app) et ouvrez-le dans votre éditeur de code. Vous pouvez lancer le serveur de développement avec npm run dev et visiter http://localhost:3000 pour voir la page d'accueil.

3. Découverte de la structure du projet : l'App Router

En explorant le projet, vous remarquerez un dossier app. C'est le cœur du App Router. Contrairement à une application React où vous gérez le routage avec une bibliothèque comme react-router-dom, Next.js utilise un système basé sur les fichiers et dossiers.

Pour résumer ce système puissant :

• Le routage est défini par le système de fichiers : Pour créer la page /dashboard, il suffit de créer un dossier dashboard dans app et d'y placer un fichier page.tsx. C'est simple et intuitif.
• Les fichiers spéciaux ont un rôle précis :
  • app/layout.tsx : C'est le layout racine, qui s'applique à toute l'application. C'est l'endroit idéal pour mettre votre balise <html>, <body>, un header et un footer.
  • app/page.tsx : C'est la page d'accueil de votre site (route /).
  • app/dashboard/layout.tsx : Vous pouvez imbriquer les layouts. Celui-ci s'appliquerait uniquement aux pages dans /dashboard.
• La gestion des chargements est intégrée : En ajoutant un fichier loading.tsx, Next.js l'affichera automatiquement en attendant que le contenu de page.tsx soit prêt. Cela améliore l'expérience utilisateur perçue.

Cette structure est un avantage majeur pour le SEO car elle encourage une organisation claire des URLs et permet de partager facilement des éléments de page (layouts) sans dupliquer de code.

4. Gérer les métadonnées pour le SEO

Un site optimisé pour le SEO doit avoir des balises <title> et <meta name="description"> uniques et pertinentes pour chaque page. Next.js rend cela extrêmement simple grâce à son API de métadonnées.

En pratique, vous pouvez exporter un objet metadata depuis n'importe quel fichier layout.tsx ou page.tsx.

Exemple de métadonnées globales dans app/layout.tsx :

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Mon Super Site',
  description: 'La description générale de mon super site.',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  // ...
}

Exemple de métadonnées spécifiques dans app/contact/page.tsx :

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Contactez-nous | Mon Super Site',
  description: 'Contactez notre équipe pour toute question.',
};

export default function ContactPage() {
  return <h1>Page de contact</h1>;
}

Next.js fusionnera automatiquement ces objets : la page de contact aura son propre titre et sa propre description, mais héritera des autres métadonnées (comme les balises Open Graph) si elles sont définies dans le layout racine. Cette approche est à la fois simple et puissante.

Conclusion

Félicitations ! Vous avez initialisé votre premier projet Next.js et exploré les fondations qui en font un outil exceptionnel pour le développement web moderne et le SEO.

Points clés à retenir :

• Next.js enrichit React avec des fonctionnalités essentielles pour le SEO, notamment le rendu côté serveur et la génération de sites statiques.
• La commande npx create-next-app permet de créer un projet moderne et bien configuré en quelques instants.
• L'App Router de Next.js utilise une approche de routage basé sur le système de fichiers, ce qui rend l'organisation des pages intuitive.
• Les fichiers spéciaux comme layout.tsx et page.tsx permettent de construire des interfaces complexes de manière structurée.
• L'API de métadonnées intégrée offre un moyen simple et efficace de gérer les balises title et description pour chaque page, qu'elles soient statiques ou dynamiques.

Prochaine étape :

Maintenant que notre projet est en place et que nous comprenons sa structure, nous allons nous pencher sur l'une des fonctionnalités les plus puissantes de Next.js pour le SEO et la performance. Dans la prochaine leçon, nous apprendrons à implémenter le rendu côté serveur (SSR). Nous verrons comment récupérer des données dynamiques côté serveur avant d'envoyer la page au client, garantissant ainsi que les moteurs de recherche et les utilisateurs reçoivent toujours une page HTML complète et rapide à afficher.