Next.js + TypeScript + MDXでブログシステムを構築した

ちょうど一年前、Gatsby JS でこのブログを作ったのだけれど、 当時はフロントエンドの知見が全然なかったために個人的に色々とイマイチな出来で不満が残っていた。

たとえば

• React の理解が浅いまま、ネットのサンプルコードを付け足し付け足しして実装したので 各コンポーネントがやたらとでかい
• CSSをインラインに書いていたのでコードが読みづらく、 当てていたスタイル自体もイマイチでモバイルで表示が崩れていた
• 本当は TypeScript で書きたかったけど、当時は webpack とかよくわからず Javascript で書くしかなかった

などなど。

で、どうせなら１から作り直そうと思い、 最近気になってた Next.js + MDX の構成でブログをリニューアルすることにした。

できたもの

できたものがこのブログ。 Next.js の静的サイトジェネレーター機能で出力したものを Netlify でホスティングしている。

AtomicDesign + MDX によるコンポーネントの分離とレイアウトのコントロール

コンポーネントは AtomicDesign に沿って分離した。 Atomic Design は、最初はコンポーネントを atoms / molecules / orgranisms のどれに割り当てるか 悩む時間があったけれど、慣れてしまえばコンポーネントの粒度や階層構造を意識して実装する癖がついて、コードもコンパクトになるからよい。

MDX は JSX コンポーネントから markdown を扱うための形式で、 markdown 中の各パーツをカスタムコンポーネントに対応づけることができる。

markdown ファイルから個別の記事を生成して、 たとえば「箇条書きのアイテムの間隔がいまいちだな」と思ったら 対応するカスタムコンポーネントにスタイルを追加すれば良いので、レイアウトの調整がとてもやりやすくなった。

変換前の markdown (MDX) ファイル。ヘッダーを表示するため、実際はMDXコンポーネントをさらにカスタムコンポーネントでラップしている。

Tailwind CSS を使ったレスポンシブ対応

Tailwind CSS は CSS ライブラリの１つ。

Bootstrap のようなライブラリと異なり、ボタン等のコンポーネントが用意されているわけではなく、 代わりに Flexbox などよく使うスタイルが適用されたクラスが用意されている。

この用意された CSS クラスを HTML タグにあてていくだけでよく、直接スタイルを書かなくてよいという手軽さがよい。

また用意されているクラスはフォントサイズの単位が rem に統一されているため、 これらクラスをコンポーネント内で使っておけば、 あとはメディアクエリ等で全体のフォントサイズを１箇所で決めるだけで、 文字バランスを保ったまま画面サイズに応じたレイアウトを適用することができる。

その他

TypeScript化はもちろん実施。

Github Actions を使った push 時のリント、Lighthouse CIの実行、 netlify への自動デプロイも設定した。

感想

Gatsby JS でブログを作った時は、 公式のブログ用テンプレートを使ってはじめたのもあって、 よくわからないけど動いているという感じだった。

けど今回は scaffold 的なものは使わず、 １から Next.js のドキュメントなりを読みつつ作成したので、 生成物全体をコントロールできたという感触があり満足している。

MDX ベースのページにカスタムレイアウトを適用するのに結構苦労したんだけど、 その部分は別途記事にしたいと思っている。