Routage dans Next.js – Comment utiliser App Router dans vos prochaines applications-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2025-01-17 04:33:12

original

855 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

/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>

Copier après la connexion

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!