Topics

Next.js, un popular marco de desarrollo web, introdujo el nuevo App Router como su sistema de enrutamiento predeterminado en la versión 13.

Estoy seguro de que hay personas involucradas en proyectos que usan tanto Pages Router como App Router y no saben cómo escribirlo. ¡Ese soy yo!

En particular, existen diferencias significativas entre Pages Router y App Router en áreas relacionadas con el núcleo del desarrollo de aplicaciones, como cómo definir rutas basadas en la estructura de archivos, cómo manejar partes dinámicas de las URL, cómo funciona la representación y cómo recuperar datos de las API.

Centrándonos en los puntos que "frecuentemente se confunden", enumeraré brevemente las principales diferencias entre Pages Router y App Router como recordatorio.

Diferencias en el enrutamiento de archivos

Pages Router: La simplicidad de convertir nombres de archivos en rutas

Ubicado bajo el directorio de páginas.js, .jsx, .ts, .tsxEs tan simple como que el nombre del archivo se convierta en la ruta URL.

ejemplo:src/page/about.tsx⇒ El enrutamiento es/aboutAsí será.

App Router: Organización por carpeta y nombre de archivo específico

Enrutador de aplicacionessrc/appPuedes enrutar colocando carpetas y archivos debajo.

Sin embargo, si agrega un nombre de archivo específico llamado "página" al nombre de archivo utilizado para el enrutamiento, se tratará como el contenido de la página correspondiente a esa ruta.

ejemplo:src/app/about/page.tsx⇒ El enrutamiento es/aboutAsí será.

Archivos especiales que caracterizan a App Router

Además de page.tsx, hay otros archivos importantes en App Router.

app/
├── page.tsx --> Contenido de la página. Este es el archivo que usarás con más frecuencia.
├── route.tsx --> Definición de la API (no puede coexistir con page.js).
├── layout.tsx --> Apariencia común.
├── loading.tsx --> Pantalla de carga.
├── error.tsx --> Pantalla de error.
├── global-error.tsx --> Pantalla de error global.
├── template.tsx --> Apariencia común (restablecer diseño).
├── default.tsx --> Pantalla predeterminada.
└── not-found.tsx --> Pantalla que se muestra al ejecutar la función notFound.

Lo que me sorprendió personalmente fue not-found.tsx. Con solo preparar esta página, se mostrará automáticamente al acceder a una URL inexistente. Me impresionó lo fácil que fue implementarla.

Diferencias de representación

Los componentes del Pages Router están diseñados básicamente para ser interactivos en el lado del cliente, y la representación en el lado del servidor se realiza principalmente para acelerar la visualización inicial y para fines de SEO.useState o useEffectPuede utilizar libremente React Hooks como estos en su componente de página y sus componentes secundarios.

Por otro lado, App Routerapp/Los componentes enA menos que se especifique explícitamente, se tratará como un componente de servidor de forma predeterminada..Por lo tantouseState o useEffect comoLos ganchos de React no están disponiblesAcciones del lado del cliente, como onClickLos controladores de eventos tampoco están disponibles.

Entonces, para hacer un CSR usando App Router,use clientEscribir:

use client

Componente de servidor y componente de clienteDeclarando límiteses.use clientSi lo declara, no sólo ese componente sino todas sus importaciones se considerarán Componentes del Cliente.

Enrutamiento dinámico [○○]

Next.js proporciona un mecanismo para manejar "URL dinámicas" donde parte de la URL cambia dependiendo del usuario o del contenido, como páginas de detalles de blogs o artículos de noticias.Enrutamiento dinámicoes.

Por ejemplo, supongamos que hay un enlace que lleva al artículo A y al artículo 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>
  );
}

Destinos de enlace

Si desea enrutamiento dinámico,[slug]Si crea un archivo llamadopost/Aperopost/BPero puedes usar la misma plantilla.
*El nombre entre [ ] es opcional.slugNo tiene por qué ser así

Enrutador de aplicaciones

/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>
  );
}

paramsNosotros usamos.params.sluga la URL[slug]La pieza será incluida.

※ paramsAnteriormente, la adquisición de parámetros no necesitaba ser asincrónica, pero desde Next.js 15 en adelante, se cambió para que sea asincrónica.propsParece que necesitas definirlo como un tipo Promesa.

Para 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>
  );
}

useRouterNosotros usamos.router.query.sluga la URL[slug]Se ingresará el valor de la pieza.

Cómo obtener datos de la API

microCMS, que aparece destacado en esta columna de Liberogic, funciona bien con marcos como Next.js.

Enrutador de aplicaciones

Mantenlo simplefetchoaysnc awaitPuedes utilizar

sin embargo,use clientEl archivo que declara esto se convertirá en un CSR.aysnc await¡Ya no se podrá utilizar!

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();
}

Destinatario

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

Para el enrutador de páginas

getStaticPropsLos datos obtenidos mediantepropsal componente de página.

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,
    },
  };
}

Destinatario

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

¡Comprende los dos enrutadores y domina Next.js!

En mi caso, el primer proyecto en el que utilicé Next.js fue App Router.

Más tarde, cuando estaba trabajando en otro proyecto y usando Pages Router, me pregunté: "Al crear una nueva página, ¿el nombre del archivo debe ser index.tsx o page.tsx?"

Este artículo solo cubre una pequeña parte de Next.js, pero al analizar las diferencias entre App Router y Pages Router, pude obtener una imagen más clara en mi mente.

Personalmente, me gusta lo fácil que es escribir App Router, pero también me gustaría poder manejar proyectos de Pages Router.

¡La situación ideal sería obtener una comprensión más profunda de Next.js y poder utilizar diferentes enrutadores según el proyecto o trabajo!