<p>どうやらNext.jsはまだeslint 8 はまだ対応していない模様。</p><p></p><pre><code class="language-shell">yarn remove eslint &amp;&amp; yarn add --dev eslint@&quot;&lt;8.0.0&quot;</code></pre>

ESLint version 8.42.0 is not yet supported. Please downgrade to version 7 for the meantime

<p>本ブログには未実装ですが、next.jsとmicroCMSを使ったブログにて検索機能を実装してみました。</p><p></p><p><a href="https://blog.microcms.io/introduce-full-text-search/" target="_blank" rel="noopener noreferrer nofollow"><u>全文検索に対応しました</u></a></p><p></p><p>こちらにもある通り、microCMSではAPIにqというクエリをつけることで検索機能を簡単に作ることができます。</p><p>ほぼ<a href="https://ji23-dev.com/blogs/microcms-full-text-search" target="_blank" rel="noopener noreferrer nofollow"><u>参考記事</u></a>の通りなのですが、useSWRでかつmicroCMSのSDKを利用したAPI疎通の記事が見当たらなかったので新たに書いてみようと思います。</p><p></p><h2 id="h448be59b58">大まかな流れ</h2><p></p><p>まず細かい実装の前に今回作成する検索機能の大まかな流れを見ておきます。</p><p></p><ol><li>searchというStateをグローバルで管理できるようにする</li><li>検索用のコンポーネントを作成する</li><li>検索結果ページを作成する</li><li>検索結果を取得するAPIを実装する</li></ol><p></p><p>という感じです。検索機能はクライアントサイドからAPIを叩く必要があるので、例のごとくpages/apiディレクトリ配下に新たにAPIを実装していきます。</p><p></p><h2 id="h786b965285">グローバルなStateの管理</h2><p></p><p>↑参考記事と殆ど同じことをするのですが、</p><p></p><p></p><h2 id="h6cb2b333f2">検索用のコンポーネントを用意</h2><p></p><h2 id="hd9cc592a7d">ページ側の処理</h2><p></p><h2 id="h9cb4759477">API Routerでブログ一覧を取得する</h2><p></p>

[Next.js]検索フォームをmicroCMS SDKを利用して実装してみた

<h2 id="h2cd83e4fc4">next-sitemapでsitemapを簡単導入</h2><p></p><p>手作りでもいいのですが、大変簡単に導入できるパッケージがあるのでそれを使っていきます。</p><p></p><p><code>npm install --save-dev next-sitemap</code></p><p></p><h2 id="h8aaff90400">ファイルに設定情報を書く</h2><p></p><p>新たにルートディレクトリに <code>next-sitemap.js</code> を作成し、以下のように書き込んでいきましょう。</p><p></p><pre><code class="language-javascript">module.exports = {
  siteUrl: &apos;https://sample.jp&apos;,
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: &apos;./out&apos;,
};
</code></pre><p></p><p>siteUrlのところは各自ご自身のドメインを入れましょう。Next.jsのSSGではビルド後にoutというディレクトリがデフォルトでできるのでその配下に出力します。</p><p>sitemap.xml と robots.txtファイルが出来上がります。</p><p></p><p>それではこの設定が済んだら、build時にサイトマップを更新してくれるようにコマンドを設定します。</p><p></p><pre><code class="language-json">// package.json

  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;next dev&quot;,
    &quot;build&quot;: &quot;next build &amp;&amp; next export &amp;&amp; next-sitemap --config next-sitemap.js&quot;,
    ....
</code></pre><p></p><p>たったこれだけでビルドした際にsitemapを作ってくれます。</p><p>「自分のドメイン/sitemap.xml」で確認できます。</p><p></p><h2 id="h3de35099b3">参考</h2><p><a href="https://blog.hpfull.jp/nextjs-sitemap/">Next.jsでsitemapを超簡単に自動で作成する[next-sitemap]</a></p>

Next.jsのSSGでsitemapを超簡単に作成

<h2 id="h29cf429e5c">一旦文章なし</h2><p></p><h2 id="h922edff87b">実装</h2><p></p><pre><code class="language-typescript">import Link from &apos;next/link&apos;;

export const Pagination = ({ maxPageNumber, currentPageNumber }) =&gt; {
  currentPageNumber = Number(currentPageNumber);
  maxPageNumber = Number(maxPageNumber);
  const prevPage = currentPageNumber - 1;
  const nextPage = currentPageNumber + 1;


  return (
    &lt;div className=&quot;flex px-3 my-12&quot;&gt;
      {currentPageNumber !== 1 &amp;&amp; (
        &lt;Link href={`/blogs/page/${prevPage}`}&gt;
          &lt;a&gt;&amp;lt; Previous&lt;/a&gt;
        &lt;/Link&gt;
      )}
      {currentPageNumber !== maxPageNumber &amp;&amp; (
        &lt;Link href={`/blogs/page/${nextPage}`}&gt;
          &lt;a className=&quot;ml-4&quot;&gt;Next &amp;gt;&lt;/a&gt;
        &lt;/Link&gt;
      )}
    &lt;/div&gt;
  );
};
</code></pre><p></p><p></p><pre><code class="language-typescript">import Image from &apos;next/image&apos;;
import Blog from &apos;../components/Blog&apos;;
import { client } from &apos;../libs/client&apos;;
import { Pagination } from &apos;../components/Pagination&apos;;

export default function Home({ blog, totalCount }) {
  return (
    &lt;Layout title=&quot;Home&quot;&gt;
      &lt;p className=&quot;text-4xl m-10&quot;&gt;blog一覧&lt;/p&gt;    
      &lt;Blog blog={blog} /&gt;
      &lt;Pagination currentPageNumber={1} maxPageNumber={Math.ceil(totalCount / 4)} /&gt;
    &lt;/Layout&gt;
  );
}


export const getStaticProps = async () =&gt; {
  const offset = 0;
  const limit = 4;
  const queries = { offset: offset, limit: limit };
  const data = await client.get({ endpoint: &apos;blogs&apos;, queries: queries });
  return {
    props: {
      blog: data.contents,
      totalCount: data.totalCount,
    },
  };
};
</code></pre><p></p><p></p><pre><code class="language-typescript">import { client } from &apos;../../../libs/client&apos;;
import Layout from &apos;../../../components/Layout&apos;;
import Blog from &apos;../../../components/Blog&apos;;
import { Pagination } from &apos;../../../components/Pagination&apos;;

export default function BlogPageId({ blog, totalCount, currentPageNumber }) {
  return (
    &lt;Layout title=&quot;blogpage&quot;&gt;
      &lt;Blog blog={blog} /&gt;
      &lt;Pagination currentPageNumber={currentPageNumber} maxPageNumber={Math.ceil(totalCount / 4)} /&gt;
    &lt;/Layout&gt;
  );
}

export const getStaticPaths = async () =&gt; {
  const range = (start, end) =&gt; [...Array(end - start + 1)].map((_, i) =&gt; start + i);
  const data = await client.get({ endpoint: &apos;blogs&apos; });

  const { totalCount } = data;
  const paths = range(1, Math.ceil(totalCount / 4)).map((i) =&gt; `/blogs/page/${i}`);
  return { paths, fallback: false };
};

export const getStaticProps = async (context) =&gt; {
  const numId = context.params.id;
  const offset = (numId - 1) * 4;
  const limit = 4;
  const queries = { offset: offset, limit: limit };
  const data = await client.get({ endpoint: &apos;blogs&apos;, queries: queries });


  return {
    props: {
      blog: data.contents,
      totalCount: data.totalCount,
      currentPageNumber: numId,
    },
  };
};
</code></pre><p></p><p></p><h2 id="h03e7af0d39">参考リンク</h2><p><a href="https://blog.hpfull.jp/nextjs-microcms-pagination/">Next.js × microCSSブログでページネーションを実装する (with Tailwind CSS)</a></p><p></p>