この記事では、「 Next.js+MDXでMarkdownブログを構築したい！」
という方に向けて、自分が調べたことをまとめました。
この記事が少しでも、効果的な学習や時間の節約になれば嬉しいです！
Next.js+MDXでMarkdownブログを構築する
1. 何とともあれ、MDXについて公式ドキュメントを１読する
安定ですね。
公式でも紹介されている、静的サイト構築に適した技術です。
2. では、MDXとは何か？
MDXの基礎的な知識や実装について、いろいろ調べてみて、解像度を上げてみましょう。
以下の記事では、MDXに入門する手順がまとめられているので、参考になりました。
3. また、MDXと併用される、様々なライブラリについて知る
ここまでで、MDXは大体掴めてきましたが、
MDXと合わせて利用される、様々なライブラリについて知る必要があると感じました。
その理由としては、MDXを使った実際のプロジェクトを調べている際に、
vercelの公式テンプレートに掲載されている、プロジェクトが特に気になったからです。
いかに挙げておきます：
上記では、以下が採用されています
- Portfolio Starter Kit: Nextra
これらの、MDXと合わせて利用される、様々なライブラリについて関して、
以下が参考になりました。これで、実装の理解を深めていきます。
4.Nextra（MDXの静的サイト生成フレームワーク）について
ステップ３で紹介した、Portfolio Starter Kitというテンプレートで採用されていた、Nextraについて調べました。
有名どころだと、SWRやNext.jsの公式ドキュメントのサイトも、これで構築されているそうです。
以下がとても参考になりました。
5. おまけ: VSCodeの拡張機能である「Front Matter」
また、実際にMDXでブログサイトを構築し、VSCodeの拡張機能である「Front Matter」についても紹介されている記事がありました。
編集時や、ダッシュボードといった、mdxの管理が快適にできそうです。
正直、便利すぎて感動しました。
まとめ：Next.js+MDXでMarkdownブログを構築しよう
自分は、Next.jsでブログサイトを作成する際、以下のような考えがありました。
- 新しい技術にも触れながら、サイトを作成したい
- インフラやDBなどを考えずに、サクッと構築したい
- 普段から慣れている上、コンテンツの移行もしやすいので、Markdown形式で管理したい
同じようなニーズを持っている方、モダンなブログサイトを構築したい方は、ぜひここで紹介した素晴らしいリソースを参考にしてみてください！
🌱JavaScript/ React 初心者のためのコミュニティ
この記事の技術を中心に、プログラミング初心者向けの勉強会を定期開催しているので、
ぜひ参加して学習のモチベーションを高めてください！
１ヶ月間限定のDiscordを使ったアクセラレーションも、定期開催しています。
オンラインコミュニティで学習のコミットメントを高めたい方は、ぜひご参加ください！
おわりに
最後まで読んでいただき、ありがとうございます！
今後も引き続き、独学プログラマー向けの記事を作成していきます。
もし参考になったらスターと読者になるボタンを押して頂けると励みになります！
また、X(Twitter)では、積極的にプログラミング学習に関する投稿をしています。
様々な方と繋がり、学習のモチベーションを高めていけることを楽しみにしています！
Happy Hacking !
