Topics

Next.js, un framework de développement web populaire, a introduit le nouveau App Router comme système de routage par défaut dans sa version 13.

Je suis sûr que certaines personnes travaillant sur des projets utilisant à la fois Pages Router et App Router ne savent pas quelle méthode utiliser. C'est mon cas !

Il existe notamment des différences importantes entre le routeur de pages et le routeur d'applications dans des domaines qui touchent au cœur du développement d'applications, comme la définition des routes en fonction de la structure des fichiers, la gestion des parties dynamiques des URL, le fonctionnement du rendu et la récupération des données à partir des API.

Pour me concentrer sur les points « souvent confondus », voici un bref rappel des principales différences entre Pages Router et App Router !

Différences dans le routage des fichiers

Pages Router : La simplicité de la conversion des noms de fichiers en chemins d’accès

Placé dans le répertoire des pages.js, .jsx, .ts, .tsxC'est aussi simple que le nom du fichier qui devient le chemin d'accès à l'URL.

exemple:src/page/about.tsx⇒ Le routage est/aboutCe sera.

Routeur d'applications : Organisation par dossier et nom de fichier spécifique

Routeur d'applicationssrc/appVous pouvez créer un routage en plaçant des dossiers et des fichiers en dessous.

Toutefois, si vous ajoutez un nom de fichier spécifique appelé « page » au nom de fichier utilisé pour le routage, il sera traité comme le contenu de la page correspondant à ce chemin.

exemple:src/app/about/page.tsx⇒ Le routage est/aboutCe sera.

Fichiers spéciaux qui caractérisent App Router

Outre le fichier page.tsx, App Router contient d'autres fichiers importants.

app/
├── page.tsx --> Contenu de la page. C'est le fichier que vous utiliserez le plus souvent.

├── route.tsx --> Définition de l'API (ne peut pas coexister avec page.js).

├── layout.tsx --> Apparence générale.

├── loading.tsx --> Écran de chargement.

├── error.tsx --> Écran d'erreur.

├── global-error.tsx --> Écran d'erreur global.

├── template.tsx --> Apparence générale (réinitialisation de la mise en page).

├── default.tsx --> Écran par défaut.

└── not-found.tsx --> Écran affiché lorsque la fonction notFound est levée.

Ce qui m'a personnellement surpris, c'est le fichier not-found.tsx. Il suffit de préparer cette page pour qu'elle s'affiche automatiquement lorsqu'on accède à une URL inexistante. J'ai été impressionné par sa simplicité d'implémentation.

Différences de rendu

Les composants du routeur de pages sont essentiellement conçus pour être interactifs côté client, et le rendu côté serveur est principalement effectué pour accélérer l'affichage initial et à des fins de référencement (SEO).useState ou useEffectVous pouvez utiliser librement des Hooks React comme ceux-ci dans votre composant de page et ses composants enfants.

En revanche, App Routerapp/Les composants dansSauf indication contraire, il sera traité par défaut comme un composant serveur..DoncuseState ou useEffect tel queLes hooks React ne sont pas disponiblesActions côté client, telles que onClickLes gestionnaires d'événements ne sont pas disponibles non plus.

Donc, pour créer une CSR à l'aide d'App Router,use clientÉcrire:

use client

Composant serveur et composant clientDéclarer les limitesest.use clientSi vous le déclarez, non seulement ce composant, mais aussi toutes ses importations seront considérés comme des composants clients.

Routage dynamique [○○]

Next.js fournit un mécanisme permettant de gérer les « URL dynamiques », où une partie de l'URL change en fonction de l'utilisateur ou du contenu, comme par exemple les pages de détails d'articles de blog ou d'actualités.Routage dynamiqueest.

Par exemple, supposons qu'il existe un lien qui vous amène à l'article A et à l'article B.

import Link from "next/link";
const linkStyle=`ext-lg font-bold border-b border-primary px-1`

export default function page() {
  return (
    <div>
      <div className="flex gap-6">
        <Link href="/post/A" className={linkStyle}>記事Aへのリンク</Link>
        <Link href="/post/B" className={linkStyle}>記事Bへのリンク</Link>
      </div>
    </div>
  );
}

Destinations liées

Si vous souhaitez utiliser le routage dynamique,[slug]Si vous créez un fichier appelépost/Amaispost/BMais vous pouvez utiliser le même modèle.
*La dénomination entre crochets [ ] est facultative.slugCe n'est pas forcément le cas.

Routeur d'applications

/app/post/[slug]/page.tsx

export default aysinc function PostPage({ params }: { params: Promise<{ slug: string }>) {
  const {slug}= await params;
  return (
    <div>
      <h1>記事: {slug}</h1>
    </div>
  );
}

paramsNous utilisons.params.slugvers l'URL[slug]La pièce sera incluse.

※ paramsAuparavant, l'acquisition des paramètres n'avait pas besoin d'être asynchrone, mais à partir de Next.js 15, elle est devenue asynchrone.propsIl semble que vous deviez le définir comme un type Promise.

Pour les pages Rouer

/pages/post/[slug].tsx

import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>記事: {slug}</h1>
    </div>
  );
}

useRouterNous utilisons.router.query.slugvers l'URL[slug]La valeur de la pièce sera saisie.

méthode d'acquisition de données API

microCMS, qui est largement présenté dans cette chronique Liberogic, fonctionne bien avec des frameworks comme Next.js.

Routeur d'applications

Faites simplefetchouaysnc awaitVous pouvez utiliser

cependant,use clientLe fichier qui contient cette déclaration deviendra un CSR.aysnc awaitne sera plus utilisable !

async function getPost() {
  const res = await fetch(`https://.../api/data/`);

  // エラーハンドリング例
  if (!res.ok) {
     throw new Error(`Failed to fetch post: ${res.status}`);
  }

  return res.json();
}

Callee

export default function Example() {
   const data = await getPost()
   // ... data を使って表示 ...
}

Pour les pages du routeur

getStaticPropsLes données obtenues à l'aide depropsau composant de page.

export async function getServerSideProps(context) {
  // context.req, context.res などにアクセス可能
  const res = await fetch(`https://.../api/data/`, {
     headers: { Cookie: context.req.headers.cookie } // 例: Cookieを渡す
  });
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

Callee

export default function Example({ data }) {
  // ... data を使って表示 ...
}

Comprenez les deux routeurs et maîtrisez Next.js !

Dans mon cas, le premier projet pour lequel j'ai utilisé Next.js était App Router.

Plus tard, alors que je travaillais sur un autre projet et que j'utilisais Pages Router, je me suis demandé : « Lors de la création d'une nouvelle page, le nom du fichier doit-il être index.tsx ou page.tsx ? »

Cet article ne couvre qu'une petite partie de Next.js, mais en examinant les différences entre App Router et Pages Router, j'ai pu me faire une idée plus claire de son fonctionnement.

Personnellement, j'apprécie la facilité avec laquelle on peut écrire des App Routers, mais j'aimerais aussi pouvoir gérer des projets Pages Router.

L'idéal serait d'acquérir une compréhension plus approfondie de Next.js et de pouvoir utiliser différents routeurs en fonction du projet ou du travail !