Markdownで更新可能な公式サイトをNext.jsで構築した

代表のkomiです。 今回LPを一新するということでNext.js+Tailwindを使って最初から作ってみました。

LPに求められることとして、定期的にニュースを更新したりするので運用が楽なようにMarkdownで記事を書けるようにしたいというのがあります。 そこで今回React向けに提供されているremarkを利用してみました。

実装メモ

MarkdownデータをHTMLへ

remarkではMarkdownの文法で書かれた内容を構文解析して別のマークアップ言語に変換をしてくれます。

今回のケースではMarkdownで書かれたものHTMLに変換したいので、remarkと合わせてremark-htmlを使用することで実現できます。

具体的な処理としてはawait remark().use(html).process(myMarkdownContent)というようにすればOKです。

ファイル名からURLのパスへ

Next.jsではDynamic Routingがサポートされており、例えばpage/posts/[post-id].tsxというパスでファイルを置いておくとルーティングとして/posts/{post-id}へ解決してくれます。

この機構を利用することにより、useRouterを上手に使うことによって所定のパスに置いたファイル名をそのままサイトとして表示することが可能です。

今後やること

現在これにてK SquadのLPは無事に構築されました。

しかしまだ完璧ではなく、例えばOGPの対応やMarkdownのコードブロックへの対応が完了していません。

これについては今後の課題としておきます。

このサイトのソースコードについては公開されているので、参考に見てみてください。