Next.js 15 App Router : guide complet pour débuter en 2026

Next.js 15 a consolidé l’App Router comme voie principale pour les nouveaux projets. Si vous débutez avec Next.js ou migrez depuis le Pages Router, ce guide vous donne les bases solides pour comprendre et utiliser le framework efficacement.

Pourquoi Next.js en 2026 ?

Next.js s’est imposé comme le méta-framework React de référence pour plusieurs raisons :

• Rendu hybride — vous choisissez SSG, SSR ou ISR page par page, voire composant par composant
• Server Components — les composants qui n’ont pas besoin d’interactivité s’exécutent sur le serveur, réduisant drastiquement le JavaScript envoyé au client
• SEO natif — le rendu serveur génère du HTML complet immédiatement crawlable
• Turbopack — le bundler de développement le plus rapide du marché

Structure de l’App Router

L’App Router utilise le dossier app/ au lieu de pages/. Chaque dossier représente un segment d’URL, et des fichiers spéciaux définissent le comportement :

app/
  layout.tsx          ← layout racine (wrappé autour de tout)
  page.tsx            ← page d'accueil /
  blog/
    layout.tsx        ← layout partagé pour toutes les pages /blog/*
    page.tsx          ← page /blog
    [slug]/
      page.tsx        ← page dynamique /blog/mon-article

Server Components vs Client Components

C’est la distinction la plus importante à maîtriser :

Server Components (par défaut dans l’App Router) :

• S’exécutent uniquement sur le serveur
• Peuvent accéder directement à la base de données, aux APIs, au filesystem
• Réduisent le JS envoyé au client
• Ne peuvent pas utiliser de hooks React (useState, useEffect…) ni d’event listeners

// Server Component — par défaut
export default async function BlogPage() {
  const posts = await fetchPostsFromDB(); // appel direct DB OK
  return <ul>{posts.map(p => <li>{p.title}</li>)}</ul>;
}

Client Components — ajoutez 'use client' en haut du fichier :

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Fetching de données dans l’App Router

Dans l’App Router, fetch est étendu par Next.js pour permettre le caching granulaire :

// Statique — mis en cache indéfiniment (équivalent SSG)
const data = await fetch('https://api.example.com/posts', {
  cache: 'force-cache'
});

// Dynamique — pas de cache (équivalent SSR)
const data = await fetch('https://api.example.com/posts', {
  cache: 'no-store'
});

// ISR — revalidation toutes les 60 secondes
const data = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
});

Server Actions : mutations sans API routes

Les Server Actions sont l’une des fonctionnalités les plus puissantes de Next.js 15. Elles permettent d’exécuter du code serveur directement depuis un formulaire, sans créer de route API explicite :

// app/contact/actions.ts
'use server';
export async function sendEmail(formData: FormData) {
  const email = formData.get('email') as string;
  // envoyer l'email côté serveur
  await sendEmailToAdmin(email);
}

// app/contact/page.tsx
import { sendEmail } from './actions';

export default function ContactPage() {
  return (
    <form action={sendEmail}>
      <input name="email" type="email" />
      <button type="submit">Envoyer</button>
    </form>
  );
}

Déploiement : Vercel vs self-hosted

Vercel (créateur de Next.js) — déploiement en 1 commande, Edge Network mondial, previews automatiques sur chaque PR, scaling automatique. Gratuit jusqu’à un certain trafic.

Self-hosted (VPS, Dokku, Docker) — plus de contrôle, coût fixe, nécessite une configuration serveur (Node.js, Nginx en reverse proxy, PM2 ou systemd pour le process management).

Pour la majorité des projets, Vercel est le choix le plus rapide et le plus simple. Pour les projets avec des contraintes de confidentialité des données ou des volumes très importants, le self-hosting devient intéressant.

Ressources pour aller plus loin

• Documentation officielle : nextjs.org/docs
• Templates officiels : github.com/vercel/next.js/tree/canary/examples
• Cours gratuit : Next.js Learn sur nextjs.org/learn

Vous avez un projet Next.js à lancer ? WebEngine développe des applications Next.js full-stack de A à Z. Décrivez votre projet ici.