さて、MDX をベースに Next.js サイトを作っていくこの連載も佳境になってきました。前回までのお話は以下より読めます。
- Okachi.js にて、MDX と Next.js について話しました
- next-mdx-frontmatter で Next.js の MDX 内にて Front Matter を使う
- modern site generator で Markdown 文書の一覧を作成するには
Next.js の前に、React Static のケースについてまず触れます。
React Static は、URL (ページ) に対して、コンポーネントを一つ割り当て、なおかつ、そのコンポーネントのためのデータ取得方法を URL 毎に定義する必要があります。 こうして設定された URL 情報により、ビルド時に取得データを JSON 形式で静的に書き出されることを可能にしています。各 URL 毎に専用の JSON が自動で用意されるのが React Static 流儀なのです。
この React Static の構成は、シンプルで非常にわかりやすく、僕が個人的に Gatsby より React Static に好感を持ったのもこのシンプルさにあります。逆に Gatsby は普及していることもあり、マニュアルが手厚く、プラグインなども充実しています。このあたりは、構成のわかりやすさと、導入のわかりやすさという違う方向性のわかりやすさがあるので、好みによるでしょう。
React Static は、個々のページについては、React コンポーネント + JSON ファイルというセットで成り立っていますが、一覧ページも同様に生成された JSON と React コンポーネントという構成になります。逆を言えば、この構成に落とし込めさえすれば React Static はいくらでも拡張できます。
一方、Next.js は、React コンポーネント + JSON というアプローチではなく、あくまで SSR した結果を静的ファイルとして書き出すというスタイルです。MDX においても、プラグインで React コンポーネントとして変換されるため、JSON 化されるわけではありません。
ちょっと iPad でメモした図を貼ってみます。
React static と Next.js のそれぞれの書き出し方法の違い
一覧ページについては、図でいうところの [?] マーク部分にあるように、なんらかの仕組みを用意する必要があります。僕は React Static の構成を真似て、Next.js + MDX の場合は、一覧ページに限り URL 一覧を JSON としてビルド時に書き出すことで実現することにしました。
但し、React Static がページ一覧のオブジェクトを用意すると JSON と読み込む仕組みは自動で用意してくれるのに対し、Next.js では、手動で JSON を書き出し、なおかつ JSON をロードする仕組みも用意する必要があります。もちろん、直接一覧ページを表示した場合は、SSR された結果がクライアントに返ることになります。
ということで、ようやく MDX の一覧ページを作る方法が見えてきました。
参照
ARTICLES
AUTHOR
原 一浩
カンソクインダストリーズ代表 / グレーティブ合同会社代表
1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール＆キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。