Implementar getStaticProps

Necesitamos obtener los datos necesarios para renderizar la publicación con el id dado.

Para hacerlo, abre nuevamente lib/posts.js y agrega la siguiente función getPostData al final. Esta función devolverá los datos de la publicación basados en el id:

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Usa gray-matter para analizar la sección de metadatos de la publicación
  const matterResult = matter(fileContents);
 
  // Combina los datos con el id
  return {
    id,
    ...matterResult.data,
  };
}

Luego, abre pages/posts/[id].js y reemplaza esta línea:

import { getAllPostIds } from '../../lib/posts';

con el siguiente código:

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

La página de publicación ahora usa la función getPostData en getStaticProps para obtener los datos de la publicación y devolverlos como props.

Ahora, actualicemos el componente Post para usar postData. En pages/posts/[id].js reemplaza el componente Post exportado con el siguiente código:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

¡Eso es todo! Intenta visitar estas páginas:

• http://localhost:3000/posts/ssg-ssr
• http://localhost:3000/posts/pre-rendering

Deberías poder ver los datos del blog para cada página:

¡Excelente! Hemos generado con éxito rutas dinámicas.

¿Algo anda mal?

Si encuentras un error, asegúrate de que tus archivos tengan el código correcto:

• pages/posts/[id].js debería verse así.
• lib/posts.js debería verse así.
• (Si aún no funciona) El código restante debería verse así.

Si todavía tienes problemas, no dudes en preguntar a la comunidad en GitHub Discussions. Sería útil si pudieras subir tu código a GitHub y compartir el enlace para que otros puedan revisarlo.

Resumen

Nuevamente, aquí está el resumen gráfico de lo que hemos hecho:

Todavía no hemos mostrado el contenido markdown del blog. Hagamos esto a continuación.