shinaps

github icongithub icon

Tech Blog

Next.js 13（app dir）と microCMS で Jamstack なブログを作ってみた

目次

はじめに

この記事では、Next.js 13 から Next.js を勉強し始めた私が、Next.js 13（app dir）と microCMS で Jamstack なブログを作成する方法をメモとして残します。（似たような内容の記事は沢山ありますが、Next.js 13（app dir）に対応したものは2023/05/15時点で未だ少ないため、これからブログを作成する人の参考になればと思います。）

作ったブログ

ブログの機能一覧

  • 記事一覧ページ
  • ページネーション
  • カテゴリごとの記事表示
  • 記事詳細ページ
  • 目次生成
  • ソースコードのハイライト
  • カテゴリの付与
  • microCMS で作成した記事のプレビュー
  • OG画像の設定
  • 公開済み記事の更新時にブログを自動デプロイ

記事一覧・記事詳細ページの表示

microCMS のブログ（https://blog.microcms.io/nextjs13-microcms-rsc/）が参考になると思います。

Next.js 13 のセットアップ方法から、microCMS で API を用意する方法について学ぶことができ、動作確認まで行うことができます。

記事一覧ページのページネーション

こちらも microCMS のブログ（https://blog.microcms.io/next-pagination/）が参考になると思います。

ブログを参考に下記のような page.tsx を実装しました。

https://github.com/0machi/techblog/blob/main/app/articles/pages/[pageId]/page.tsx

Component は、こちらの記事（https://zenn.dev/buyselltech/articles/9460c75b7cd8d1）を参考に Container / Presentational パターンを採用しました。

記事一覧ページのカテゴリごとの表示

こちらも 同様に microCMS のブログ（https://blog.microcms.io/next-category-page/）が参考になると思います。

記事詳細ページの目次生成・ソースコードのハイライト

こちらも 同様に microCMS のブログが参考になると思います。

ブログを参考に下記のような関数を実装しました。

これらの関数を下記のように使用しています。

const article = await fetchArticle(articleId)

const articleHtml = article.content
const highlightedArticleHtml = highlightCodeBlock(articleHtml)
const toc = getToc(articleHtml)

microCMS で作成した記事のプレビュー

従来の Preview Mode が Legacy となったため、こちらの記事（https://zenn.dev/temasaguru/articles/716c10cab1992e）を参考に実装しました。

記事を参考に下記のような、プレビュー用の Container Component を作成しました。

https://github.com/0machi/techblog/blob/main/components/container/article/articleDraftContainer.tsx

OG画像の設定

Newt のブログ（https://www.newt.so/docs/tutorials/nextjs-og-image-generation）とこちら記事（https://zenn.dev/temasaguru/articles/2968736b5a2f41）を参考に、下記を作成し、OG画像を設定しました。

公開済み記事の更新時にブログを自動デプロイ

microCMS のブログ（https://blog.microcms.io/microcms-next-jamstack-blog/）を参考に、microCMSとVercelを連携するための Webhook を設定しました。これにより記事の更新時にビルドが走るようになります。

しかし、上記の設定実施後にブログにアクセスしても、microCMS の記事は更新前のものが表示されてしまいました。

（Vercel から キャッシュを使用せずに Redeploy を選択すると、正しく更新後の記事が表示されます。）

どうやら、Webhook でのビルド時に、Vercel のキャッシュが効いてしまっているようなので、こちらの記事（https://zenn.dev/resistance_gowy/articles/e3e112f5550dfa）を参考に、microcms-js-sdk の customFetch を使用しました。

おわりに

この記事では、Next.js 13 から Next.js を勉強し始めた私が、Next.js 13（app dir）と microCMS で Jamstack なブログを作成する方法をメモとして残しました。microCMS はブログが充実しており、とっつきやすく感じました。これから Jamstack なこれからブログを作成する人の参考になればと思います。

Services

Contacts

© 2023 shinaps