</>
NEXT-WEB
Retour aux vidéos
Formations 35 min

Next.js : Structurer son site avec l'App Router

Comprendre les Layouts, les Pages et la hiérarchie des dossiers pour ne plus jamais se perdre dans son code.

🚀 Épisode 4 : Maîtriser l'App Router, l'Architecture des Pages et le SEO

Bonjour à tous et bienvenue dans ce 4e tutoriel de notre formation dédiée à la création de sites internet ultra-optimisés pour le SEO et conçus pour générer un maximum de leads.

Si vous avez suivi les étapes précédentes, votre environnement de développement est prêt : vous disposez d'une Landing Page fonctionnelle, d'un Header premium et d'un Call to Action (CTA) impactant.

Mais pourquoi une simple Landing Page unique ne suffit-elle pas pour capter du trafic organique ? Dans cette première partie, nous allons analyser la théorie derrière la structure des pages web, comprendre le rôle clé de l'App Router de Next.js, puis passer à la pratique en créant nos pages légales, notre page 404 personnalisée, tout en décortiquant la différence fondamentale entre pages statiques et dynamiques.

📚 Partie 1 : La Théorie des Pages et les Exigences SEO

Pour que les moteurs de recherche comme Google ou Bing accordent de l'autorité à votre plateforme et propulsent votre site en avant, vous devez respecter une architecture stricte divisée en trois piliers de pages.

1. Les Pages Institutionnelles et Obligatoires (Le Trust)

Elles sont indispensables pour prouver l'identité de l'éditeur du site et asseoir votre crédibilité légale auprès des algorithmes :

  • Les Mentions Légales : Identification de l'entreprise, coordonnées de l'exploitant et détails de l'hébergeur.
  • La Politique de Confidentialité : Explication transparente du traitement des données utilisateurs et gestion des cookies.
  • Les Conditions Générales de Vente (CGV) : Fortement recommandées et obligatoires dès que vous intégrez un module de paiement ou de commerce en ligne.

2. Les Pages d'Acquisition de Trafic (Le Contenu)

Une Landing Page isolée ne répond qu'à une seule promesse globale. Pour attirer des visiteurs qualifiés, votre site doit répondre à des requêtes précises (les mots-clés tapés par les internautes) :

  • Les Articles de Blog et Guides Pratiques : Regroupés au sein d'un hub de contenu ou de pages catégories pour cibler des intentions de recherche spécifiques.
  • Les Pages de Services et Outils Gratuits : Des modules interactifs à forte valeur ajoutée (ex: calculette d'intérêts composés, comparateur d'assurances) riches en texte sémantique. Les robots de Google analysent en priorité le code HTML textuel brut ; le texte reste le carburant principal de votre indexation.

3. Les Pages de Structure et de Conversion

Ces sections fluidifient l'expérience utilisateur (UX) et scellent la relation de confiance :

  • La Page À Propos : Elle raconte votre histoire, humanise votre marque et remplit les critères d'évaluation E-E-A-T (Expérience, Expertise, Autorité, Fiabilité) de Google.
  • La Page Contact / Demande de Devis : L'entonnoir final pour capturer vos leads.
  • La Page 404 (Not Found) : Une page d'erreur optimisée qui réoriente l'internaute vers les sections clés du site au lieu de le perdre.

⚙️ Partie 2 : Le Fonctionnement Technique de l'App Router

Next.js utilise un système de routage basé sur l'architecture des dossiers (File-system Based Router). La structure de votre projet se présente ainsi :

📁 web-creator
├── 📁 components
│   ├── 📄 Header.tsx
│   └── 📄 BottomNav.tsx
└── 📁 app
    ├── 📄 layout.tsx        (Squelette global : Header, Footer, BottomNav)
    ├── 📄 page.tsx          (Landing Page - Racine du site : /)
    ├── 📄 not-found.tsx     (Page d'erreur 404 globale)
    ├── 📁 about
    │   └── 📄 page.tsx      (Page À Propos accessible via /about)
    └── 📁 mentions-legales
        └── 📄 page.tsx      (Page Mentions Légales via /mentions-legales)

Les Règles d'Or de l'App Router :

  1. La Racine (/) : Le fichier app/page.tsx correspond directement à votre page d'accueil.
  2. La Création d'une Route : Pour ajouter une nouvelle URL (par exemple monsite.com/about), il suffit de créer un sous-dossier nommé exactement comme le slug souhaité (about) et d'y insérer un fichier obligatoirement nommé page.tsx.
  3. L'Export de Composant : Chaque fichier page.tsx doit impérativement exporter une fonction React qui retourne la structure visuelle (HTML / Tailwind CSS) et la logique de la page.
  4. La Gestion de la 404 : Pour personnaliser l'affichage des erreurs d'URL, Next.js cherche un fichier nommé précisément not-found.tsx placé à la racine du dossier app.

L'Optimisation des Changements de Page

Contrairement aux CMS traditionnels comme WordPress qui rechargent l'intégralité du code de la page à chaque clic, Next.js optimise la navigation grâce au composant <Link>.

Lors d'un changement de route, le layout (contenant le Header et la BottomNav) reste totalement statique et ne bouge pas. Seul le composant interne ({children}) est réhydraté avec le nouveau contenu de la page ciblée. Le chargement devient instantané, fluide et ultra-léger pour l'utilisateur.

💻 Partie 3 : Passage à la Pratique dans VS Code

Mettons en pratique ces concepts en créant notre première page secondaire : la page À Propos.

  1. Ouvrez votre terminal intégré dans votre dossier de projet (web-creator) et lancez votre serveur de développement local :
npm run dev
  1. Rendez-vous sur http://localhost:3000 pour valider que votre site tourne correctement.
  2. Dans l'arborescence, faites un clic droit sur le dossier app et sélectionnez New Folder (Nouveau Dossier). Nommez-le about.
  3. Dans ce dossier about, créez un nouveau fichier nommé page.tsx.

⚠️ Constat d'erreur : Si vous tentez d'accéder à http://localhost:3000/about alors que votre fichier page.tsx est complètement vide, Next.js intercepte la route mais lève une erreur système car aucun composant valide n'est renvoyé. Ce n'est pas une erreur 404 (qui elle intervient si le dossier ou le fichier n'existent pas), c'est une absence de rendu.

Pour générer un contenu cohérent et harmonisé avec notre charte graphique, nous allons solliciter notre assistant IA en lui fournissant à nouveau le contexte de notre Design System.

Prompt de génération à soumettre à l'IA :

Voici le fichier de configuration de mes variables globales CSS pour rappel :
[Insérer ici le contenu de votre fichier globals.css]

En respectant scrupuleusement ces classes et cette palette de couleurs, génère-moi le code complet pour le fichier app/about/page.tsx. 

Je veux que ce soit une page "À Propos" moderne, épurée et responsive. Elle doit raconter mon histoire : je suis Guillaume (alias RakoonDev), développeur full-stack spécialisé en Next.js et en SEO technique, et mon objectif avec ce site est de partager mon savoir avec la communauté de développeurs et d'entrepreneurs. Inclue des sections claires avec de beaux espacements et des effets de survol élégants sur les éléments interactifs.

L'IA va maintenant structurer l'intégralité de votre composant avec vos propres classes utilitaires Tailwind, prêt à être copié-collé dans votre fichier. Dans la suite de cette session, nous analyserons ce code et mettrons en place notre gestionnaire de page introuvable.

📂 Partie 4 : Validation de la Page et Personnalisation de VS Code

Une fois le code collé dans votre fichier app/about/page.tsx, sauvegardez. Dans votre terminal, vous devriez voir passer une requête 200. Une 200 signifie que tout s'est déroulé avec succès et que la page a été correctement servie par votre serveur local.

Comprendre la structure du composant généré

En ouvrant ce fichier, vous remarquez que l'IA a exporté une fonction principale (par exemple AboutPage). C'est une fonction React standard qui retourne une structure en TSX (TypeScript JSX).

  • La Sémantique HTML : Vous y trouverez des balises propres (<main>, <section>, <h1>, <div>) garantissant une structure saine pour les moteurs de recherche.
  • Le Design System : Les classes Tailwind injectées exploitent directement vos variables CSS globales, assurant la cohérence avec le reste de votre application.
  • Les Imports : Le composant inclut des icônes issues de lucide-react et, surtout, le composant <Link> importé depuis next/link pour gérer la navigation sans rechargement.

🎨 Astuce Productivité : Harmoniser vos couleurs VS Code Si vous constatez une différence de coloration syntaxique entre votre écran et les tutoriels, cela vient de votre thème VS Code. Depuis les mises à jour récentes, le thème par défaut embarque des palettes très contrastées (comme le thème par défaut de 2026). Si vous préférez un rendu plus doux et standardisé, allez dans vos paramètres (icône engrenage) > Themes > Color Theme et sélectionnez Dark Modern.

Tester et lier vos pages (Le Maillage Interne)

Pour l'instant, aucun lien dans votre Header ne pointe vers cette nouvelle page. Pour la tester, tapez directement l'URL dans la barre de recherche de votre navigateur : http://localhost:3000/about. Vous découvrirez votre nouvelle interface.

Pour permettre à l'utilisateur de revenir en arrière, modifiez le bouton de redirection généré par l'IA en utilisant le composant <Link> pointant vers la racine :

import Link from 'next/link';

export default function AboutPage() {
  return (
    <div>
      {/* ... reste du code ... */}
      <Link href="/">
        Retour à l'Accueil
      </Link>
    </div>
  );
}

Le fait de relier vos pages entre elles s'appelle le maillage interne. C'est une stratégie capitale en SEO : Google adore parcourir des liens logiques, et cela rend l'expérience utilisateur infiniment plus fluide.

Si vous aviez tenté de lier un bouton vers une page inexistante (ex: /saucisson), Next.js aurait immédiatement renvoyé son écran d'erreur standard (404). Pour y remédier proprement, nous allons devoir créer notre propre page d'erreur.

🏛️ Partie 5 : Industrialiser son code (Le Découpage en Composants)

Si vous laissez tout votre contenu textuel et vos sections graphiques dans un seul fichier page.tsx, votre code va rapidement dépasser les 100 ou 200 lignes. Même si c'est gérable au début, cela devient complexe à débugger et difficile à maintenir.

Pour garder un projet propre, adoptez la méthode du découpage en sous-composants :

  1. À l'intérieur de votre dossier de route (ex: app/mentions-legales/), créez un sous-dossier technique nommé __components__. Le double underscore permet de faire remonter visuellement le dossier tout en indiquant qu'il est privé à cette route.
  2. Demandez à votre IA de découper le gros bloc de code en morceaux indépendants (ex: LegalHeader.tsx, CookiesSection.tsx) en utilisant le format PascalCase (Majuscule à chaque mot).
  3. Importez ensuite ces mini-composants dans votre fichier page.tsx principal.

💡 Pourquoi l'IA préfère les petits composants ? Les modèles de langage sont infiniment plus fiables sur de petits blocs de code isolés. Plus un fichier contient de lignes, plus le taux d'erreur ou d'oubli de balises augmente. En lui demandant de travailler composant par composant, vous obtenez un code parfait et sans bugs.

🛡️ Partie 6 : Création d'une Page 404 Customisée (not-found.tsx)

Par défaut, Next.js affiche une page d'erreur très basique. Pour offrir une expérience utilisateur premium, nous allons créer notre propre gestionnaire d'erreurs d'URL.

  1. À la racine directe de votre dossier app (au même niveau que votre layout.tsx global et votre première page.tsx), créez un fichier obligatoirement nommé not-found.tsx.
  2. Demandez à votre IA de générer une interface 404 reprenant votre Design System.

Intégration du composant :

// app/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-[var(--background)] px-4 text-center">
      <h1 className="text-6xl font-bold text-[var(--primary)]">404</h1>
      <p className="mt-4 text-xl text-[var(--foreground)]">Oups ! Cette page n'existe pas ou a été déplacée.</p>
      <Link href="/" className="mt-6 rounded-lg bg-[var(--primary)] px-6 py-3 text-sm font-semibold transition-all hover:opacity-90">
        Revenir à l'accueil
      </Link>
    </main>
  );
}

⚠️ Point de vigilance Tailwind & Variables CSS : L'IA a tendance à réinjecter des classes brutes comme bg-white ou text-black par automatisme. Soyez vigilants : si vous utilisez des couleurs fixes, votre site ne s'adaptera pas lors du passage au mode sombre (Dark Mode). Remplacez systématiquement ces classes par vos variables CSS dynamiques (ex: bg-[var(--background)]).

💾 Partie 7 : Sauvegarder son travail avec Git et GitHub

Vos pages de base (about, mentions-legales et not-found) sont prêtes. C’est le moment idéal pour archiver vos modifications sur votre dépôt distant. Ouvrez votre terminal et enchaînez ces trois commandes :

# 1. Indexer tous les nouveaux fichiers et modifications
git add .

# 2. Enregistrer le point de sauvegarde avec un message clair
git commit -m "feat: ajout des pages about, mentions-legales et 404 custom"

# 3. Envoyer le code sur votre dépôt GitHub
git push

🧠 Partie 8 : Introduction aux Pages Dynamiques (SSR & Slugs)

Jusqu'à présent, nous n'avons créé que des pages statiques. Cela signifie que lors de la phase de compilation de votre projet (npm run build), Next.js transforme tout votre code TSX en fichiers HTML, CSS et JS fixes. Ces pages sont générées une fois pour toutes et sont servies instantanément à l'utilisateur.

C'est parfait pour des pages institutionnelles, mais comment faire si vous gérez un blog de 25 000 articles ? Vous ne allez pas créer 25 000 dossiers à la main. C'est là qu'interviennent les routes dynamiques.

La puissance du paramètre [slug]

Pour indiquer à Next.js qu'une route est variable, on crée un dossier entouré de crochets, par exemple : app/blog/[slug]/page.tsx.

  • Fonctionnement : Si l'utilisateur tape monsite.com/blog/tuto-image-nextjs, Next.js comprend que tuto-image-nextjs est une variable dynamique (le slug).
  • Génération à la volée (SSR) : Le serveur Node.js intercepte ce mot-clé, va exécuter une requête vers votre base de données ou votre API pour récupérer le titre, le texte et les images correspondants, puis assemble le tout dynamiquement dans votre Layout global avant d'envoyer le HTML propre au navigateur.

Cette architecture hybride (mélange de statique pour la performance et de dynamique pour la mise à l'échelle) est l'atout numéro un de Next.js pour bâtir des stratégies de contenu massives et ultra-rapides.

🏁 En résumé & Prochaines étapes

Dans cette session, nous avons validé ensemble :

  1. L'importance SEO des différentes structures de pages (Trust, Acquisition, Conversion).
  2. Le fonctionnement de l'App Router et la puissance du composant <Link>.
  3. L'art de découper son code en sous-composants pour simplifier le travail avec l'IA.
  4. La mise en place d'une page 404 personnalisée et l'utilisation des variables CSS pour le mode sombre.

Prenez le temps de manipuler vos fichiers, de modifier vos textes et d'observer les rafraîchissements en direct. Laissez vos retours et vos questions dans l'espace commentaires ou directement dans l'onglet communauté de la chaîne !

Dans le prochain tutoriel, nous attaquerons la mise en page avancée : nous décortiquerons les grilles CSS avec Tailwind et nous coderons nos premiers modules dynamiques de capture de leads.

Bossez bien, entraînez-vous, et à la prochaine ! 🚀

👉 Hostinger jusqu'à -85% : J'en profite