この記事は [ミライトデザイン Advent Calendar 2023](https://qiita.com/advent-calendar/2023/miraito-inc) の 3 日目の記事です。

2 日目に書いたこちらの記事に続いて 3 日目も書きました。

https://www.yukimasa.net/posts/auto-switch-git-user-per-repo

## はじめに

この記事では、 Next.js で構築したブログに Tocbot というライブラリを使用して、目次を追加する方法について紹介します。

[zenn](https://zenn.dev/) の目次に使用しているライブラリで、このサイトでも実際に Tocbot を使用して作成しています。

https://zenn.dev/link/comments/4d10c8dd8315e8

なお、 Next.js でのブログ構築についてはこの記事では紹介しません。

このサイトを構築したときの記事が別でありますので、気になる方はこちらを見てみてください。

https://www.yukimasa.net/posts/created-jamstack-personal-site/

## Tocbotとは

https://tscanlin.github.io/tocbot/

Tocbot は html の見出しタグ ( h1, h2 など ) から、自動的に目次 ( Table of Contents ) を生成するライブラリです。

また、目次はリンクになっているため任意の見出しにジャンプしたりすることができますし、スタイルも自由につけることができます。

## 使用方法

使い方はとても簡単なので、以下の手順を見て試してみてください。

### Tocbot のインストール

まずは以下のコマンドを実行してインストールしましょう。

```sh-session
❯ yarn add tocbot
```

or

```sh-session
❯ npm install --save tocbot
```

### Toc コンポーネントの作成

```tsx
import { useEffect } from "react";
import tocbot from "tocbot";

export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc", //　目次を追加する class 名
      contentSelector: ".content", // 目次を取得するコンテンツの class 名
      headingSelector: "h1, h2, h3, h4", // 目次として取得する見出しタグ
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);

  return <nav className="toc" />;
};
```

使い方としては、 useEffect 内で `tocbot.init()` を実行して初期化処理を実行します。

init の引数に設定値を入れることで目次の各設定ができます。

色々なオプションがあるので、公式の [API > Options](https://tscanlin.github.io/tocbot/#options) から確認してみてください。

なお、このサイトではヘッダーを固定しているため、目次のアンカー位置がズレてしまいます。
そのため以下の設定を追記してヘッダーの高さ分を調整します。

また、 必要な見出しタグのみを目次として設定したいため、 `headingSelector` も修正します。

```diff tsx
export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc", //　目次を追加する class 名
      contentSelector: ".content", // 目次を取得するコンテンツの class 名
-     headingSelector: "h1, h2, h3, h4", // 目次として取得する見出しタグ
+     headingSelector: "h2, h3", // 目次として取得する見出しタグ
+     // ヘッダーの高さ分ズレてしまうため調整
+     headingsOffset: 70,
+     scrollSmoothOffset: -70,
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);

  return <nav className="toc" />;
};
```

### スタイルの調整

目次のスタイルは CDN でスタイルを当てるか、独自で CSS を当てるかになります。

CDN を利用する場合は Next.js が用意している next/head の `<Head>` タグへ追加すれば適用されます。

```tsx
<Head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"
  />
</Head>;
```

自分でスタイリングする場合は `tocSelector` で指定した class に対して CSS を書けば適用されます。

アクティブになっているリンクには `.is-active-link` という class が付与されるので、アクティブになっているリンクのスタイルも当てることができます。

参考にこのサイトで使用しているコードを紹介します。
※ コンポーネントライブラリには [Chakra UI](https://chakra-ui.com/) を使用しています。

```tsx
import { Box, useColorModeValue } from "@chakra-ui/react";
import { useEffect } from "react";
import tocbot from "tocbot";

export const Toc = () => {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc",
      contentSelector: ".postArticle",
      headingSelector: "h2, h3",
      headingsOffset: 70,
      scrollSmoothOffset: -70,
    });

    // 不要となったtocbotインスタンスを削除
    return () => tocbot.destroy();
  }, []);
  const activeLinkColor = useColorModeValue("gray.900", "gray.300");
  const activeListIconColor = useColorModeValue("purple.500", "purple.700");

  return (
    <Box
      sx={{
        ".toc": {
          borderRadius: "0.25rem",
          fontSize: "0.875rem",
          position: "relative",

          ".toc-list": {
            paddingTop: "0.5rem",

            ":first-child": {
              paddingTop: 0,
            },
            ".toc-list-item": {
              position: "relative",
              listStyle: "none",
              paddingLeft: 5,
              paddingBottom: "0.5rem",

              ":last-child": {
                paddingBottom: 0,
              },
              "::before": {
                position: "absolute",
                top: "4px",
                left: 0,
                width: "12px",
                height: "12px",
                content: '""',
                background: "purple.300",
                border: "2px solid #fff",
                borderRadius: "full",
              },
              ".toc-link": {
                color: "gray.500",
                fontWeight: 700,
              },
              ".toc-list .toc-link": {
                fontWeight: 400,
              },
            },

            ".toc-list-item.is-active-li": {
              ".toc-link": {
                color: activeLinkColor,
              },
              "::before": {
                background: activeListIconColor,
                borderColor: "purple.100",
              },
            },
          },
        },
      }}
    >
      <nav className="toc" />
    </Box>
  );
};
```

## まとめ

Next.js で構築したブログに Tocbot を使用して目次を追加する方法を紹介しました。

Tocbot のオプションは他にもあるので、詳しい情報は Tocbot の公式ドキュメントを確認してください。

zenn でも使用されていて、簡単に目次を作成することができ、スタイルも自由にカスタマイズができるので是非試してみてください。

このサイトの目次スタイルは zenn を参考にしました。

記事のスタイルについても zenn のマークダウン記法を表示させるようにしているので、よければこちらも参考にしてみてください。

https://www.yukimasa.net/posts/zenn-markdown-with-nextjs

この記事では、 Next.js で構築したブログに Tocbot というライブラリを使用して、目次を追加する方法について紹介します。
zenn の目次にも使用しているライブラリで簡単に目次を作成することができるので是非試してみてください。

Tocbot を使用し Next.js で構築したブログに目次を追加する

## はじめに

このサイトは Next.js で構築し、記事コンテンツは microCMS で管理しています。

基本的なスタイリングについては chakra-ui というコンポーネントライブラリを使用しているため、細かい部品ごとのスタイリングはライブラリに任せています。

https://chakra-ui.com/

記事は markdown 記法のものを microCMS から取得し、zenn が提供しているライブラリを使用して HTML へのパース及びスタイリングを行っています。

このライブラリを導入することで、zenn 独自のマークダウン記法も使用できる上に、リンクをカードにしてくれたり、Twitter や Youtube の埋め込みも勝手にやってくれます。

今回の記事で自分と同じような構成を考えている人の参考になれば良いなと思います。

サイトの構築自体はこちらを参考に

https://www.yukimasa.net/posts/created-jamstack-personal-site

## 注意事項

- microCMS のリッチエディタを使用している場合は、markdown 記法に変換したものを新たなフィールドに移動する必要がある
  - 記事が多いほど手間がかかる
- 執筆は別のエディタで行い、コンテンツを mircoCMS に貼り付ける方法がやりやすいが、その場合は画像だけ microCMS にアップしておく必要がある
- zenn の独自記法に依存するため、他の箇所でコンテンツ利用する場合は使用できない
  - スタイルの恩恵だけ受けて、独自記法は使用しないようにするなど工夫が必要

## 使用するライブラリ

### zenn-markdown-html

zenn 独自の記法を含む markdown を HTML に変換するためのライブラリ。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-markdown-html

### zenn-content-css

zenn-markdown-html で markdown から変換された HTML に適用するためのCSS。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-content-css

### zenn-embed-elements

markdown の zenn 独自の埋め込み要素をHTMLに変換するためのライブラリだが、現在は KaTeX による数式のレンダリングのためにのみ利用している。

https://github.com/zenn-dev/zenn-editor/tree/main/packages/zenn-embed-elements

## バージョン

- Next.js: 13.1.6
- React: 18.2.0
- zenn-content-css: 0.1.137
- zenn-embed-elements: 0.1.137
- zenn-markdown-html: 0.1.137

## microCMS の記事投稿をリッチエディタからテキストエリアに変更する

新規で microCMS を構築する場合は markdown 用にテキストエリアのフィールドを用意すれば良いのですが、すでにリッチエディタで運用している場合は引っ越しが必要です。

方法としては、現在のリッチエディタを生かしたまま、新たにテキストエリアのフィールドを新規追加します。

リッチエディタの内容を markdown 記法に変換し、作成したテキストエリアのフィールドに追加します。

変換方法は何でもいいのですが、自分の場合はリッチエディタのコンテンツを Notion のページにコピペして、そのページを markdown でエクスポートしたものをテキストエリアに貼り付けていました。

そうすることで画像のリンク先も変更することなく引っ越しできるのですが、他に方法があれば何でも良いです。

実装が完了したら不要になったリッチエディタは削除しましょう。

## Zennのマークダウン記法を導入

導入自体はすごい簡単で、こちらの記事を参考に実装してください。

https://zenn.dev/team_zenn/articles/intro-zenn-markdown

ただ、上記の記事で実装したときに、リンクカードやTwitterの埋め込みが動かない事象が発生しました。

`_document.tsx` に script を埋め込む用に記載がありますが、`_document.tsx` は SSR のみの実行なので、 `pages` ごとに以下の `Head` タグを追加しました。

```tsx
import Head from "next/head";

// ..省略..

<Head>
  <script src="https://embed.zenn.studio/js/listen-embed-event.js"></script>
</Head>
```

### 追記（2023/3/1）

zenn-markdown-html のバージョンアップにより、埋め込み要素がレンダリングされない事象が発生しました。

https://github.com/zenn-dev/zenn-editor/pull/420

上記の PR で `markdownToHtml` に `embedOrigin` を追加したようで、今までと同じ様に動作させるためには、以下の記述を追記します。

```diff tsx
- const content = await markdownToHtml(post.content || '')
+ const content = await markdownToHtml(post.content || '', {
+   embedOrigin: "https://embed.zenn.studio",
+ })
```

## Zennのマークダウン記法

https://zenn.dev/zenn/articles/markdown-guide

zenn は基本的なマークダウン記法に加えて、アコーディオンやメッセージなど独自のマークダウン記法も用意しています。

:::message
メッセージをここに
:::

:::details アコーディオン
表示したい内容
:::

また、コードブロックは言語指定とファイル名の表示も可能です。

```ts:index.ts
const hoge: string = "Hello, world!"
console.log(hoge)
```

シンタックスハイライトには Prism.js を使用しており、対応言語はこちらから確認できます。

https://prismjs.com/#supported-languages

zenn 記法は便利なのですが、 headlessCMS のコンテンツなのでなるべく独自記法には依存させたくは無いです。

が、現状このサイト以外でコンテンツを使用する予定は無いので、ひとまず気にせず使ってます。

## 記事執筆について

もともとは microCMS のリッチエディタを使用していましたが、基本的には Notion で書いた記事を貼り付けて、画像だけ別途アップロードする運用でした。

今は執筆時に markdown プレビューを見ながら書きたいので、Visual Studio Code の zenn 拡張を使用して記事を書いています。

ただ、画像だけは変わらず microCMS にアップロードしてそのリンクを使用しているので、まだ完全ではないなといったところです。

https://zenn.dev/negokaz/articles/aa4e12b76d516597a00e

## まとめ

もともとは拾ってきた適当な css を貼り付けて、シンタックスハイライトは highlight.js というライブラリを使用しており、スタイルの改善をしたいなといったと思ったところから始まりました。

結果的に執筆も markdown に代わり、スタイリングも zenn と同じで見やすくなったので良かったです。

まだ改善箇所はありますが、このサイトを遊び場として色々と実装していきたいなと思います。


Next.js で構築したサイトに microCMS で管理しているコンテンツを zenn のマークダウン記法で表示させる方法を紹介します。

Next.js × microCMSでZennのマークダウンを表示するブログの作り方

## はじめに

今回は Next.js で構築したサイトでページ遷移するときに、画面上部にプログレスバーを表示させ読み込み状態がわかるようにする方法を紹介します。

プログレスバーは Zenn などでも使用されている NProgress というライブラリを使用することで簡単に表示させることができます。

https://ricostacruz.com/nprogress

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/bae6afc112c94202be6fedecd3a865b1/nprogress.gif)

## 環境

- Next.js: 13.0.6
- React: 18.2.0
- NProgress: 0.2.0

## 実装手順

1. ライブラリのインストール
2. プログレスバーを表示させる hooks の作成
3. `_app.tsx` に hooks の呼び出し処理を実装する

### ライブラリのインストール

https://github.com/rstacruz/nprogress

ライブラリをインストールする

```sh
❯ yarn add nprogress
```

型定義をインストール

```sh
❯ yarn add -D @types/nprogress
```

### プログレスバーを表示させる hooks の作成

ページ遷移時にプログレスバーを表示させる hooks を作成します。

Next.js の `useRouter` でページ遷移時のイベントを取得できるので、イベントごとにプログレスバーの表示/非表示を切り替えます。

プログレスバーの制御は `NProgress.start()` と `NProgress.done()` を実行するだけです。

まずは `src/hooks/useProgressBarAtTransition.ts` を作成します。

```ts:src/hooks/useProgressBarAtTransition.ts
import 'nprogress/nprogress.css'

import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import { useEffect } from 'react'

export const useProgressBarAtTransition = (): void => {
  const router = useRouter()

  useEffect(() => {
    const handleStart = () => {
      NProgress.start()
    }

    const handleStop = () => {
      NProgress.done()
    }

    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)

    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])
}
```

プログレスバーのスタイルは `import 'nprogress/nprogress.css'` でライブラリのデフォルトスタイルを適用します。

イベントごとの処理は `router.events.on` でイベント名とイベント発生時の処理を指定することで実行できます。

各イベントについては以下のとおりです。

- `routeChangeStart` : 画面遷移が変更され始めたときに発生
- `routeChangeComplete` : 画面遷移が完全に変更されたときに発生
- `routeChangeError` : 画面遷移時にエラーが発生した場合、または画面の読み込みがキャンセルされた場合に発生

useEffect でイベントごとの処理を指定し、コンポーネントが破棄された際のクリーンアップ処理は `router.events.off` で行います。

その他の router の情報については [公式ページ](https://nextjs.org/docs/api-reference/next/router#routerreload) で確認できるので、時間があるときにでも覗いてみてください。

https://nextjs.org/docs/api-reference/next/router#routerreload

### `_app.tsx` に hooks の呼び出し処理を実装する

全ページに適用させるために `_app.tsx` で作成した hooks を実行させます。

```tsx:_app.tsx
import type { AppProps } from 'next/app'

import { useProgressBarAtTransition } from '@/hooks/useProgressBarAtTransition'

const MyApp = ({ Component, pageProps }: AppProps) => {
  useProgressBarAtTransition()

  return <Component {...pageProps} />
}

export default MyApp
```

これで画面遷移を行なうと画面上部にプログレスバーとスピナーが表示されていることが確認できるかと思います。

## カスタマイズ

実装としては完了となりますが、カスタマイズもいくつかできるので試したいと思います。

詳細については公式の Github に記載があるので確認してみてください。

https://github.com/rstacruz/nprogress#advanced-usage

### スピナーを非表示にする

画面右上に表示されるスピナーはプログレスバーが表示されているので非表示にしたいと思います。

```ts:src/hooks/useProgressBarAtTransition.ts
// ..省略..

export const useProgressBarAtTransition = (): void => {
  const router = useRouter()

  // スピナーを非表示にする
  NProgress.configure({ showSpinner: false })

  useEffect(() => {

    // ..省略..

  }
}
```

`NProgress.configure({ showSpinner: false })` を追加するだけでスピナーが非表示となります。

スピナーの設定以外にも速度やアニメーションなども設定できるみたいなので、気になる人は試してみてください。

### スタイルを修正する

スタイルはライブラリデフォルトのものを指定していましたが、プログレスバーの色などを変更したい場合は css を修正します。

まずは、公式の css をプロジェクトに作成するので、 Github からコピーしてきます。

https://github.com/rstacruz/nprogress/blob/master/nprogress.css

コピーしてきたら `#29d` が指定されている箇所を変更したい色に置換してみます。

変更したら `_app.tsx` でcssをインポートします。

```tsx:styles/nprogress.css
import '../../styles/nprogress.css'

// ..省略..
```

そうするとプログレスバーのカラーが変更されたことが確認できると思います。

## まとめ

NProgress を使うだけで簡単に画面遷移時のプログレスバーが表示できたかと思います。

細かいカスタマイズもできるので色々いじってみてください。

## 参考

https://caspertheghost.me/blog/nprogress-next-js

https://fumidzuki.com/knowledge/5013/

https://learnjsx.com/category/4/posts/nextjs-nprogress


今回は Next.js で構築したサイトでページ遷移するときに、画面上部にプログレスバーを表示させ読み込み状態がわかるようにする方法を紹介します。
プログレスバーは Zenn などでも使用されている NProgress というライブラリを使用することで簡単に表示させることができます。

Next.jsで画面遷移時にプログレスバーを表示させる

## nextのアップグレード

[Upgrade Guide | Next.js](https://nextjs.org/docs/upgrading)

https://nextjs.org/docs/upgrading

公式に従ってコマンド実行

```sh
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
```

## <Image>コンポーネントのimportの修正

`next/future/image` から `next/image` に変更されたので、使用している箇所の修正

※ 今までの `next/image` は `next/legacy/image` になりました。

公式から `codemod` が用意されているので実行

```sh
npx @next/codemod next-image-to-legacy-image ./src
```

`next/image` は `next/legacy/image` となり、`next/future/image` は `next/image` に変わりました。

## <Link>コンポーネントの修正

今までは `<a>` タグを子として追加していたのが、今後は不要になった。

そのため `<Link>` コンポーネントの `<a>` タグを削除する必要がある。

こちらも公式から `codemod` が用意されている

```sh
npx @next/codemod new-link ./src
```

上記コマンドを実行すると `<a>` タグを `next/link` から安全に削除するか、 `<Link>` コンポーネントに `legacyBehavior` を追加します。


このサイトのNext.js 12→13 アップグレードメモ

Next.js 12→13 アップグレードメモ

この記事は [ミライトデザイン Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miraito-inc) の23日目の記事です。

https://qiita.com/advent-calendar/2022/miraito-inc

前日の [kakiuchi](https://qiita.com/tkek321) の記事に続いて書いていきます。

https://qiita.com/tkek321/items/2aa7757514532dbda2c4

## はじめに

2022/10/10にvercelからOG Imageを自動生成するライブラリの発表がありました。

https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images

このライブラリを使ってNext.jsで作ったページのOG画像を動的に生成する方法を紹介します。

前回の記事を例にこんな感じで表示させることができます。

https://twitter.com/yyykms123/status/1601279551430328320

## 環境

- react: 18.2
- next: 12.3.1
- vercel/og: 0.0.20

## OG画像を生成するライブラリ

vercelが発表した `@vercel/og` というライブラリは、[Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) でHTML/CSS（JSX）でマークアップしたものを動にOG画像として生成することができるライブラリです。

[Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) とは、エッジで関数を実行できる環境となるので、`@vercel/og` は `runtime: 'edge'` という設定を行ってEdge Runtimeで使用する必要があります。

また、Next.js は v12.2.3 以降を使用する必要があります。

コアエンジンでは [Satori](https://github.com/vercel/satori) と [Resvg](https://github.com/yisibl/resvg-js) という2つのライブラリを使用して、最終的にPNGに変換しています。

具体的には、SatoriというライブラリがHTML/CSS（JSX）からSVGを生成し、Resvgが生成されたSVGをPNGに変換しているような流れで、これをEdge環境で行っています。（JSX → SVG → PNG）

https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

## 使用方法

基本的には公式の通り進めてけば問題ないです。
サンプルリポジトリを作成しているので参考に見てみてください。

https://github.com/yukimasa/vercel-og-sample

### 画像生成の設定

まずはライブラリのインストール

```
$ yarn add @vercel/og
```

ライブラリをインストールしたら `pages/api` 配下に `og.tsx` を作成して、og画像を生成するためのAPIエンドポイントを作成します。

config に `runtime: 'edge'` を指定して `ImageResponse` を return するだけです。

今回は公式の「Hello world!」の画像で設定をしています。

```tsx:pages/api/og.tsx
import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'edge',
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}
```

作成したら `yarn dev` でサーバーを立ち上げ [http://localhost:3000/api/og](http://localhost:3000/api/og) を確認すると画像が生成されていることが確認できます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/11bf6475eee1476eb2c535f645bb52f0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-22%2023.20.56.png)

画像の生成はこれだけです。

### OGPの設定

ただ、このままだと画像が生成されただけなので、OG画像として表示されるようにするために、pageの `<Head>` に `<meta>` タグを追加します。

ここでは、試しにトップページで確認できるように `pages/index.tsx` で設定します。

実際に確認できるようにvercelにデプロイして絶対パスを指定しておきましょう。

```tsx:pages/index.tsx
<meta
  property="og:image"
  content="<https://vercel-og-sample.vercel.app/api/og>"
/>
```

デプロイできたらOGPを確認できるツールで確認してみましょう。

https://rakko.tools/tools/9/

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/b488b00841d941959682185ec9332840/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2016.01.43.png)

先程確認した画像でOG画像が設定されていることが確認できます。

### ページごとで動的に画像を生成する

画像を生成してOG画像として設定できたことが確認できましたが、このままでは全ページ「Hello world!」の画像となってしまいます。

そのため、次はページごとに動的に画像が変わるように設定していきます。

ページごとにOG画像を生成するためには、queryパラメーターを使用して動的にページタイトルやその他要素を画像に挿入することができます。

```
<https://vercel-og-sample.vercel.app/api/og?title=hogehoge&publishedAt=2020-12-23>
```

まずは、先程作成した `og.tsx` を下記のように修正します。

```tsx:pages/api/og.tsx
import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function (req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const hasTitle = searchParams.has("title");
  const title = hasTitle
    ? searchParams.get("title")?.slice(0, 100)
    : "My default title";

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}
```

最初と違う点としては、 `searchParams` でパラメーターから `title` のデータを取得して、画像のテキストに挿入しています。

試しに先程トップページで指定したurlに `title` のパラメーターを付与して確認してみます。（画像の確認なので、localhostで問題なし）

開発環境で、apiのパスにアクセスしてみます。

[http://localhost:3000/api/og?title=OG画像を動的に生成](http://localhost:3000/api/og?title=OG%E7%94%BB%E5%83%8F%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E7%94%9F%E6%88%90)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/517cebf179af4d0eb3bae2a1197cb0d7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2016.30.09.png)

するとパラメーターで渡したtitleが画像で表示されていることを確認できました。

### サンプルブログを作成し、ページごとにパラメーターを変更してOG画像を設定する

あとは、トップページではなくページごとの `<meta>` タグにクエリーパラメーターを設定するようにします。

サンプルとして、ブログのように一覧ページと詳細ページを作成して各ページで動的にOG画像が生成されるようにします。

### APIの作成

まずはブログのダミーデータを取得できるようにAPIを作成します。

Postの型定義

```ts:types/post.ts
export type Post = {
  id: string;
  title: string;
};
```

ブログのダミーデータ

```ts:mock/posts.ts
import { Post } from "../types/post";

export const postsData: Post[] = [
  {
    id: "4d20c87f-3497-125b-209d-6aa0c44333ac",
    title: "OG画像を動的に生成する",
  },
  {
    id: "46ab05ad-f790-574e-5367-a88a21bf6916",
    title: "Next.jsでJamstackな個人サイトを作った",
  },
];
```

post一覧取得API

```ts:pages/api/posts/index.ts
import type { NextApiRequest, NextApiResponse } from "next";
import { postsData } from "../../../mock/posts";
import { Post } from "../../../types/post";

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Post[]>
) {
  res.status(200).json(postsData);
}
```

post詳細API

```tsx:pages/api/posts/[id].ts
import type { NextApiRequest, NextApiResponse } from "next";
import { postsData } from "../../../mock/posts";
import { Post } from "../../../types/post";

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Post>
) {
  const posts = postsData;
  const { id } = req.query;
  const post = posts.filter((post) => post.id === id)[0];

  res.status(200).json(post);
}
```

これで、ブログのデータを取得できるAPIができました。

試しに確認してみます。

[http://localhost:3000/api/posts](http://localhost:3000/api/posts)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/6f1f00312d8d495bb25ed36654e72385/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2017.14.55.png)

[http://localhost:3000/api/posts/4d20c87f-3497-125b-209d-6aa0c44333ac](http://localhost:3000/api/posts/4d20c87f-3497-125b-209d-6aa0c44333ac)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/f96020b945184a32a4c7711f4f59659d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.07.08.png)

これで、一覧及び詳細データが取得できました。

APIができたら、この時点でデプロイをしておきます。

この後ページを作成しますが、APIからダミーデータを取得して事前ビルドをする必要があるので、本番環境でAPIが無いと事前ビルドでデータが取得できずにエラーとなってしまいます。

### ページの作成

あとは一覧と詳細のページファイルを作成しますが、開発環境と本番環境でurlが変わるようにenvの設定をしておきます。

```:.env.local
NEXT_PUBLIC_APP_URL=http://localhost:3000
```

本番環境では、自身がデプロイした環境で設定してください。

vercel の場合だと、ダッシュボードの `Settings > Environment Variables` で設定ができます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/b80abfe456594d7192212951fc5228ef/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.45.58.png)

では、ダミーデータをAPIから取得して、一覧画面に表示させるためのページファイルを作成します。

```tsx:pages/posts/index.tsx
import { GetStaticProps, NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { Post } from "../../types/post";

type DataType = {
  contents: Post[];
};

export default function Posts({ contents }: DataType) {
  return (
    <>
      <Head>
        <title>posts</title>
        <meta name="description" content="記事一覧" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>

      <main
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "6rem",
        }}>
        <ul>
          {contents.map((post) => (
            <Link key={post.id} href={`/posts/${post.id}`}>
              <li>{post.title}</li>
            </Link>
          ))}
        </ul>
      </main>
    </>
  );
}

export const getStaticProps: GetStaticProps<DataType> = async () => {
  const data = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/posts`).then(
    (data) => data.json()
  );

  return {
    props: {
      contents: data,
    },
  };
};
```

一覧ページを確認するとダミーデータのリストが表示されたことが確認できます。

[http://localhost:3000/posts](http://localhost:3000/posts)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/5c3c5c8b7b944488aae093d957c756d8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.10.21.png)

次に詳細画面のページファイルを作成します。

```tsx:pages/posts/[id].tsx
import {
  GetStaticPaths,
  GetStaticPathsResult,
  GetStaticProps,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import Head from "next/head";
import { Post } from "../../types/post";
import { ParsedUrlQuery } from "querystring";

type Params = {
  id: string;
} & ParsedUrlQuery;

type DataType = { post: Post };

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export default function Posts({ post }: Props) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.title} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta
          property="og:image"
          content={`${process.env.NEXT_PUBLIC_APP_URL}/api/og?title=${post.title}`}
        />
      </Head>

      <main
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "6rem",
        }}>
        <p>id: {post.id}</p>
        <h2>{post.title}</h2>
      </main>
    </>
  );
}

export const getStaticPaths: GetStaticPaths = async (): Promise<
  GetStaticPathsResult<Params>
> => {
  const data = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/posts`).then(
    (data) => data.json()
  );

  const paths = data.map((post: Post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });

  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps<DataType, Params> = async ({
  params,
}) => {
  if (!params?.id) {
    throw new Error("Error: ID not found");
  }

  const post = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/api/posts/${params.id}`
  ).then((data) => data.json());

  return {
    props: { post },
  };
};
```

一覧からブログを選択すると詳細画面に遷移され、idとtitleが表示されることが確認できました。

[http://localhost:3000/posts/46ab05ad-f790-574e-5367-a88a21bf6916](http://localhost:3000/posts/46ab05ad-f790-574e-5367-a88a21bf6916)

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/1231fa11cd944264bb1f56bc4ab243de/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.10.37.png)

また、詳細ページの meta タグを確認してみてください。

```tsx
<meta
  property="og:image"
  content={`${process.env.APP_URL}/api/og?title=${post.title}`}
/>;
```

上記のように記述していますが、ビルドされたあとはAPIから取得したデータのタイトルが表示されていることが確認できます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/ee104e9b8f0d44589b1fe01f768befce/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-23%2018.32.41.png)

これで、ページごとにOG画像が生成されるようになったので、最後にデプロイしてOGP確認ツールで見てみます。

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/75a32e58be1c41ea84203d2cce0bcf4f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-24%2012.47.05.png)

ページのタイトルを取得してOG画像が設定されていることが確認できました。

## その他カスタマイズ

OG画像の設定はできるようになったので、あとはスタイルをカスタマイズして完成させます。

公式の方でサンプルを用意していたり、play groundで確認できたりするので、後は自分好みにカスタマイズしてスタイルを整えていきましょう。

https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples

https://og-playground.vercel.app/

![](https://images.microcms-assets.io/assets/b26b0b6364c64a6191344b84bc3f3136/e78d5bace84846ffbe8078f83ceae062/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-24%2012.57.19.png)

## まとめ

もともとOG画像は自分で作成して設定していたりしたので、自動で生成してくれると楽ですし、デザインも統一されるのでとてもいいなと思いました。

Vercelが用意してくれているライブラリで簡単にOG画像が生成できるので、よかったら試してみてください。

次は「NFTと仮想通貨とブロックチェーン関連」について書いてくれる [FrozenVoice](https://qiita.com/FrozenVoice) さんの記事です。

https://qiita.com/FrozenVoice/items/9b5a607ec6c8d8ef9d54

Vercelが新しく出したライブラリを使用してNext.jsで作ったページのOG画像を動的に生成する方法を紹介します。

vercelのog image generationを使用して、Next.jsで動的にOG画像を自動生成する

Next.js × microCMS を使用してJamstackな個人サイトを作ってみました。