getStaticPaths

Si una página tiene Rutas Dinámicas y usa getStaticProps, necesita definir una lista de rutas para ser generadas estáticamente.

Cuando exportas una función llamada getStaticPaths (Generación de Sitios Estáticos) desde una página que usa rutas dinámicas, Next.js generará previamente de forma estática todas las rutas especificadas por getStaticPaths.

import type {
  InferGetStaticPropsType,
  GetStaticProps,
  GetStaticPaths,
} from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getStaticPaths = (async () => {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // Ver la sección "paths" más abajo
    ],
    fallback: true, // false o "blocking"
  }
}) satisfies GetStaticPaths

export const getStaticProps = (async (context) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}) satisfies GetStaticProps<{
  repo: Repo
}>

export default function Page({
  repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return repo.stargazers_count
}

export async function getStaticPaths() {
  return {
    paths: [
      {
        params: {
          name: 'next.js',
        },
      }, // Ver la sección "paths" más abajo
    ],
    fallback: true, // false o "blocking"
  }
}

export async function getStaticProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}

export default function Page({ repo }) {
  return repo.stargazers_count
}

La referencia de la API getStaticPaths cubre todos los parámetros y props que pueden usarse con getStaticPaths.

¿Cuándo debería usar getStaticPaths?

Deberías usar getStaticPaths si estás generando previamente páginas estáticas que usan rutas dinámicas y:

• Los datos provienen de un CMS headless
• Los datos provienen de una base de datos
• Los datos provienen del sistema de archivos
• Los datos pueden almacenarse en caché públicamente (no específicos del usuario)
• La página debe generarse previamente (para SEO) y ser muy rápida — getStaticProps genera archivos HTML y JSON, ambos pueden almacenarse en caché por un CDN para mejorar el rendimiento

¿Cuándo se ejecuta getStaticPaths?

getStaticPaths solo se ejecutará durante la compilación en producción, no se llamará durante el tiempo de ejecución. Puedes validar que el código dentro de getStaticPaths se elimina del bundle del lado del cliente con esta herramienta.

¿Cómo se ejecuta getStaticProps en relación con getStaticPaths?

• getStaticProps se ejecuta durante next build para cualquier paths devuelto durante la compilación
• getStaticProps se ejecuta en segundo plano cuando se usa fallback: true
• getStaticProps se llama antes del renderizado inicial cuando se usa fallback: blocking

¿Dónde puedo usar getStaticPaths?

• getStaticPaths debe usarse con getStaticProps
• No puedes usar getStaticPaths con getServerSideProps
• Puedes exportar getStaticPaths desde una Ruta Dinámica que también use getStaticProps
• No puedes exportar getStaticPaths desde un archivo que no sea una página (ej. tu carpeta components)
• Debes exportar getStaticPaths como una función independiente, no como una propiedad del componente de página

Se ejecuta en cada solicitud en desarrollo

En desarrollo (next dev), getStaticPaths se llamará en cada solicitud.

Generación de rutas bajo demanda

getStaticPaths te permite controlar qué páginas se generan durante la compilación en lugar de hacerlo bajo demanda con fallback. Generar más páginas durante la compilación hará que las compilaciones sean más lentas.

Puedes diferir la generación de todas las páginas bajo demanda devolviendo un array vacío para paths. Esto puede ser especialmente útil al implementar tu aplicación Next.js en múltiples entornos. Por ejemplo, puedes tener compilaciones más rápidas generando todas las páginas bajo demanda para vistas previas (pero no para compilaciones de producción). Esto es útil para sitios con cientos/miles de páginas estáticas.

export async function getStaticPaths() {
  // Cuando esto es true (en entornos de vista previa) no
  // pregeneres ninguna página estática
  // (compilaciones más rápidas, pero carga inicial de página más lenta)
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: 'blocking',
    }
  }

  // Llama a un endpoint API externo para obtener posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Obtén las rutas que queremos pregenerar basadas en posts
  // En entornos de producción, pregenera todas las páginas
  // (compilaciones más lentas, pero carga inicial de página más rápida)
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // { fallback: false } significa que otras rutas deberían devolver 404
  return { paths, fallback: false }
}