Implementar getStaticPaths

Primero, configuremos los archivos:

• Cree un archivo llamado [id].js dentro del directorio pages/posts.
• También, elimine first-post.js dentro del directorio pages/posts — ya no lo usaremos.

Luego, abra pages/posts/[id].js en su editor y pegue el siguiente código. Llenaremos los ... más adelante:

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

A continuación, abra lib/posts.js y agregue la siguiente función getAllPostIds al final. Esta devolverá la lista de nombres de archivos (excluyendo .md) en el directorio posts:

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
 
  // Devuelve un array con este formato:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

Importante: La lista devuelta no es solo un array de strings — debe ser un array de objetos con el formato mostrado en el comentario anterior. Cada objeto debe tener la clave params y contener un objeto con la clave id (porque estamos usando [id] en el nombre del archivo). De lo contrario, getStaticPaths fallará.

Finalmente, importaremos la función getAllPostIds y la usaremos dentro de getStaticPaths. Abra pages/posts/[id].js y copie el siguiente código encima del componente Post exportado:

import { getAllPostIds } from '../../lib/posts';
 
export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

• paths contiene el array de rutas conocidas devuelto por getAllPostIds(), que incluye los params definidos por pages/posts/[id].js. Más información en la documentación de la clave paths
• Por ahora ignore fallback: false — lo explicaremos más adelante.

¡Ya casi terminamos! Pero todavía necesitamos implementar getStaticProps. ¡Hagamos eso en la siguiente página!