La ruta de la página depende de datos externos

En la lección anterior, cubrimos el caso donde el contenido de la página depende de datos externos. Utilizamos getStaticProps para obtener los datos necesarios para renderizar la página de índice.

En esta lección, hablaremos sobre el caso donde cada ruta de página depende de datos externos. Next.js te permite generar páginas estáticamente con rutas que dependen de datos externos. Esto permite URLs dinámicas en Next.js.

Cómo generar páginas estáticamente con rutas dinámicas

En nuestro caso, queremos crear rutas dinámicas para publicaciones de blog:

• Queremos que cada publicación tenga la ruta /posts/<id>, donde <id> es el nombre del archivo markdown dentro del directorio principal posts.
• Como tenemos ssg-ssr.md y pre-rendering.md, queremos que las rutas sean /posts/ssg-ssr y /posts/pre-rendering.

Resumen de los pasos

Podemos hacer esto siguiendo estos pasos. No es necesario que hagas estos cambios todavía — lo haremos todo en la siguiente página.

Primero, crearemos una página llamada [id].js dentro de pages/posts. Las páginas que comienzan con [ y terminan con ] son rutas dinámicas en Next.js.

En pages/posts/[id].js, escribiremos código que renderizará una página de publicación — al igual que otras páginas que hemos creado.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

Ahora, esto es lo nuevo: Exportaremos una función asíncrona llamada getStaticPaths desde esta página. En esta función, necesitamos devolver una lista de valores posibles para id.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Devuelve una lista de valores posibles para id
}

Finalmente, necesitamos implementar getStaticProps nuevamente — esta vez, para obtener los datos necesarios para la publicación de blog con un id dado. A getStaticProps se le pasa params, que contiene id (porque el nombre del archivo es [id].js).

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Devuelve una lista de valores posibles para id
}
 
export async function getStaticProps({ params }) {
  // Obtiene los datos necesarios para la publicación de blog usando params.id
}

Aquí hay un resumen gráfico de lo que acabamos de explicar:

¡Intentemos esto en la siguiente página!