<p>「<a href="https://841-biboroku.info/entry/edge-runtime-keyword-search/" target="_blank" rel="noopener noreferrer nofollow">CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る</a>」で作成した検索ページをもとにmicroCMSのプレビュー画面を作成しました。</p><p>バージョン：Next.js v13.5.4（Pages Router）、@cloudflare/next-on-pages CLI v.1.8.6、microcms-js-sdk v2.7.0</p><h2 id="h74bfa52507">microCMSに画面プレビューボタンを表示する</h2>

<ol><li>API設定＞画面プレビューを開く</li><li>遷移先URLを設定<br>https://プレビュー表示させるドメイン/プレビュー用のページ/?id={CONTENT_ID}&amp;draftKey={DRAFT_KEY}</li><li>画面プレビューボタンの表示をONにする</li><li>変更する</li><li>編集画面に「画面プレビュー」ボタンが表示される</li></ol><p>💬余談<br>ローカルで開発してるときは遷移先URLに「http://localhost:3000/」を設定してすぐ確認できるようにしてました。</p><h2 id="h514049fd38">プレビュー用ページ</h2>

import type {
  GetServerSideProps,
  InferGetServerSidePropsType,
  NextPage,
} from "next";
import { getBlogDetail, getAllCategoryList } from "@/libs/microcms";
import type { Blog, Category } from "@/libs/microcms";
import { NextSeo } from "next-seo";
import { CategoryList } from "@/components/CategoryList";
import { Article } from "@/components/Article";

export const runtime = "experimental-edge";

type Props = {
  post: Blog;
  categories?: Category[];
} & InferGetServerSidePropsType<typeof getServerSideProps>;

const Page: NextPage<Props> = ({ post, categories }) => {
  if (post)
    return (
      <>
        <NextSeo noindex={true} />
        <Article post={post} />
        <CategoryList categories={categories} />
      </>
    );
};
export default Page;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const postId = context.query.id;
  const draftKey = context.query.draftKey;
  const post = postId
    ? await getBlogDetail(`${postId}`, {
        draftKey: `${draftKey}`,
      })
    : null;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  if (!post) {
    return {
      notFound: true,
    };
  }

  const data = {
    post,
    categories,
  };

  return {
    props: data,
  };
};

<h4 id="ha2d7bf771c">エッジランタイムの設定</h4><p><a href="https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#4-ensure-all-server-rendered-routes-use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Ensure all server-rendered routes use the Edge Runtime</a></p><p>Cloudflare PagesでSSRするときに必要な設定をプレビューページに設定します。</p><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="h6b6fe95a5b">コンテントIDと下書き状態を取得するdraftKeyのクエリ文字列を取得</h4>

const postId = context.query.id;
const draftKey = context.query.draftKey;
const post = postId
  ? await getBlogDetail(`${postId}`, {
      draftKey: `${draftKey}`,
    })
  : null;

<p>getBlogDetail()はmicroCMS SDKの<a href="https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#get-single-content-with-parameters" target="_blank" rel="noopener noreferrer nofollow">getListDetail()</a>を使って記事を取得するようにしています。</p><p>これで終わりです。</p><p>あとはほぼ検索結果ページと同じ仕組みにしているので、簡単に実装ができました。</p>

Cloudflare Pages×Next.jsで実装するmicroCMSのプレビュー画面

<p>React-Virtuoso、React-Window、React-Virtualizedの３つを同じ記事データを使って実装比べをしてみました。</p><p>3つとも複雑さはなく簡単に実装することができました。個人的には、React-Virtuosoがシンプルかつ要素の高さを自動で可変対応してくれる機能が備わっていて使いやすかったです。</p><h2 id="hb15b677c17">仮想スクロールを実装</h2><p>大量のダミーデータを使ってもよかったのですが、1200件記事（手持ちの記事30件×40）で実装しました。</p><p>↓スクロールするとDOMが更新されていることが分かります。スルスル・サクサク動きます。</p>

<h3 id="hfe5731c37c">React-Virtuoso</h3><p><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">https://virtuoso.dev/</a></p>

import debounce from "lodash/debounce"; // lodashのdebounce関数を使う
import { Virtuoso } from "react-virtuoso";

const Filters = ({ posts }: PostProps) => {
  const [filter, setFilter] = useState("");
  const [filteredPosts, setFilteredPosts] = useState(posts);

  useEffect(() => {
    const delayedFilterPosts = debounce(() => {
      const filtered = posts.filter((post) =>
        post.title.toLowerCase().includes(filter.toLowerCase())
      );
      setFilteredPosts(filtered);
    }, 300);

    delayedFilterPosts();

    return () => {
      delayedFilterPosts.cancel();
    };
  }, [filter, posts]);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFilter(e.target.value);
  };

  return (
    <>
      <input
        type="text"
        placeholder="word..."
        value={filter}
        onChange={handleInputChange}
        style={inputText}
      />
      <Virtuoso
        style={list}
        data={filteredPosts}
        totalCount={filteredPosts.length}
        itemContent={(index, post) => (
          <p key={index}>{post.title}</p>
        )}
      />
    </>
  );
};
export default Filters;

<h3 id="h8cb5f3aa41">React-Window</h3><p>有名な仮想リストライブラリです。</p><p><a href="https://react-window.vercel.app/#/examples/list/fixed-size" target="_blank" rel="noopener noreferrer nofollow">https://react-window.vercel.app/#/examples/list/fixed-size</a></p>

import { FixedSizeList as List } from "react-window";

const Row = ({
  index,
  style,
}: {
  index: number;
  style: React.CSSProperties;
}) => <p style={style}>{filteredPosts[index].title}</p>;

return (
  ～
  <List
    height={500}
    itemCount={filteredPosts.length}
    itemSize={30}
    width={"100%"}
  >
    {Row}
  </List>
  ～
)

<h3 id="h839d11de92">React-Virtualized</h3><p>React-windowと同じ方が制作されていて、<a href="https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized" target="_blank" rel="noopener noreferrer nofollow">React-Windowとの違い</a>も紹介されています。</p><p><a href="https://bvaughn.github.io/react-virtualized/#/components/Masonry" target="_blank" rel="noopener noreferrer nofollow">https://bvaughn.github.io/react-virtualized/#/components/Masonry</a></p>

import { List } from "react-virtualized";

const rowRenderer = ({
  index,
  key,
  style,
}: {
  index: number;
  key: string;
  style: React.CSSProperties;
}) => (
  <div key={key} style={style}>
    {filteredPosts[index].title}
  </div>
);

return (
  ～
  <List
  width={600}
  height={400}
  rowCount={filteredPosts.length}
  rowHeight={30}
  rowRenderer={rowRenderer}
  />
  ～
)


<h2 id="h1bb903a08e">&lt;input&gt;に入力したテキストで記事を絞り込む</h2><p>onChangeイベントを発生させるので、過剰に発生させないようにするためlodashのdebounce関数を使用して制限しました。</p>

// debounce関数で処理を間引く
const delayedFilterPosts = debounce(() => {
  // フィルタリング処理
  const filtered = posts.filter((post) =>
    post.title.toLowerCase().includes(filter.toLowerCase())
  );
  setFilteredPosts(filtered);
}, 300); // 300msの遅延を設定

delayedFilterPosts(); // 初回レンダリング時に実行

<p>debounce関数は、指定された関数を遅延させる関数を返します。この場合、300ミリ秒の遅延を設定しているので、delayedFilterPostsは300ミリ秒ごとに実行されます。これにより、filterPosts関数が短時間に連続して呼び出された場合に、最後の呼び出しのみが実際に実行され、過剰な処理を防ぎます。</p>

<h2 id="heaa723eefe">ChatGPTに聞いてみた</h2><table><tbody><tr><th colspan="1" rowspan="1"><p><strong>機能 / ライブラリ</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Virtualized</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Window</strong></p></th><th colspan="1" rowspan="1"><p><strong>React-Virtuoso</strong></p></th></tr><tr><td colspan="1" rowspan="1"><p>インストールの簡易さ</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>コミュニティのサポート</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>性能</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>メモリ使用量</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>カスタマイズ可能性</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>レンダリングの柔軟性</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>サポートされている<br>コンポーネントの種類</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>ドキュメントの質</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>セルの可変高さサポート</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr><tr><td colspan="1" rowspan="1"><p>ライブラリのサイズ</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td><td colspan="1" rowspan="1"><p>⭐⭐⭐⭐</p></td></tr></tbody></table><h3 id="h088bd2a600">ChatGPTに聞いたデメリット</h3><h4 id="h839d11de92">React-Virtualized</h4><ul><li>メモリ使用量がやや多い</li><li>セルの再利用が不十分</li></ul><h4 id="h8cb5f3aa41">React-Window</h4><ul><li>セルの可変高さサポートがやや不十分</li><li>ライブラリのサイズがやや大きい</li></ul><h4 id="hfe5731c37c">React-Virtuoso</h4><ul><li>コミュニティのサポートが限られている</li></ul><h3 id="h6dc2e58b5f">他にもChatGPTに聞いてみた</h3><p>📏メモリ使用量が小さい順<br><strong>React-Window</strong>　＜　React-Virtuoso　＜　React-Virtualized</p><p>📚ライブラリのサイズが小さい順<br><strong>React-Virtuoso</strong>　＜　React-Window　＜　React-Virtualized</p><p>🌎普及度（推測だそうです）<br><strong>React-Window（2018年）</strong>＞ React-Virtualized（2015年）＞ React-Virtuoso（2020年）<br>※（）…最初のバージョン</p><p></p>

<p>📝参考</p><ul><li><a href="https://zenn.dev/tara_is_ok/articles/a955a9561516da" target="_blank" rel="noopener noreferrer nofollow">無限スクロールにはReact-Virtuosoが良さそう🧩</a></li><li><a href="https://github.com/bvaughn/react-window/issues/665" target="_blank" rel="noopener noreferrer nofollow">setting height of items for VariableSizeList itemSize is not working.</a></li><li><a href="https://virtuoso.dev/" target="_blank" rel="noopener noreferrer nofollow">React Virtuoso ドキュメント</a></li><li><a href="https://codesandbox.io/s/react-virtuoso-custom-scrollbar-mz4lg" target="_blank" rel="noopener noreferrer nofollow">react-virtuoso custom scrollbar</a><p></p></li></ul>

仮想スクロールライブラリを使って記事一覧から特定の単語を含むタイトル記事を絞り込み表示する

<h2 id="h1f01853ea1">getServerSidePropsで検索ページを作る</h2>

export const runtime = "experimental-edge";

const Home: NextPage<Props> = ({ posts, keyword, totalCount, categories }) => {
  return (
    <>
      <div className={styles.header}>
        <SearchBox />
        <p className={styles.result}>該当：{totalCount}件</p>
      </div>
      <div className={styles.wrap}>
        {keyword === "" && <p>キーワードを入力してください</p>}
        {posts && totalCount > 0 && (
          <>
            <div className={styles.wrap}>
              <div className={styles.archive}>
                {posts
                  ? posts.map((post) => <PostItem key={post.id} post={post} />)
                  : ""}
              </div>
            </div>
          </>
        )}
        {totalCount === 0 && keyword && (
          <p className="notfound">
            「{keyword}」を含む記事はありません。
            <br />
            キーワードを変更して再検索してください。
          </p>
        )}
      </div>
      <CategoryList categories={categories} />
    </>
  );
};
export default Home;

export const getServerSideProps: GetServerSideProps = async (context) => {
  const keyword = context.query.q;
  const posts = keyword
    ? await getAllBlogList({
        q: `${keyword}`,
        fields: "必要なフィールドだけ取得（指定しなくてもいい）",
      })
    : null;
  const totalCount = posts ? posts.length : 0;
  const categories = await getAllCategoryList({ fields: "title,slug" });

  const data = keyword
    ? {
        posts,
        keyword,
        totalCount,
        categories,
      }
    : {
        keyword,
        totalCount,
        categories,
      };

  return {
    props: data,
  };
};

<h4 id="hcbe32938f2">エッジ ランタイムを設定</h4><pre><code>export const runtime = &quot;experimental-edge&quot;;</code></pre><h4 id="hc070b28ff1">クエリ文字列（?q=xxx）の取得</h4><pre><code>const keyword = context.query.q;</code></pre><h4 id="h1cc13c40af">microCMSのコンテンツの全文検索用のクエリパラメータを指定</h4><pre><code>q: `${keyword}`,</code></pre><p>getAllBlogListは、microCMS-SDKのコンテンツの全件取得を行うgetAllContents()メソッドを使っています。</p><pre><code>export const getAllBlogList = async (queries?: MicroCMSQueries) =&gt; {
 const listData = await client.getAllContents&lt;Blog&gt;({
  endpoint: &quot;blog&quot;,
  queries,
 });
 return listData;
};</code></pre><p>microCMSのドキュメントにもあるように、完全一致する結果を返してくれるわけではありませんが、そこまで厳密にしなくてもいいのでqクエリパラメータを使いました。</p><blockquote><p>qパラメータによる検索は、コンテンツに関する情報を形態素解析した結果を対象に実施されます。検索語句と一致するキーワードの登録がないコンテンツでも、検索結果に含まれることがあります。正確な部分一致検索が必要な場合は、filtersパラメータのcontainsの使用をご検討ください。</p></blockquote><p>クエリパラメータ q <a href="https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f"><u>https://document.microcms.io/content-api/get-list-contents#ha8abec0b2f</u></a></p><h4 id="he267d78153">keywordが未指定のとき</h4><p>keywordが指定されてないときは全件該当してしまうので、結果を返さないようにpostsを含まないようにしています。（もっといい書き方あるだろう・）</p>

<h2 id="h6c42ace2bd">Cloudflare PagesでSSRを使えるように設定</h2><p>設定＞ビルド＆デプロイ＞ビルドの構成のフレームワークプリセット「Next.js」を選択します。（※Next.js（Static HTML Export）ではなくNext.js）<br>ビルド コマンド、ビルド出力ディレクトリなど選択時に自動で初期値が設定されます。</p><p>設定＞functions＞互換性フラグに<code>nodejs_compat</code>を登録します。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/bb87002b4a5b4acb9dea6d962dfdfc11/image.png" alt="" width="966" height="557"></figure><p>デプロイして検索結果が表示されたら成功です🎉</p>

<h2 id="h93d835c79a">失敗・起こったエラー</h2><p>検索ページだけ作ってデプロイした結果</p><pre><code>Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error</code></pre><p>search/index.tsxに<code>export const runtime = &quot;edge&quot;;</code>を設定</p><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>next.config.jsに<code>runtime: &apos;edge&apos;,</code>を設定</p><pre><code>experimental: {
  runtime: &apos;edge&apos;,
},</code></pre><pre><code>Error: Page /search provided runtime &apos;edge&apos;, the edge runtime for rendering is currently experimental. Use runtime &apos;experimental-edge&apos; instead.</code></pre><p>search/index.tsxに<code>export const runtime = &quot;erimental-edge&quot;;</code>を設定</p><pre><code>00:17:31.819Error occurred prerendering page &quot;/search&quot;. Read more: https://nextjs.org/docs/messages/prerender-error
00:17:31.819ReferenceError: self is not defined</code></pre><p>ビルドの構成から<code>next export</code>を削除したら静的ファイルが全部出力されなくなった・・</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/fced5e74e5b340aea6c3934df6ec4d15/image.png" alt="" width="986" height="293"></figure><p>ビルドの構成をNext.js（Static HTML Export）からNext.jsに変更して再デプロイしたら「Node.JS Compatibility Error」<br>「互換nodejs_compat性フラグが設定されていません」とのこと。</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/b216e7c8f0fb410a965199b3f0b592f8/image.png" alt="" width="1059" height="432"></figure><h4 id="h370f4f57eb">ローカルの/search/ページでInernet Server Errorがでる</h4><pre><code>⚠ You are using an experimental edge runtime, the API might change.</code></pre><p>まだ解決できず、ローカルで動作確認するときはコメントアウトしています；</p><h4 id="hcd63b0c9a9">middlewareで設定していたBasic認証が効かなくなった</h4><p>以前、<a href="https://841-biboroku.info/entry/cloudflare-pages-function-basic-auth/" target="_blank" rel="noopener noreferrer nofollow"><u>functions/_middleware.tsでBasic認証を設定</u></a>をしていましたが、Edge runtimeの設定をしたら該当ファイルを読まなくなりBasic認証が解除されてしまいました。なのでBasic認証はNext.jsのmiddlewareに切り替えて実装することにしました。</p><p><br></p>

<p>📝参考<br>・<a href="https://blog.microcms.io/astro-search/" target="_blank" rel="noopener noreferrer nofollow">AstroとmicroCMSを使った検索機能を実装する</a><br>・Cloudflare Deploy a Next.js site＞<a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-the-edge-runtime" target="_blank" rel="noopener noreferrer nofollow">Use the Edge Runtime</a><br>・<a href="https://developers.cloudflare.com/workers/runtime-apis/nodejs/" target="_blank" rel="noopener noreferrer nofollow">CloudflareダッシュボードからNode.jsを有効にする</a><br>・<a href="https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/examples.md" target="_blank" rel="noopener noreferrer nofollow">packages/next-on-pages/docs/examples.md</a></p>

<h2 id="h44f833b591">追記：sitemap.xmlが生成されなくなっていた</h2><p>cloudflareのビルドコマンドを変更したときにビルド出力ディレクトリが<code>.vercel/output/static</code>に切り替わったのにnext-sitemap.config.jsが以前の設定のままだったことが原因でした。<br>next-sitemap.config.jsの設定を変更し再デプロイで生成されるようになりました。</p>

//修正前
module.exports = {
  outDir: './out',
}

//修正後
module.exports = {
  outDir: '.vercel/output/static',
}

CloudflareのEdge RuntimeとmicroCMSのqパラメータを使ってキーワード検索結果ページを作る

<p>OGP画像をmicroCMSで紹介されている「<a href="https://blog.microcms.io/imgix-ogp/" target="_blank" rel="noopener noreferrer">imgixで動的画像・OGPを作成する</a>」を参考に設定しました。</p><p><br></p><h2 id="hc5442734bc">自動生成したOGP</h2><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4f0b9cc0f7a74337b0390aa53eeef6ca/ogp-sample.png" alt="" width="1200" height="630"></p><p><br></p><p><br></p>

import base64url from "base64url";

export const createOgImage = (title: string, color: string) => {
  const ogImageUrl = `${ベースになる画像URL}?w=1200&h=630&blend64=${base64url(
    `https://assets.imgix.net/~text?txtsize=50&txt-color=${color}&w=1000&h=230&txt-align=middle,left&txtfont=Hiragino%20Sans%20W6&txt-track=2&txt64=${base64url(
      title
    )}`
  )}&blend-mode=normal&blend-x=100&blend-y=200&monochrome=95${color}&fm=png`;
  return { ogImageUrl };
};

<h3 id="h4b5581ac68">選択したカテゴリによってロゴカラーを変化させる</h3><p>使用したimgixパラメータは、「<a href="https://docs.imgix.com/apis/rendering/stylize/monochrome" target="_blank" rel="noopener noreferrer">monochrome</a>」。</p><p>色を設定することで全体の色相を変化させることができます。</p><p><br></p><p>用意したベース画像のロゴは、指定した色によって変化させるためあえてグレースケールにしています。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/681fc260d17943b8997324794108c203/ogpbase.png?w=350&amp;h=183" alt="" width="350" height="183"></p><p><br></p><p>カテゴリのAPIスキーマにイメージカラー（imgColor）のフィールドを追加し、カラーコードを設定します。</p><p>1つ目のカテゴリに指定したimgColorをmonochromeに設定することで、選択したカテゴリによってOGP画像内のロゴカラーを変化させています。</p>

<h3 id="h148780a7d5">タイトルが複数行になっても上下中央に配置する</h3><pre><code>w=1000&amp;h=230</code></pre><p>タイトルが入る枠の幅と高さ位置を設定。</p><p>高さは最大3行を想定した高さにしました。</p><p><br></p><pre><code>txt-align=middle,left</code></pre><p>タイトル枠に対してテキストに配置を上下中央の左寄せにします。</p><p><br></p><pre><code>blend-x=100&amp;blend-y=200</code></pre><p><strong>X軸</strong></p><p>(OGP画像の幅(1200px)-テキスト枠の幅(1000px))÷2=100</p><p><strong>Y軸</strong></p><p>OGP画像の高さ(630px)÷2-タイトル枠(230px)÷2=200</p>

<h2 id="h30484efed0">OGP画像を設定する</h2><p>記事詳細ページに先ほど作成したコンポーネントを読み込み画像のURLを生成する。</p><p>生成したURLをnext-seoのimages-&gt;urlに設定するだけでOK。</p>

import { createOgImage } from "@/components/createOgImage";
～略
const PostDetail: NextPage<PostPageProps> = ({ postData, categories }) => {
  const { ogImageUrl } = createOgImage(post.title, post.category[0].imgColor);
  return (
    <>
      <NextSeo
        title={post.title}
        canonical={pageUrl}
        openGraph={{
          url: pageUrl,
          images: [
            {
              url: ogImageUrl,  //生成したOGPのURLを設定
            },
          ],
          title: post.title,
        }}
      />
～略
    </>
  );
};

microCMS×imgixでOGPを自動生成する

<p>新たにカテゴリページを追加したので、API作成からNext.jsへの反映までを記事にまとめました。</p><p><br></p><p>▼変更前・変更後</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e054d23c5cdb496bbc1d4d3855bc8c0d/category.png" alt="" width="1000" height="476"></p><ul><li>カテゴリアーカイブ一覧の作成</li><li>カテゴリのサイドバーを追加</li></ul>

<h2 id="h9fbfbdfa42">microCMSのAPI設定</h2><h3 id="h617c224214">カテゴリ用のAPIを作成</h3><p>作成したAPIスキーマのフィールドは以下の通り</p><ul><li>タイトル</li><li>スラッグ</li></ul><p><br></p><p>両フィールドとも必須設定。</p><p>スラッグは、カテゴリアーカイブURLにも使用するため重複しないようにユニーク設定を有効にしました。</p><p><br></p><blockquote>重複を許可しない（ユニーク）<br>他のコンテンツで同じ値がある場合にはコンテンツを保存できなくなります。1つのAPIに対して最大で5つのフィールドに設定が可能です。</blockquote><p><br></p><h3 id="h3c014f255c">記事APIのAPIスキーマにカテゴリのフィールドを追加</h3><p>種類 - 複数コンテンツ参照を選択。</p><p><s>このままでは記事作成画面でカテゴリを選択すると参照元のコンテンツIDが登録・表示され、何のカテゴリを選択したのかわからなくなります。</s></p><p><s>種類を選択したあとは、詳細で一覧画面に表示する項目を「タイトル」に変更することをおすすめします。</s></p><p><br></p><p>記事にカテゴリを紐づけてmicroCMSの設定は完了です。</p><h3 id="hcf83e1357e"><br></h3>

<h2 id="h0ed606a662">Next.jsにカテゴリを表示</h2><h3 id="hb3bea170cb"><strong>追加したフォルダ・ファイル</strong></h3><p>もともと作成していたファイルは除き、カテゴリ情報を追加・表示するために追加したフォルダ・ファイルの一覧です。</p>

📁src
├ 📁api
│└ 📁cateogry
│　└ index.ts
├ 📁components
│　└ CategoryList.tsx
├ 📁pages
│└ 📁category
│　├ 📁[slug]
│　│　└ index.tsx
│　├ 📁page
│　│　└ [num].tsx
├ 📁types
│　└ category.ts
└ 📁utils
  　└ fetchCategory.ts

<h3 id="h1a7737a701">APIクライアントの作成</h3><p>microCMS公式ブログでも紹介されているaspidaでカテゴリ用のAPIクライアントを作成します。</p><p>複数ページで読み込めるように使用するため以下のファイルで</p><p><br></p><p>参考：<a href="https://blog.microcms.io/how-to-use-aspida" target="_blank" rel="noopener noreferrer">Aspida + microcms-js-sdkを使った型安全なAPI開発</a></p>

// api/content/index.ts
import { MicroCMSListResponse, MicroCMSQueries } from 'microcms-js-sdk';
import { Category } from '@/types/category';

export type Methods = {
  get: {
    query?: MicroCMSQueries,
    resBody: MicroCMSListResponse<Category>
  }
}

<h3 id="h3339f7c956">カテゴリ一覧を作る</h3><ul><li>カテゴリを全件取得（件数が多くないので一旦limit:300で取得）</li><li>カテゴリのスラッグフィールドをページURLに使用するのでフォルダ名を[slug]とする</li><li>2ページ目以降はpageフォルダに[num].tsxを作成</li></ul>

import { client } from "@/utils/client"

export const fetchCategories = () => {
  const categories = client.category.$get({
    query: {
      offset: 0,
      limit: 300,
    },
  });
  return categories;
};

import { fetchCategories } from "@/utils/fetchCategory";
//略
export const getStaticPaths: GetStaticPaths = async () => {
  const data = await fetchCategories();
  const paths = data.contents.map((content) => `/category/${content.slug}`);
  return { paths, fallback: false };
};
export const getStaticProps: GetStaticProps = async (context) => {
  const slug = context.params?.slug;
  const categories = await fetchCategories();
  const filterCategories = await client.category.$get({
    query: {
      filters: `slug[equals]${slug}`,
    },
  });
  const category = filterCategories.contents[0];
  const data = await client.blog.$get({
    query: {
      limit: BLOG_POSTS_PER_PAGE,
      filters: `category[contains]${category.id}`,
    },
  });
  return {
    props: {
      category,
      categories: categories.contents,
      postsData: data.contents,
      totalCount: data.totalCount,
      offset: data.offset,
    },
  };
};
//略

<p>カテゴリのスラッグがイコールの場合・・としてしまいそうだが、<code>category[equals]${category.slug}</code>では取得できない。</p><p> </p><p><code>filters: category[contains]${category.id}</code></p><p>記事対してカテゴリを「複数のコンテンツ参照」で紐づけているためフィルタリング機能で取得する</p><p><br></p><p><strong>category</strong>（<u>記事のカテゴリフィールド</u>）<strong>[contains]</strong>（<u>絞り込む</u>）<strong>${category.id}</strong>（<u>カテゴリのコンテンツID</u>）</p>

<h3 id="h489a66bcb4">２ページ目以降の一覧を作る</h3>

export const getStaticPaths: GetStaticPaths = async () => {
  const categories = await fetchCategories();
  const resPaths = await Promise.all(
    categories.contents.map((category) => {
      const result = client.blog
        .$get({
          query: {
            offset: BLOG_POSTS_PER_PAGE,
            limit: 300,
            filters: `category[contains]${category.id}`,
          },
        })
        .then(({ totalCount }) => {
          if (totalCount <= BLOG_POSTS_PER_PAGE) return [];
          const range = (start: number, end: number) =>
            [...Array(end - start + 1)].map((_, i) => start + i);
          return range(2, Math.ceil(totalCount / BLOG_POSTS_PER_PAGE)).map(
            (i) => `/category/${category.slug}/page/${i}`
          );
        });
      return result;
    })
  );
  const paths = resPaths.flat();
  return {
    paths,
    fallback: false,
  };
};

<pre><code>offset: BLOG_POSTS_PER_PAGE,</code></pre><p>１ページ目は、src/pages/category/[slug]/index.tsx で表示しているので記事の開始位置を表示件数分ずらす</p><p><br></p><pre><code>if (totalCount &lt;= BLOG_POSTS_PER_PAGE) return [];</code></pre><p>１ページあたりの表示件数より記事数が少ない場合は、空配列を返す</p><p><br></p><pre><code>&nbsp;return range(2, Math.ceil(totalCount / BLOG_POSTS_PER_PAGE)).map(</code></pre><p>１ページ目はpathsに含めないためrangeのstart=2とする</p><p><br></p><p>参考：<a href="https://blog.hpfull.jp/nextjs-xmicrocms-tag/" target="_blank" rel="noopener noreferrer">Next.js×microCMSでタグ機能を作成する！[ネストされた動的なルーティング][getStaticPaths]</a></p><p><br></p><h3 id="hd996cb9bdd">pathsの中が知りたい・・</h3><pre><code>console.log(paths)</code></pre><p><br></p><p>Google Chromeデベロッパーツール＞コンソールでは確認できません。</p><p><br></p><blockquote>getStaticPaths will only run during build in production, it will not be called during runtime.</blockquote><p><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching/get-static-paths" target="_blank" rel="noopener noreferrer">Next.jsドキュメント</a></p><p><br></p><p>公式ドキュメントで紹介されているツールかVScodeのターミナルで中身が確認できます。</p><p><br></p><p>npm run dev で実行し、該当ページにアクセスするとVSCodeのターミナルにpathsの値が表示されます。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a138ccc6fe5f49ddbb1fd5e4678e9775/rapture_20230625180816.png" alt="" width="675" height="131"></p>

<h2 id="h054e36b801">各カテゴリ一覧へのリンクボタン（サイドバー）を作って各ページで読み込む</h2>

import { Content } from "@/api/types";
import Link from "next/link";
import styles from "./CategoryList.module.scss";
import clsx from "clsx";

type CategoryListProp = {
  categories?: Content[];
  currentSlug?: string;
};
export const CategoryList = ({ categories, currentSlug }: CategoryListProp) => {
  return (
    <div className={styles.wrap}>
      <p className={styles.head}>Category</p>
      <ul className={styles.list}>
        {categories &&
          categories.map((category, index) => {
            return (
              <li
                key={index}
                className={clsx(
                  styles.item,
                  currentSlug === category.slug && styles.current
                )}
              >
                <Link
                  href={`/category/${category.slug}/`}
                  className={styles.link}
                >
                  {category.title}
                </Link>
              </li>
            );
          })}
      </ul>
    </div>
  );
};

<p>作成したCategoryListコンポーネントを各ページに読み込む</p>

<CategoryList categories={categories} />

//カテゴリ一覧にはカレントページのslug情報を渡す
<CategoryList categories={categories} currentSlug={category.slug} />
