HomePosts

Next.jsでMarkdownブログを作った

2022-08-06

Markdownで記事を書けるブログを作ってみました。

Gatsbyを使った方が簡単にできそうだったのですが、ある程度自分で作った方が後からカスタムしやすいかなと思い、今回はNext.jsを使用しました。

ソースコードはこちら

使用したライブラリは主に

  • gray-matter
    • ファイルの先頭に書いたメタ情報(front matterというらしい)を解析してくれる
--- title: Next.jsでMarkdownブログを作った date: '2022-08-06' ---
  • react-markdown
    • MarkdownをHTMLの要素に変換してくれる
  • react-syntax-highlighter
    • コードを載せたときにシンタックスハイライトしてくれる
  • Chakra UI
    • 豊富なコンポーネントを提供してくれるUIライブラリ
  • chakra-ui-markdown-renderer
    • Markdownから変換されたHTMLの要素をChakra UIのコンポーネントに変換してくれる

今後

インターンに参加した感想や研究のこと、技術的なメモを残していければいいなと思っています。

© 2022 Tsubasa Nakagawa. All rights reserved