Роутер страниц: Рендеринг Markdown

Для рендеринга контента в формате Markdown мы будем использовать библиотеку remark. Сначала установим её:

npm install remark remark-html

Затем откройте файл lib/posts.js и добавьте следующие импорты в начало файла:

import { remark } from 'remark';
import html from 'remark-html';

И обновите функцию getPostData() в том же файле, чтобы использовать remark:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // Используем gray-matter для раздела метаданных поста
  const matterResult = matter(fileContents);
 
  // Используем remark для преобразования Markdown в HTML-строку
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // Объединяем данные с id и contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

Важно: Мы добавили ключевое слово async к getPostData, потому что нам нужно использовать await для remark. async/await позволяют получать данные асинхронно.

Это означает, что нам нужно обновить getStaticProps в pages/posts/[id].js, чтобы использовать await при вызове getPostData:

export async function getStaticProps({ params }) {
  // Добавляем ключевое слово "await" следующим образом:
  const postData = await getPostData(params.id);
 
  return {
    props: {
      postData,
    },
  };
}

Наконец, обновите компонент Post в pages/posts/[id].js, чтобы рендерить contentHtml с помощью dangerouslySetInnerHTML:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

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

Теперь вы должны увидеть содержимое блога:

Как статически генерировать страницы с динамическими маршрутами

Мы почти закончили! Далее давайте доработаем каждую страницу.