Next.js + MDXでブログを自作してみた【前編：技術選定】

きっかけ

私が普段メインでやっているのはゲーム開発ですが、技術それ自体にもかなり興味があり、技術ブログを作りたいと思っていました。
HTML5ゲームを作っているというのもあり、Web技術にも興味があったので、既存のブログサービスを使わずに自作してみようと思いました。
本記事はそのうちの前編であり、どの技術を使ってブログを自作するかということについて解説していきます。

やりたかったこと

私がやりたかったことは以下の通りです。

簡単なブログでいい
表示が高速
執筆しやすい
OGP周りがちゃんとしている

簡単なブログでいい

タグ検索機能やコメント機能などは後でほしくなったらつければいいので、まずは技術記事を公開できる仕組みを備えていれば十分だと思っていました。

表示が高速

元々当サイトはReactを用いてSPA（Single Page Application、単一のページでコンテンツの切り替えを行う設計のこと）として実装しているので、最初の読込さえ終われば後は非常に高速で画面が遷移していきます。
ブログも同じぐらい表示が高速だといいなと思っていました。

執筆しやすい

例えば、以下は望ましくないと考えていました。

HTMLタグを直書きしなければならない
投稿の度に記事一覧なども変更しなければならない
記事をアップロードするのに手間がかかる

ブログができても記事が執筆しやすくないと続かなくなってしまうのは目に見えていましたので、執筆しやすさは重視していました。

OGP周りがちゃんとしている

OGP（Open Graph Protocol）とは、FacebookやTwitterなどのSNSでWebページのURLがシェアされたときに、そのページのタイトルやサムネイル画像などを表示させるための規格です。
例えば、OGPがしっかり設定されているWebページのURLをTwitterに張り付けると、以下のようにツイートの下部にサムネイル画像やタイトルが表示されます。

OGPがしっかり設定されていないとツイートの下部にURLの文字列が表示されるだけになってしまい、非常に味気ない上に記事を見てもらいにくいにくくなりそうだったので、OGP周りはしっかり設定したかったです。

MDX

MDXとは

Markdown for the component era

直訳すると「コンポーネント時代のためのマークダウン」ですが、ここでコンポーネントとはReactのComponentを指します。
MDXは、Markdown + JSXがその名前の由来で、マークダウン記法の中でReactのJSXが使えるようになります。

MDXの利点

例えば、先ほどのOGP周りがちゃんとしているの節のソースコードは以下のようになっています。

post.mdx


  ### OGP周りがちゃんとしている
  OGP（Open Graph Protocol）とは、FacebookやTwitterなどのSNSでWebページのURLがシェア
  されたときに、そのページのタイトルやサムネイル画像などを表示させるための規格です。  
  例えば、OGPがしっかり設定されているWebページのURLをTwitterに張り付けると、以下のように
  ツイートの下部にサムネイル画像やタイトルが表示されます。  
 
  <TwitterTweetEmbed tweetId="1616767207236829184" />

マークダウン記法でおなじみのHeadingを表す#が最初に使われているほか、後半では<TwitterTweetEmbed />というJSX Elementがあります。
これは、その名の通りTwitterのツイートを埋め込むことができるものです。
同じ内容をTwitter公式が出している以下のような埋め込み用のHTMLタグを使って表示するよりもはるかに簡潔です。

  
  <blockquote class="twitter-tweet">
    <p lang="ja" dir="ltr">
      ブログの記事のリンクにはこんな感じでカードがちゃんと表示されます！<br>
      静的サイトとしてエクスポートしたので、OGP周りはバッチリ対応できてます−( –`-_-´)– 
      <a href="https://t.co/e0S4uNofEK">
        https://t.co/e0S4uNofEK
      </a>
    </p>
    &mdash; nyoroko (@nyoroko_nyoro) 
    <a href="https://twitter.com/nyoroko_nyoro/status/1616767207236829184?ref_src=twsrc%5Etfw">
      January 21, 2023
    </a>
  </blockquote> 
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このように、MDXには、通常のマークダウン記法よりもツイートの埋め込みなどの色々な表現ができて、しかもHTMLタグを直書きするよりも書きやすいという利点があります。

MDXの具体的な使い方については後編で解説します。

Next.js

SPAでOGP対応をするには

記事はMDXで書くのが良さそうですが、OGPはどうすればよいでしょうか。
OGP対応として、HTMLのHeadタグ内にタイトルやサムネイル画像のURLなどを記述する必要があります。
ところで、先ほど説明した通り、元々当サイトはReactを用いてSPA（Single Page Application、単一のページでコンテンツの切り替えを行う設計のこと）として実装していたのですが、実はこれが裏目に出てしまっていました。
SPAでは、React Helmetを用いるなどしてブログの記事のページのHeadタグを書き変えることができますが、本記事の執筆時点ではFacebookやTwitterのクローラーはJavascriptを解釈しないため、書き替えた後のHeadタグを読み込んでくれません。
かといって、Reactを用いずに静的なHTMLを直書きするのでは本末転倒です。
そこで、静的サイトジェネレータの一つであるNext.jsを使うことにしました。

一方で、GoogleのクローラーはJavaScriptを解釈するため、検索結果には出てくるらしいです。
このことから、OGP周りにこだわらなければJavaScriptでmetaタグを書き変えてもよさそうです。

Next.jsとは

The React Framework for the Web

Next.jsは、Reactをベースにしたフロントエンドのフレームワークです。
ReactはUIの構築に特化したライブラリですが、Next.jsはそれに加えて画像の最適化をしてくれたり、サーバー機能を持っていたり、そして静的サイトとしてエクスポートする機能があったりします。
本記事の執筆時点ではReactをベースにしたフロントエンドのフレームワークの中で最も人気があると思われ、情報も多かったので、数ある静的サイトジェネレータの中なら今回はNext.jsを選択しました。

おわりに【前編】

前編では、MDXとNext.jsでブログを構築するという方向性が決まりました。
後編では、具体的にどう実装するのか？という技術的な内容を中心に解説していきますので、ぜひご覧ください。

前の記事
JavaScriptでの日付型の扱い方

次の記事
Next.js + MDXでブログを自作してみた【後編：実装】

Feedback

あなたの一言が大きなはげみとなります！