<h2 id="h6fceea6134">なぜprism.jsからReact Syntax Highlighterのprismに変更したか</h2><p>「📝<a href="https://841-biboroku.info/entry/syntax-highlighting-prism/" target="_blank" rel="noopener noreferrer">本文にシンタックスハイライトprism.jsを設定する</a>」の設定不足か、一部言語でスタイルが反映されませんでした。</p><p>babel-plugin-prismjsと.babelrc.jsonを設定したことでスタイルが反映は反映されるようになりましたが、<code>"next/font" requires SWC although Babel is being used due to a custom babel config being present.</code>のエラーが出たので、いっそのこと違うシンタックスハイライトを導入しようと思い変更に至りました。</p><p>React Syntax Highlighterは、hljsとprismjsのどちらかを選択できる点もよかったです。</p><h2 id="hd2ed38fd27">記事ページにReact Syntax Highlighterを設定する</h2><h3 id="h58a6675258">パッケージのインストール</h3>

npm i react-syntax-highlighter
npm i @types/react-syntax-highlighter

<h3 id="hc695bb593b">インポートと設定</h3><p>公式通り設定したのですが、エラーになったり・ならなかったり・・</p><p>「<a href="https://tetsuyaohira.com/posts/2023-03-19-syntaxhighlight/" target="_blank" rel="noopener noreferrer">コードブロックのシンタックスハイライト対応しました</a>」こちらの記事を参考にテーマの読み込み方を変更したらエラーがなくなりました。</p>

//変更前
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";

//変更後
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";

<h3 id="hd4520f1ca7">コードブロック箇所の置き換え</h3>

//変更前
<pre className={clsx(styles.pre, `language-${sec.lang}`)}>
 <code className={`language-${sec.lang}`}>{sec.body}</code>
</pre>

//変更後
<SyntaxHighlighter
  language={`${sec.lang}`}
  style={tomorrow}
>
  {sec.body}
</SyntaxHighlighter>

<p>microCMS側で言語を指定しているのでその値をlanguageに設定しています。</p><p><code>language={sec.lang}</code>をそのまま設定してもシンタックスハイライトが反映されなかったので、<code>language={`${sec.lang}`}</code>に書き換えました。</p>

<h3 id="haaf34b8401">行番号オプション</h3><p>showLineNumbers={true}</p><p>有効にすると左に行番号が表示されます。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/039bebabc46e42c6a356a403c209226f/Group%2078.png" alt="" width="826" height="104"></p><p><code>startingLineNumber="行番号（数字）"</code>を指定すると開始行番号が指定の番号になります。</p>

シンタックスハイライトをprism.jsからReact Syntax Highlighterのprismに変更する

<p>Next-Image-Export-Optimizer<br>https://github.com/Niels-IO/next-image-export-optimizer<br><br>Next Export Optimize Images<br>https://github.com/dc7290/next-export-optimize-images<br><br>next-optimized-images<br>https://github.com/cyrilwanner/next-optimized-images</p>

<p>next/imageの&lt;Image&gt;コンポーネントを使ったときに、どのような結果が得られるか以下の項目に注目して比較してみました。</p><ul><li>必須・任意オプションの使い方</li><li>出力されたhtmlタグ</li><li>画像の容量・ファイルタイプ（形式）</li><li>画像ファイルの幅</li></ul>

<h2 id="h2000e56ab1">条件</h2><h3 id="h728deac966">用意した画像</h3><p>1000x1000px　サイズ：1.19MB（圧縮していない）　タイプ：jpeg</p><h3 id="h97ff70ca9c">next.config.js</h3><p>構成オプションは未設定＝デフォルトのまま</p><p>deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]</p><p>imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]</p>

<h2 id="h9468635d9d">必須プロパティを設定したとき</h2><p>用意した画像を静的インポートし、必須のプロパティaltを設定してみます。</p><p>srcに静的インポートとfillをしていない場合は、幅と高さの設定が必須となります。</p>

import Image from "next/image";
import sample from "@/public/images/sample.jpg";

<Image src={sample} alt="サンプル画像" />
<Image src={sample} width={1000} height={1000} alt="サンプル画像" />

<p>サイズ：133kB　タイプ：webp</p><p>静的インポートした場合、幅と高さを指定しなくても同じ出力結果になります。</p><p><br></p><pre><code>&lt;Image src="/images/sample.jpg" width={1000}&nbsp;height={1000}&nbsp;alt="サンプル画像"&nbsp;/&gt;</code></pre><p>インポートした画像ではなく、srcに画像パスを設定した場合はsrcsetのurlに指定されるURLから_next/static/mediaがなくなり指定した画像パスのみとなりました。</p><p>（※パスを指定する場合、width/heightが必須になります）</p><pre><code>srcset="/_next/image/?url=%2Fimages%2Fsample.jpg～</code></pre><h3 id="h9475dd704c">幅1000px指定で適用された画像</h3><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/6dc0682c8db34c5ea5a56b2e530f1960/Group%2083.png" alt="" width="754" height="136"></p><h3 id="hf7b41362de">💡width/heightに100pxを設定した場合どうなる？</h3>

<h3 id="ha10622968e">幅100px指定で適用された画像</h3><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/a98dbed21da5465499f56a5ceaba6132/Group%2085.png" alt="" width="748" height="136"></p><p><br></p><blockquote>imageSizes が sizes の prop を提供する画像にのみ使用されるためです。これは、画像が画面の全幅よりも小さいことを示します。したがって、imageSizes のサイズはすべて、deviceSizes の最小サイズよりも小さくする必要があります。</blockquote><p>引用元：<a href="https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next/image#%E7%94%BB%E5%83%8F%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95" target="_blank" rel="noopener noreferrer">next/image | Next.js</a></p><p><br></p><p>imageSizesのデフォルト</p><p>imageSizes: [16, 32, 48, 64, 96, 128, 256, 384]</p>

<h2 id="h42bb1d0645">オプションプロパティを設定したとき</h2><h3 id="hc7f3aa96ab">fill={true}</h3><p>親要素に対して塗りつぶされるので画像には幅と高さを設定せず、.boxにposition:relativeを設定しています。</p>

<h3 id="hd36b141573">fill={true} style={{objectFit: "cover"}}</h3><p>塗りつぶしにobject-fit:coverを適用</p>

<p>サイズ：133kB　タイプ：webp</p><p>styleを追加しただけなのでサイズ・タイプに変化はありません。</p>

<h3 id="hb16f2450f0">quality={50}</h3><p>1～100（低品質～高品質）の間で品質を指定します。</p>

<p>quality={50}　サイズ：98.1kB　タイプ：webp</p><p>quality={25}　サイズ：66.7kB　タイプ：webp</p><p>qualityを指定しない場合、q=75が自動で設定されます。</p>

<h3 id="h7ad26f328b">unoptimized</h3><p>trueで品質・サイズ・形式を変更せずそのままを表示します。</p>

<h3 id="h301f96dc1d">placeholder="blur" blurDataURL="data:image/webp;base64,xxxxx"</h3>

<p>サイズ：133kB　タイプ：webp</p><p><br></p><p><a href="https://blurred.dev/" target="_blank" rel="noopener noreferrer">https://blurred.dev/</a></p><p>blurDataURLに設定するblur画像をbase64に変換してくれるジェネレータ</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9a05f3e0c2b64ffea27fbe8180b77559/Mask%20group.jpg?w=800&amp;h=514" alt="" width="800" height="514"></p>

<h3 id="h263b373607">priority={true}</h3><p>デフォルトはfalse＝遅延読み込みされる設定になっています。</p><p>Next.jsの公式では<a href="https://nextjs.org/learn/seo/web-performance/lcp" target="_blank" rel="noopener noreferrer">LCP</a>で検出された画像に適用するようにあります。</p><p>ファーストビュー（メインビジュアル）に使用するのがいいかと思います。</p>

<p>サイズ：133kB　タイプ：webp</p><p><br></p><p>imgタグからloading="lazy"が消え画像の遅延読み込みはされません。</p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/82244e803c114a8ead52561b4a646ecb/rapture_20230723021532.png" alt="" width="828" height="139"></p>

<h3 id="h8c801a8c5e">💡どの画像が適用される？</h3><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/8312408b8a314749b4b5720431d0cf21/Group%2092.png" alt="" width="756" height="182"></p><p>📱ブラウザ幅375px・Retina2x</p><p>375x2=750px　→750px幅の画像を読み込む</p><p>サイズ：92.2 kB　タイプ：webp</p><p><br></p><p>💻ブラウザ幅300px</p><p>(max-width: 768px) 100vwが適用され100vw=300px　→384pxの画像を読み込む</p><p>サイズ：37.6 kB　タイプ：webp</p><p><br></p><p>💻ブラウザ幅760px</p><p>(max-width: 768px) 100vwが適用され100vw=760px　→828pxの画像を読み込む</p><p>サイズ：104kB　タイプ：webp</p><p><br></p><p>💻ブラウザ幅1100px</p><p>(max-width: 1200px) 50vwが適用され50vw=550px　→640pxの画像を読み込む</p><p>サイズ：75.1kB　タイプ：webp</p><p><br></p><p>💻ブラウザ幅2560px</p><p>33vwが適用され33vw=852.48... →1080pxの画像を読み込む</p><p>サイズ：133kB　タイプ：webp</p><p><br></p>

next/imageの<Image>コンポーネントのプロパティとhtmlの出力タグを見比べてみる

<p>https://nextjs.org/docs/messages/built-in-next-font</p>

<p>実行するとターミナルに@next/fontからnext/fontに変えましょう。Next.js 14では@next/fontがなくなります。という以下のメッセージが出ていたので、next/fontに変更したときの記録です。</p><p><br></p><blockquote>Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font&nbsp;</blockquote><p><br></p><p><a href="https://nextjs.org/docs/messages/built-in-next-font" target="_blank" rel="noopener noreferrer">Built-in next/font</a></p><p>Next.js 13.2 以降でビルトインフォントが使えます。</p><p><br></p><pre><code>npx @next/codemod@latest built-in-next-font .</code></pre><p><br></p><p><s>実行するとpackage.jsonから”@next/font”が自動で消えます。</s></p><p><s>@next/fontでインポートしていたページも自動的に差し替えてくれました（便利！）</s></p><p>このコマンドを使うことで@next/fontをnext/fontに置き換え・変換してくれるようです。</p><p><br></p><p>変更前</p><pre><code>import { Noto_Sans_JP } from "@next/font/google";</code></pre><p>↓</p><p>変更後</p><pre><code>import { Noto_Sans_JP } from "next/font/google";</code></pre><p><br></p>

フォントの設定を@next/fontからnext/fontのビルトインフォントに変更する

<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} />


microCMSにカテゴリAPIを作成しカテゴリ一覧ページとカテゴリ一覧ボタンのサイドバーを表示する

<p>microCMS公式ブログで紹介されている「<a href="https://blog.microcms.io/next-pagination/" target="_blank" rel="noopener noreferrer">Next.js(SSG)でページネーションを実装してみよう</a>」を参考にページネーションを作ってみる。</p><p><br></p><h2 id="h9f510f3156">やりたいこと</h2><ul><li>最初、最後、前へ、次へのリンク表示<ul><li>カレントが1ページ目の場合、最初と前へは非表示</li><li>カレントが最後のページの場合、最後と次へは非表示</li></ul></li><li>表示するページネーション数を指定できる<ul><li>カレントを中央値として前後表示（表示数が奇数・偶数どちらでもOK）</li><li><s>カレントから前後〇ページ分表示</s></li><li>表示するページネーション数が全体のページネーション数を超えた場合、全体のページネーション数を上限にする</li></ul></li></ul><p><br></p><p><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/45f50ce1ccce4f3fb472860b30ac24e3/pagination.png" alt="" width="449" height="483"></p><p><br></p><h3 id="h1775fff60d">設定ファイル</h3><p>const/setting.ts</p><p>表示用テキストは空欄にすると非表示になる</p><p>FIRST_TXT : "",</p>

type PageNaviProps = {
  FIRST_TXT: string;
  LAST_TXT: string;
  PREV_TXT: string;
  NEXT_TXT: string;
  ITEMS: number;
  POSTS_PER_PAGE: number;
}

export const PAGE_NAVI:PageNaviProps = { 
  FIRST_TXT : "≪",
  LAST_TXT : "≫",
  PREV_TXT : "<",
  NEXT_TXT : ">",
  ITEMS: 4,
  POSTS_PER_PAGE: 10
}

<h3 id="h1dbdfa8619">ページネーションコンポーネント</h3><p>components/Pagination.tsx</p>

import Link from "next/link";
import { PAGE_NAVI } from "@/const/setting";

type PaginationProps = {
  currentPage: number;
  totalCount: number;
  postPerPage?: number;
  parentSlug?: string;
  rewriteSlug?: string;
};

export const Pagination = ({
  currentPage,
  totalCount,
  postPerPage = PAGE_NAVI.POSTS_PER_PAGE,
  parentSlug = "",
  rewriteSlug,
}: PaginationProps) => {
  const dir = rewriteSlug
    ? `/${rewriteSlug}`
    : parentSlug
    ? `/${parentSlug}`
    : "";
  const range = (start: number, end: number) =>
    [...Array(end - start + 1)].map((_, i) => start + i);
  const lastPageNum = Math.ceil(totalCount / postPerPage);

  const firstPage = currentPage > 1 ? 1 : 0;
  const prevPage = currentPage > 1 ? currentPage - 1 : 0;
  const nextPage = currentPage < lastPageNum ? currentPage + 1 : 0;
  const lastPage = currentPage < lastPageNum ? lastPageNum : 0;

  const median = Math.ceil(PAGE_NAVI.ITEMS / 2) - 1;

  const left =
    currentPage - median > lastPageNum - PAGE_NAVI.ITEMS
      ? lastPageNum - PAGE_NAVI.ITEMS
      : Math.max(0, currentPage - median - 1);

  const right = left + PAGE_NAVI.ITEMS;

  const pageItems = range(1, Math.ceil(totalCount / postPerPage)).map(
    (number, index) => ({
      url: number === 1 ? "/" : `/page/${number}`,
      txt: number,
      current: currentPage === number ? true : false,
    })
  );
  const rangePageItems =
    PAGE_NAVI.ITEMS > lastPageNum ? pageItems : pageItems.slice(left, right);

  const fistPageItem = {
    url: firstPage > 0 ? "/" : "",
    txt: PAGE_NAVI.FIRST_TXT,
  };
  const prevPageItem = {
    url: prevPage > 0 ? (prevPage === 1 ? "/" : `/page/${prevPage}`) : "",
    txt: PAGE_NAVI.PREV_TXT,
  };
  const nextPageItem = {
    url: nextPage > 0 ? `/page/${nextPage}` : "",
    txt: PAGE_NAVI.NEXT_TXT,
  };
  const lastPageItem = {
    url: lastPage > 0 ? `/page/${lastPage}` : "",
    txt: PAGE_NAVI.LAST_TXT,
  };
  const allPageItems = [
    fistPageItem,
    prevPageItem,
    ...rangePageItems,
    nextPageItem,
    lastPageItem,
  ];

  return (
    <ul className="flex">
      {allPageItems.map((page, index) =>
         page.url ? (
        <li key={index}>
            <Link
              href={`${dir}${page.url}`}
              className={`p-4${
                "current" in page && page.current ? " font-bold" : ""
              }`}
            >
              {page.txt}
            </Link>
        </li>
          ) : (
            ""
          )
      )}
    </ul>
  );
};

<h3 id="h258a80c8b4">一覧用</h3><p>page/[id].tsx</p><p><br></p><p>/blog/page/2　-&gt;　parentSlug="blog"</p><p>/hoge/blog/page/2　-&gt;　parentSlug="blog", rewriteSlug="hoge/blog"</p>

import { PAGE_NAVI } from "@/const/setting";

～

export const getStaticPaths: GetStaticPaths = async () => {
  const data = await client.blog.$get();
  const range = (start: number, end: number) =>
    [...Array(end - start + 1)].map((_, i) => start + i);
  const paths = range(1, Math.ceil(data.totalCount / PAGE_NAVI.POSTS_PER_PAGE)).map(
    (repo) => `/page/${repo}`
  );
  return {
    paths,
    fallback: false,
  };
};
export const getStaticProps: GetStaticProps = async (context) => {
  const id = context.params?.id;
  const data = await client.blog.$get({
    query: {
      offset: (Number.parseInt(String(id)) - 1) * PAGE_NAVI.POSTS_PER_PAGE,
      limit: PAGE_NAVI.POSTS_PER_PAGE,
    },
  });
  return {
    props: { postsData: data, totalCount: data.totalCount },
  };
};
type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Archive: NextPage<Props> = ({ postsData, totalCount }) => {
  const currentPage = Math.ceil(postsData.offset / PAGE_NAVI.POSTS_PER_PAGE) + 1;
  return (
    <>
      ～略
      <Pagination
        currentPage={currentPage}
        postPerPage={PAGE_NAVI.POSTS_PER_PAGE}
        totalCount={totalCount}
      />
    </>
  );
};
export default Archive;

<p>offset: (Number.parseInt(String(id)) - 1)</p><p>idはそのままだと型エラーがでるので数値型にする</p>