Роутер страниц: реализация getStaticPaths

Сначала настроим файлы:

Создайте файл [id].js в директории pages/posts.
Также удалите first-post.js из директории pages/posts — он больше не понадобится.

Затем откройте pages/posts/[id].js в редакторе и вставьте следующий код. Позже мы заполним ...:

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

Далее откройте lib/posts.js и добавьте следующую функцию getAllPostIds в конце файла. Она возвращает список имен файлов (без расширения .md) из директории posts:

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
 
  // Возвращает массив вида:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

Важно: Возвращаемый список — это не просто массив строк. Он должен быть массивом объектов, как показано в комментарии выше. Каждый объект должен содержать ключ params с вложенным объектом, имеющим ключ id (поскольку мы используем [id] в имени файла). В противном случае функция getStaticPaths завершится ошибкой.

Наконец, импортируем функцию getAllPostIds и используем её внутри getStaticPaths. Откройте pages/posts/[id].js и скопируйте следующий код перед экспортируемым компонентом Post:

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

paths содержит массив известных путей, возвращаемых getAllPostIds(), включая параметры, определенные в pages/posts/[id].js. Подробнее в документации по ключу paths
Пока не обращайте внимания на fallback: false — мы объясним это позже.

Мы почти закончили — осталось только реализовать getStaticProps. Займёмся этим на следующей странице!

Реализация getStaticPaths