Guide maître Next.js 15 App Router — Meilleures pratiques pour les Server Components

L'App Router de Next.js 15 représente un nouveau paradigme centré sur les React Server Components. Voici une collection de meilleures pratiques validées en production jusqu'en 2026.

1. Structure du système de fichiers

app/
  layout.tsx           # Layout racine (requis)
  page.tsx             # Accueil /
  loading.tsx          # Interface de chargement
  error.tsx            # Boundary d'erreur
  not-found.tsx        # 404
  (marketing)/         # Groupe de routes (sans impact sur l'URL)
    page.tsx
  blog/
    [slug]/
      page.tsx         # /blog/xxx
  api/
    route.ts           # Endpoint REST

Groupes de routes (group) : Utilisés pour partager des layouts sans affecter la structure d'URL.

2. Composants serveur vs client

Le serveur est la valeur par défaut. Un composant doit explicitement déclarer "use client" pour être traité comme un Client Component.

// Server Component (par défaut)
async function Page() {
  const user = await fetchUser()  // Récupéré directement sur le serveur
  return <ProfileCard user={user} />
}

// Client Component
"use client"
function InteractiveButton() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Principes de frontière

• Placez "use client" à la feuille la plus basse de l'arbre de composants.
• Gardez les composants de niveau supérieur comme Server Components.
• Les valeurs passées en props doivent être sérialisables (types compatibles JSON uniquement).

3. Récupération de données

// Récupération parallèle
async function Page({ params }) {
  const [user, posts] = await Promise.all([
    fetchUser(params.id),
    fetchPosts(params.id),
  ])
  return <Dashboard user={user} posts={posts} />
}

Mise en cache automatique de fetch :

• fetch(url) — Utilise le cache par défaut
• fetch(url, { cache: "no-store" }) — Récupère à chaque requête
• fetch(url, { next: { revalidate: 60 } }) — ISR, revalide toutes les 60 secondes

4. Suspense + Streaming

import { Suspense } from "react"

export default function Page() {
  return (
    <>
      <FastSection />
      <Suspense fallback={<Skeleton />}>
        <SlowSection />
      </Suspense>
    </>
  )
}

async function SlowSection() {
  await new Promise(r => setTimeout(r, 2000))
  return <div>Terminé</div>
}

Seule la section lente est streamée, permettant une amélioration immédiate du TTFB.

5. Server Actions

// app/actions.ts
"use server"
export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.insert(posts).values({ title })
  revalidatePath("/blog")
}

// app/blog/new/page.tsx
import { createPost } from "../actions"
export default function NewPost() {
  return <form action={createPost}>...</form>
}

La logique serveur peut être appelée directement sans API REST, et la protection CSRF est gérée automatiquement.

6. Error Boundaries

// app/blog/error.tsx
"use client"
export default function Error({ error, reset }) {
  return (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Réessayer</button>
    </div>
  )
}

Les error boundaries au niveau du segment permettent au reste de la page de fonctionner normalement même lorsqu'une erreur survient dans une partie.

7. Métadonnées et SEO

export const metadata = {
  title: "Ma Page",
  description: "...",
}

// Ou défini dynamiquement
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug)
  return { title: post.title }
}

10 meilleures pratiques

1. 1Serveur par défaut : Utilisez "use client" uniquement quand c'est absolument nécessaire
2. 2Récupérez les données aussi haut que possible : Évitez le props drilling
3. 3Tirez parti de Suspense activement : Maximisez le TTFB avec le streaming
4. 4fetch + revalidate : Mise en cache automatique sans Redis
5. 5Server Actions : Remplacez REST et réduisez le boilerplate
6. 6dynamic = force-dynamic : Réservez aux pages personnalisées uniquement
7. 7Optimisation d'images : Le composant est indispensable
8. 8Optimisation des polices : Utilisez next/font
9. 9import server-only : Empêchez le code sensible de fuiter vers le client
10. 10Parallel Routes : Utilisez @slot pour les tableaux de bord complexes

Erreurs courantes

• Utiliser useState dans un Server Component → provoque une erreur
• Utiliser fetch dans un Client Component → dégradation des performances
• Passer des fonctions ou des Dates en props → erreurs de sérialisation
• Importer des composants serveur async depuis un fichier "use client" → peut causer de la confusion

Conclusion

L'App Router a une courbe d'apprentissage initiale, mais une fois maîtrisé, vous obtenez le meilleur du SPA et du SSR dans votre expérience de développement. Pour tout nouveau projet Next.js en 2026, l'App Router est la voie à suivre. Pages Router est une cible de migration.

FAQ

Q1. Qu'est-ce qui a changé dans le Next.js 15 App Router ? R. La structure de l'application a été repensée autour des Server Components, des layouts imbriqués, du streaming et de la mise en cache des données.

Q2. Devrais-je utiliser App Router ou Pages Router ? R. App Router est la valeur par défaut pour les nouveaux projets ; pour les services existants, il est préférable de migrer route par route de manière incrémentale.

Q3. Quelles sont les meilleures pratiques pour les Server Components ? R. Gardez les composants en tant que server components par défaut, et extrayez uniquement les parties nécessitant de l'interactivité en client components.

Q4. Comment récupérer des données dans le Next.js App Router ? R. Récupérez directement dans les server components, et configurez explicitement la mise en cache, la revalidation et les boundaries Suspense.

Q5. Quels sont les problèmes courants lors de la migration vers App Router ? R. Placement des hooks client, gestion de l'état global, gestion des métadonnées, comportement du cache et changements de structure de routage.

Q6. Quels sont les points clés pour l'optimisation des performances Next.js 15 ? R. Ajustez simultanément les frontières de rendu serveur, l'optimisation des images, la stratégie de mise en cache, l'analyse des bundles et l'UX de streaming.