Реализация getStaticProps

Нам необходимо получить данные для отображения поста с заданным id.

Для этого снова откройте lib/posts.js и добавьте следующую функцию getPostData в конце файла. Она будет возвращать данные поста по его id:

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Используем gray-matter для раздела метаданных поста
  const matterResult = matter(fileContents);
 
  // Объединяем данные с id
  return {
    id,
    ...matterResult.data,
  };
}

Затем откройте pages/posts/[id].js и замените строку:

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

на следующий код:

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

Теперь страница поста использует функцию getPostData в getStaticProps для получения данных поста и возвращает их в качестве пропсов.

Обновим компонент Post, чтобы он использовал postData. В pages/posts/[id].js замените экспортируемый компонент Post следующим кодом:

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

Готово! Попробуйте посетить эти страницы:

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

Вы должны увидеть данные блога для каждой страницы:

Отлично! Мы успешно сгенерировали динамические маршруты.

Возникли проблемы?

Если вы столкнулись с ошибкой, убедитесь, что ваши файлы содержат правильный код:

• pages/posts/[id].js должен выглядеть так.
• lib/posts.js должен выглядеть так.
• (Если всё ещё не работает) Остальной код должен выглядеть так.

Если вы всё ещё застряли, обратитесь к сообществу на GitHub Discussions. Будет полезно, если вы сможете загрузить свой код на GitHub и предоставить ссылку, чтобы другие могли посмотреть.

Итог

Вот графическое резюме того, что мы сделали:

Мы ещё не отобразили markdown-содержимое блога. Давайте сделаем это дальше.