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 を用意する方法について学ぶことができ、動作確認まで行うことができます。

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

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

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

const article = await fetchArticle(articleId)

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

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

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

© 2024 shinaps