Next.js 15 App Router : ce qui change vraiment par rapport au Pages Router

L'App Router de Next.js 15 est devenu le standard du développement web React en 2026, avec plus de 85 % d'adoption selon les dernières enquêtes. Si vous utilisez encore le Pages Router, ce guide pratique vous explique ce qui change vraiment et comment migrer votre projet en toute sérénité.

Chez ConsiliowEB, nous avons migré notre propre site vers l'App Router dès sa sortie stable. Voici les leçons concrètes tirées de cette expérience en production.

Pourquoi migrer vers l'App Router de Next.js 15

Le Pages Router a servi le développement web pendant des années, mais l'App Router apporte des avantages majeurs que les entreprises ne peuvent plus ignorer en 2026.

Performance native avec les Server Components

Les React Server Components (RSC) sont la pierre angulaire de l'App Router. Contrairement au Pages Router où tout le JavaScript est envoyé au navigateur, les Server Components s'exécutent uniquement côté serveur. Le résultat : des pages plus légères, un chargement plus rapide et un meilleur score Lighthouse.

Sur notre site ConsiliowEB, la migration vers les Server Components a réduit le bundle JavaScript de 40 %, passant de 280 Ko à 168 Ko gzippé. Le Time to Interactive (TTI) a baissé de 1,8 seconde sur mobile.

Layouts imbriqués

L'App Router introduit les layouts imbriqués avec le fichier `layout.tsx`. Chaque segment de route peut avoir son propre layout qui persiste lors de la navigation. Fini le re-rendu complet de la page quand on change de section.

Streaming SSR et Suspense

Le streaming SSR permet d'envoyer le HTML progressivement au navigateur. Les parties lentes de la page (appels API, requêtes base de données) n'empêchent plus l'affichage du reste. L'utilisateur voit le contenu apparaître progressivement grâce aux boundaries `Suspense`.

Les 5 changements majeurs à comprendre

1. Server Components par défaut

Dans l'App Router, tous les composants sont des Server Components par défaut. C'est le changement le plus fondamental. Pour utiliser des hooks React (useState, useEffect) ou des événements (onClick), vous devez ajouter la directive `'use client'` en haut du fichier.

La règle d'or : ne marquez un composant comme Client Component que si vous en avez réellement besoin. Moins de `'use client'`, meilleure sera la performance.

2. Data fetching simplifié

Le Pages Router utilisait `getServerSideProps`, `getStaticProps` et `getInitialProps`. L'App Router les remplace par de simples appels `fetch()` directement dans les Server Components, avec un système de cache intégré.

Plus besoin de ces fonctions spéciales. Vous écrivez vos requêtes API directement dans le composant, comme du code Node.js classique. Next.js gère automatiquement le cache, la revalidation et la déduplication.

3. Structure de fichiers conventionnelle

L'App Router utilise des fichiers spéciaux qui définissent le comportement de chaque route :

• page.tsx : le contenu de la page (remplace les fichiers dans pages/)
• layout.tsx : le layout partagé entre les sous-routes
• loading.tsx : l'état de chargement (Suspense automatique)
• error.tsx : la gestion d'erreur avec Error Boundary
• not-found.tsx : la page 404 personnalisée

4. Routes dynamiques et groupes

Les routes dynamiques utilisent la syntaxe `[param]` comme avant, mais l'App Router ajoute les groupes de routes avec `(nom)`. Les groupes permettent d'organiser le code sans affecter l'URL. Par exemple, `(frontend)` et `(admin)` peuvent avoir des layouts complètement différents.

5. Métadonnées et SEO natifs

L'App Router intègre la gestion des métadonnées directement via un export `metadata` ou une fonction `generateMetadata()`. Plus besoin de composant Head personnalisé. Le SEO est géré nativement par le framework.

Les pièges courants de la migration

Le piège du 'use client' excessif

L'erreur la plus fréquente est de marquer trop de composants comme Client Components. Chaque `'use client'` augmente le bundle JavaScript. La solution : créer des petits composants Client pour les interactions (boutons, formulaires) et garder le reste en Server Components.

Les erreurs d'hydration

Les erreurs d'hydration surviennent quand le HTML serveur ne correspond pas au rendu client. Les causes courantes sont les dates, les nombres aléatoires ou les appels à `window`. La solution : utiliser `suppressHydrationWarning` uniquement sur les éléments concernés et initialiser les états côté client avec `useState(undefined)`.

La compatibilité des bibliothèques

Certaines bibliothèques React ne supportent pas encore les Server Components. Vérifiez la compatibilité avant de migrer. Les bibliothèques de style (styled-components, emotion) nécessitent une configuration spéciale. Tailwind CSS fonctionne parfaitement sans modification.

Le cache trop agressif

Next.js 15 a revu sa stratégie de cache par rapport à Next.js 14. Le cache des requêtes fetch n'est plus activé par défaut. Si vous venez de Next.js 14, vos pages pourraient devenir plus lentes sans ajustement explicite des options de cache.

Stratégie de migration pas à pas

La migration ne doit pas se faire en une fois. Voici la stratégie que nous recommandons chez ConsiliowEB :

• Étape 1 : créer le dossier `app/` à côté du dossier `pages/` existant (les deux peuvent coexister)
• Étape 2 : migrer le layout principal (`_app.tsx` et `_document.tsx` → `app/layout.tsx`)
• Étape 3 : migrer les pages statiques simples en premier (mentions légales, contact, à propos)
• Étape 4 : migrer les pages dynamiques avec data fetching
• Étape 5 : migrer les pages avec beaucoup d'interactivité en dernier
• Étape 6 : supprimer le dossier `pages/` une fois la migration complète

Cette approche progressive minimise les risques et permet de tester chaque étape avant de continuer.

Les performances mesurées après migration

Sur nos projets clients, la migration vers l'App Router produit des résultats concrets et mesurables :

• Bundle JS : réduction de 30 à 50 % grâce aux Server Components
• LCP (Largest Contentful Paint) : amélioration moyenne de 1,2 seconde
• TBT (Total Blocking Time) : réduction de 60 % en moyenne
• Score Lighthouse Performance : passage de 65-75 à 85-95 sur mobile

Ces gains sont significatifs pour le référencement SEO, car Google utilise les Core Web Vitals comme facteur de classement.

Faut-il migrer maintenant ?

Si vous démarrez un nouveau projet, utilisez l'App Router sans hésiter. C'est le standard en 2026 et toute la documentation Next.js est orientée vers l'App Router.

Si vous avez un site existant en Pages Router qui fonctionne bien, la migration n'est pas urgente mais reste recommandée. Le Pages Router est en mode maintenance : il reçoit des correctifs de sécurité mais plus de nouvelles fonctionnalités.

Chez ConsiliowEB, tous nos nouveaux projets utilisent l'App Router avec Payload CMS 3. Cette combinaison offre le meilleur rapport performance/flexibilité pour les sites vitrines professionnels et les applications web.

Conclusion : l'App Router, un investissement rentable

La migration vers l'App Router de Next.js 15 demande un effort initial, mais les bénéfices en performance, en SEO et en expérience développeur sont considérables. Avec 85 % d'adoption en 2026, c'est un investissement qui prépare votre projet pour les années à venir.

Vous souhaitez migrer votre site vers Next.js 15 ou créer un nouveau projet web performant ? Demandez votre devis gratuit et bénéficiez de l'expertise d'une agence web spécialisée Next.js en Corrèze.