Next.js と MDX と TypeScript でブログを作った！
使っている技術
React 製のフレームワーク。GatsbyJS と比較してコントローラブルな点で優位なので採用した。一方、単にブログサイトを作る点では Gatsby の方が便利なプラグインが多い。Next は v9.5 で動的コンテンツを静的ページで生成できる Incremental Static Regeneration という機能の安定板をリリースしている。この機能のデモはこちら。ツイートを iframe を使わない静的なコンテンツとして生成することでページの表示速度を向上させている。
マークダウンに JSX を埋め込める。
他にも .mdx ファイル内に
js1export const metadata = {...}と書くと以下のように import で利用することができる。default export されている
MDXDocumentはマークダウンコンテンツそのもので JSX として埋め込める。jsx1import React from 'react'2import MDXDocument, { metadata } from 'posts/post.mdx'3export default () => (4 <>5 <MDXDocument />6 <footer>7 <p>8 By: {metadata.authors.map((author) => author.name).join(', ') + '.'}9 </p>10 </footer>11 </>12)JavaScript に静的型づけ機能を加えたプログラミング言語。構造的部分型による柔軟な型づけが可能。型推論に基づくインテリセンスが助かる。ソフトウェアドキュメンテーション的にも導入しない手はない。
本ブログをデプロイするときに使っているホスティングサービス。GitHub と連携してぽちぽちクリックしているだけでデプロイできた。
CSS の名前衝突を回避できる。Next.js が正式サポートしているので特に設定は不要。最初は Styled-Components を使おうと考えたが CSS-in-JS だと SSR になって SSG の強みがなくなってしまうため、こちらを採用した。フィジカルな利点として、スタイリングが分離できるので一つのファイルの行数が削減できてスクロールする回数が減らせる（Styled-Components を使っていたときは行数が増えると同じファイルをウィンドウ分割で開いて見てた）。
UI コンポーネントをカタログ化できる。コンポーネント単体の見た目を確認したくて導入したが、今のところ dev モードで十分だし、データの準備など手間も多いのであんまり使っていない。その分記事を書こう。勇み足。
syntax highlighter。
参考にさせてもらったサイトや記事
機能面
Next.js + MDX + tailwindcss で構築されている。ファイルストラクチャや .mdx ファイルからメタ情報を取得するときの方法などを参考にした。本ブログは tailwindcss を使わないうえで TS 化したようなものになっている。
デザイン面
ダークテーマの色を参考にした。色はかなり悩んだものの一つだが、他の人はサイトの色選びをどうしてるんだろう。
カードコンポーネントやレイアウトを参考にした。とくにレイアウトについては紆余曲折があり、「記事を並べるだけなら flexbox で事足りるな」と思って始めたが全然そんなことはなく、変な隙間が空いたりコンポーネント間の gap が指定できなかったりで(厳密には firefox のみ対応)、意外とできないことが多かった。結果的に grid を使ってメディアクエリごとにカラム数を増減させる方法に落ちつく。
GatsbyJS + TS のブログ。サイト上の文言や画像がぐわっとなるところなどを参考にした。この記事とは関係ないが、ESLint の Plugin と Extend の違い はめちゃくちゃ読んだ。
その他
Next.js + MDX + AMP + TS のブログ。表示がめちゃくちゃ速いことに感動して Next.js でブログを作るきっかけとなった。Next だけでもまあ速いので本ブログの AMP 化はひとまず見送る。
さいごに（雑感）
スプラトゥーン 2 をしつつ、とりあえずブログを作るにあたって悩んだところ・はまったところを記事化していく。