Maison >interface Web >js tutoriel >Routage dans Next.js – Comment utiliser App Router dans vos prochaines applications

Routage dans Next.js – Comment utiliser App Router dans vos prochaines applications

Susan Sarandonoriginal: 2025-01-17 04:33:12859parcourir

Routing in Next.js – How to Use App Router in Your Next Apps

L'App Router de Next.js 14 révolutionne la gestion des itinéraires avec son système de routage basé sur des fichiers dans le répertoire app/. Cette approche favorise une meilleure structure, modularité et performances des applications. Ce guide décrit la mise en œuvre efficace d'App Router dans vos projets Next.js.

Comprendre le routeur d'applications

L'App Router redéfinit la définition de l'itinéraire. La structure du répertoire correspond directement aux chemins d’URL. Les dossiers au sein de /app deviennent des itinéraires, simplifiant les mises en page imbriquées, le regroupement d'itinéraires et la récupération de données, en particulier dans les applications plus volumineuses.

Configuration du routeur d'application

Créez un projet Next.js (si nécessaire) : npx create-next-app@latest
L'App Router est activé par défaut dans Next.js 14 via le répertoire /app. Aucune configuration supplémentaire n'est nécessaire.

Routage de base

Les fichiers et dossiers au sein de /app sont automatiquement mappés aux itinéraires :

<code>app/
 ├── page.tsx           # Homepage ("/")
 ├── about/
 │    └── page.tsx      # About page ("/about")
 └── blog/
      ├── page.tsx      # Blog index ("/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>

Itinéraires statiques : app/about/page.tsx mappe vers /about.
Itinéraires dynamiques : Les crochets ([]) définissent des segments dynamiques. app/blog/[slug]/page.tsx gère les itinéraires comme /blog/my-post.

Mise en page et imbrication

L'App Router simplifie la création et la réutilisation de mises en page.

Création de mises en page :

Un fichier layout.tsx dans un dossier s'applique à toutes les pages et composants de ce dossier.

<code>app/
 ├── layout.tsx         # App-wide layout
 ├── about/
 │    ├── layout.tsx    # About page layout
 │    └── page.tsx      # About page content</code>

<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}</code>

Itinéraires et mises en page imbriqués :

Les mises en page s'imbriquent, fournissant une interface utilisateur cohérente sur les itinéraires imbriqués.

<code>app/
 ├── dashboard/
 │    ├── layout.tsx         # Dashboard layout
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings ("/dashboard/settings")</code>

La disposition /dashboard/ s'applique à la fois à /dashboard et à /dashboard/settings.

Groupes d'itinéraires

Les groupes de routage organisent le code sans modifier les URL à l'aide de dossiers entre parenthèses.

<code>app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"</code>

/profile et /settings sont regroupés sous (dashboard) pour l'organisation du code.

Itinéraires fourre-tout

Gérez plusieurs segments d'URL avec ... dans le nom de fichier : [...]/page.tsx capture /blog/a/b/c.

États d'erreur et de chargement

Next.js 14 utilise error.tsx et loading.tsx pour la gestion des erreurs et le chargement des indicateurs dans les routes.

Récupération de données

Utilisez async/await ou des hooks pour la récupération de données côté serveur directement dans les composants.

<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{JSON.stringify(data)}</div>;
}</code>

Actions du serveur

Gérez la logique côté serveur (par exemple, les soumissions de formulaires) au sein des composants à l'aide des actions du serveur.

Déploiement

Le déploiement d'applications App Router est identique aux déploiements Next.js standard. Vercel est fortement recommandé pour des performances optimales.

Le routeur d'applications Next.js 14 offre une approche flexible et modulaire pour créer des applications évolutives et hautes performances avec un code plus propre. Ce guide fournit une base pour tirer parti de ses capacités dans vos projets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Static define if for catch Directory Error using map JS default this ui router Foundation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Configuration de Vite avec TypeScript pour une liste de tâches simpleArticle suivant：Configuration de Vite avec TypeScript pour une liste de tâches simple

Articles Liés

Voir plus