Frontend Academy · Leçon

Routeur Pages ou routeur App

Routeur Pages ou routeur App est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Deux routeurs, un seul framework

Next.js possède deux systèmes de routage : l'ancien routeur Pages (répertoire pages/) et le plus récent routeur App (répertoire app/, Next 13 et versions ultérieures). Les deux fonctionnent encore avec Next 14 et 15.

Routeur Pages — Routage fondé sur les fichiers

Chaque fichier sous pages/ devient une route. Les segments dynamiques utilisent des crochets : pages/users/[id].tsx correspond à /users/123.

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Routeur Pages — Récupération des données

Des exportations spéciales déclarent le comportement de récupération : getStaticProps (SSG), getServerSideProps (SSR), getStaticPaths (SSG avec des routes dynamiques).

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

Routeur App — Routage fondé sur les dossiers

Le routeur App utilise les dossiers comme segments de route. Un fichier page.tsx à l'intérieur d'un dossier définit la page.

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

Routeur App — Fichiers spéciaux

Les fichiers propres à chaque segment fournissent de puissants outils : layout.tsx (interface persistante autour des enfants), loading.tsx (contenu de secours de Suspense), error.tsx (limite d'erreur), not-found.tsx.

Mises en page imbriquées

Les mises en page du routeur App entourent les routes imbriquées et persistent lors de la navigation : aucun remontage.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

Récupération des données avec le routeur App

Les composants serveur peuvent être asynchrones et récupérer directement les données : aucun getServerSideProps ni getStaticProps. Le composant s'exécute sur le serveur et n'envoie que du HTML au client.

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

Composants client avec le routeur App

Ajoutez 'use client' en haut d'un fichier pour marquer son composant comme composant client (interactif, il s'exécute dans le navigateur).

// app/Counter.tsx
'use client';
import { useState } from 'react';

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

Routes API ou gestionnaires de routes

Routeur Pages : pages/api/users.ts exporte une fonction par défaut avec req/res. Routeur App : app/api/users/route.ts exporte les méthodes HTTP (GET, POST) sous forme d'exportations nommées utilisant les objets Request/Response standard.

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

Stratégie de migration

Les deux routeurs peuvent coexister dans le même projet : déplacez progressivement les pages, une à la fois. Le routeur App est prioritaire en cas de conflit.

Quand utiliser lequel

Nouveaux projets : routeur App (plus puissant et au cœur des investissements actuels). Projets existants avec le routeur Pages : restez-y ou migrez progressivement. Petits sites statiques n'ayant pas besoin de mises en page ni de RSC : les deux conviennent.

Vérification rapide

Comment marquez-vous un composant comme composant client dans le routeur App de Next.js ?

Récapitulatif : routeur Pages et routeur App

Routeur Pages : fondé sur les fichiers, avec getStaticProps/getServerSideProps. Routeur App (Next 13+) : fondé sur les dossiers, avec des composants serveur asynchrones, des mises en page imbriquées et des fichiers de chargement et d'erreur. Marquez l'interactivité côté client avec 'use client'. Routes API : pages/api/* contre app/api/*/route.ts, avec des exports correspondant aux méthodes HTTP. Les deux peuvent coexister ; le développement actif se concentre désormais sur le routeur App.

Questions Fréquemment Posées

La leçon « Routeur Pages ou routeur App » est-elle gratuite ?

Oui — le texte complet de « Routeur Pages ou routeur App » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routeur Pages ou routeur App » ?

Comparez les paradigmes de routage de Next.js : le routeur Pages fondé sur les fichiers et le nouveau routeur App avec ses mises en page imbriquées, ses états de chargement et ses frontières d’erreur. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Routeur Pages ou routeur App » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy