Detalles sobre Rutas Dinámicas

Aquí hay información esencial que deberías conocer sobre rutas dinámicas.

Consumo de API externa o consulta a base de datos

Al igual que getStaticProps, getStaticPaths puede obtener datos de cualquier fuente. En nuestro ejemplo, getAllPostIds (usado por getStaticPaths) puede obtener datos desde un endpoint de API externa:

export async function getAllPostIds() {
  // En lugar del sistema de archivos,
  // obtenemos los datos del post desde un endpoint de API externa
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

Desarrollo vs Producción

• En desarrollo (npm run dev o yarn dev), getStaticPaths se ejecuta en cada solicitud.
• En producción, getStaticPaths se ejecuta durante el tiempo de construcción.

Fallback

Recuerda que devolvimos fallback: false desde getStaticPaths. ¿Qué significa esto?

Si fallback es false, cualquier ruta no devuelta por getStaticPaths resultará en una página 404.

Si fallback es true, el comportamiento de getStaticProps cambia:

• Las rutas devueltas por getStaticPaths se renderizarán a HTML durante el tiempo de construcción.
• Las rutas no generadas en el tiempo de construcción no resultarán en una página 404. En su lugar, Next.js servirá una versión "fallback" de la página en la primera solicitud a dicha ruta.
• En segundo plano, Next.js generará estáticamente la ruta solicitada. Solicitudes posteriores a la misma ruta servirán la página generada, como otras páginas pre-renderizadas en el tiempo de construcción.

Si fallback es blocking, las nuevas rutas se renderizarán en el servidor con getStaticProps y se almacenarán en caché para futuras solicitudes, por lo que solo ocurrirá una vez por ruta.

Esto va más allá del alcance de nuestras lecciones, pero puedes aprender más sobre fallback: true y fallback: 'blocking' en la documentación de fallback.

Rutas comodín (Catch-all)

Las rutas dinámicas pueden extenderse para capturar todas las rutas añadiendo tres puntos (...) dentro de los corchetes. Por ejemplo:

• pages/posts/[...id].js coincide con /posts/a, pero también con /posts/a/b, /posts/a/b/c y así sucesivamente.

Si haces esto, en getStaticPaths, debes devolver un array como valor de la clave id así:

return [
  {
    params: {
      // Genera estáticamente /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

Y params.id será un array en getStaticProps:

export async function getStaticProps({ params }) {
  // params.id será como ['a', 'b', 'c']
}

Consulta la documentación de rutas comodín para aprender más.

Router

Si deseas acceder al enrutador de Next.js, puedes hacerlo importando el hook useRouter desde next/router.

Páginas 404

Para crear una página 404 personalizada, crea pages/404.js. Este archivo se genera estáticamente durante el tiempo de construcción.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Página no encontrada</h1>;
}

Consulta nuestra documentación sobre Páginas de Error para aprender más.

Más ejemplos

Hemos creado varios ejemplos para ilustrar getStaticProps y getStaticPaths — revisa su código fuente para aprender más:

• Blog Starter usando archivos markdown (Demo)
• Ejemplo con WordPress (Demo)
• Ejemplo con DatoCMS (Demo)
• Ejemplo con TakeShape (Demo)
• Ejemplo con Sanity (Demo)

¡Eso es todo!

En la próxima lección, hablaremos sobre Rutas API en Next.js.