Next.js製 個人ブログに zenn-markdown-html と zenn-content-css を導入する

CRANK

Next.js でビルド時に静的コンテンツを生成し、成果物を Amazon S3 などでホスティングすれば Webページとして公開できます。個人のブログを公開するハードルが下がりました。よくあるパターンとしては、Markdown ファイルを記事のソースにし、Static Site Generator で 静的サイトを生成する手法です。blog-starter-typescript などの雛形も用意されており、始めやすいですよね。ただ、デフォルトの状態から発展させていくときに、手詰まりになりがちです。私も試みたことがあるのですが、 素の Markdown だと表現力に欠けるけどカスタマイズするハードルが高いなあ だったり、見た目を整えたいけどCSSとじっくり向き合う時間がない という理由でブロク構築が止まってしまうことがありました。ZennのMarkdown記法一覧 でも記載されているように、Zennでパースできる記法はバリエーションが豊富です。自分でmarkdown-itなどをカスタマイズして対応させようと思うと結構大変なので、公開されている Zenn のパーザーを使ってみましょう。この記事では、公式の Next.js ブログサンプルをもとに、Zenn でも利用している zenn-markdown-html と zenn-content-css 適用する例を示…