0Pricing
React Academy · Leçon

Conventions de fichiers de l’App Router

Découvrez le répertoire app/, ainsi que les fichiers page.tsx, layout.tsx, loading.tsx et error.tsx.

Conventions de fichiers de l’App Router est une leçon React 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Le répertoire app/

Le routeur App de Next.js utilise le répertoire app/. Les dossiers définissent les segments d’URL ; les fichiers spéciaux présents dans les dossiers définissent le comportement de chaque segment.

page.tsx — L’interface de la route

page.tsx exporte le composant React rendu pour un segment d’URL. Sans page.tsx, la route n’est pas accessible publiquement.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Coquilles persistantes

layout.tsx enveloppe les routes enfants. Il persiste entre les navigations : son état n’est pas réinitialisé lorsque la route enfant change.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Interface de chargement instantanée

loading.tsx s’affiche immédiatement pendant le chargement des données asynchrones de la page. Il enveloppe la page dans une limite Suspense automatique.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Limites d’erreur

error.tsx est une limite d’erreur React pour le segment. Il reçoit l’erreur et une fonction reset pour réessayer.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — Interface 404

not-found.tsx s’affiche lorsque notFound() est appelé depuis un composant serveur ou lorsqu’aucune route ne correspond.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — M remontage des mises en page

template.tsx ressemble à layout.tsx, mais crée une nouvelle instance à chaque navigation : l’état est réinitialisé et les effets sont réexécutés. Utilisez-le pour les animations ou l’analyse.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Routes d’API

route.ts (et non route.tsx) exporte des gestionnaires de méthodes HTTP (GET, POST, etc.) pour créer des points d’accès d’API dans le répertoire app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

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

middleware.ts — Intergiciel Edge

middleware.ts, situé à la racine du projet, s’exécute avant chaque requête correspondante à la périphérie — pour vérifier l’authentification, effectuer des redirections et réécrire des en-têtes.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Colocalisation

Vous pouvez colocaliser des fichiers qui ne définissent pas de route (composants, utilitaires, tests) dans les dossiers app/. Seuls les fichiers portant les noms des conventions spéciales (page, layout, etc.) sont traités comme des segments de route.

Mises en page imbriquées

Chaque dossier peut avoir son propre layout.tsx. La mise en page imbriquée enveloppe uniquement les enfants de son segment et se compose avec la mise en page parente située au-dessus.

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

Vérification rapide

Quel fichier du routeur d’application fournit une solution de repli Suspense automatique pendant le chargement des données asynchrones d’une page ?

Récapitulatif

Le routeur d’application utilise des fichiers spéciaux : page.tsx (interface de route), layout.tsx (coquille persistante), loading.tsx (solution de repli Suspense), error.tsx (limite d’erreur), not-found.tsx (404), route.ts (API) et middleware.ts (logique à la périphérie).

Questions Fréquemment Posées

La leçon « Conventions de fichiers de l’App Router » est-elle gratuite ?

Oui — le texte complet de « Conventions de fichiers de l’App Router » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Conventions de fichiers de l’App Router » ?

Découvrez le répertoire app/, ainsi que les fichiers page.tsx, layout.tsx, loading.tsx et error.tsx. Tu pratiques React 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 React Academy ?

Aucune expérience préalable n'est requise. React 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 « Conventions de fichiers de l’App Router » ?

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 React Academy ?

Oui. Chaque leçon React 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

  1. Conventions de fichiers de l’App Router
  2. Composants serveur et client dans Next.js
  3. Routes dynamiques et groupes de routes
  4. API de métadonnées et SEO dans l’App Router
← Retour à React Academy