Next.js＋gray-matterのススメ

Gatsby だと時折見かける gray-matter ですが、Next.js でも非常に役立つので使い方と利点を書いておきます。

マークダウンでコンテンツを分けることを合わせて pages/ の負担を減らせます。

pages/ の管理

pages/ 下には設定用にスクリプト（js, jsx, ts, tsx）を置けません。

data/ などを外に用意してもいいんですが疎になりすぎてフォルダを行き来するのが面倒になります。

jsonで管理してもいいんですがコンテンツを入れると構造がごちゃごちゃします。

 

マークダウンならタグ付きのコンテンツを簡単に管理できます。

この辺は以前の内容ですが、gray-matter を使って config 付きのコンテンツとして管理することが出来ます。

gray-matter とは

gray-matter は front matter の YAML 解析を行うライブラリです。

言葉にするとわかりにくいですが、markdown で書いたファイルなどの先頭に json 相当の情報を書くことが出来ます。

先頭に --- で挟んだ場所を data、以降をcontentとして json 形式で取得します。

 

言葉で説明しにくいのでサンプルを見ると、このファイルの場合は以下のように解析されます。

---yaml title: I'm front matter --- This is an excerpt. --- ---aaa title: First section --- Section one. ---bbb title: Second section --- Part 1. --- Part 2. --- Part 3. ---ccc title: Third section --- Section three. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 ---yaml title: I'm front matter ---   This is an excerpt. ---   ---aaa title: First section ---   Section one.   ---bbb title: Second section ---   Part 1.   ---   Part 2.   ---   Part 3.   ---ccc title: Third section ---   Section three.

{ content: '\nThis is an excerpt.\n\n---\n', data: { title: "I'm front matter" }, isEmpty: false, excerpt: '\r\nThis is an excerpt.\r\n\r\n', sections: [ { key: 'aaa', data: 'title: First section\n', content: '\nSection one.\n' }, { key: 'bbb', data: 'title: Second section\n', content: '\nPart 1.\n\n---\n\nPart 2.\n\n---\n\nPart 3.\n' }, { key: 'ccc', data: 'title: Third section\n', content: '\nSection three.\n' } ] } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 {   content: '\nThis is an excerpt.\n\n---\n',   data: { title: "I'm front matter" },   isEmpty: false,   excerpt: '\r\nThis is an excerpt.\r\n\r\n',   sections: [     {       key: 'aaa',       data: 'title: First section\n',       content: '\nSection one.\n'     },     {       key: 'bbb',       data: 'title: Second section\n',       content: '\nPart 1.\n\n---\n\nPart 2.\n\n---\n\nPart 3.\n'     },     {       key: 'ccc',       data: 'title: Third section\n',       content: '\nSection three.\n'     }   ] }

若干複雑ですが、 config と contents を同時に書くことが出来ます。

 

マークダウンに書く場合、この例の注意点は excerpt 部分です。

文のすぐ後の行に --- が来るため マークダウンとしてみると <h2> です。

prettier などのフォーマッターを入れていると ## に変えられたりします。

実際に使ってみる

ogp や twitter タグのようなメタタグと、パンくずリストを設定します。

page は肥大化しやすいので、設定とコンテンツだけ管理して投げる形です。

content は react-markdown で表示すれば完成です。