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

[Next.js]検索フォームをmicroCMS SDKを利...

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

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

TwitterやLINEなどでリンクを貼った時、OGPの設定をしていればタイトル、画像、概要などをカードのような形で表示できるようになります。逆に設定していないとせっかくリンクを共有しても目に止まらない可能性が高いです。OGPが動的というのは、例えばブログ記事のidによってタイトル、画像、概要を出し分けるということです。ということでNext.jsで作成したサイトで動的OGPを作成する方法についてのメモです。<h2 id="h40b4e638d1">コンポーネント作る</h2>まずはOGP用のコンポーネントをnext/headを使って作っていきます。<a href="https://qiita.com/TK-C/items/cd34d0f6d4b001053443" target="_blank" rel="noopener noreferrer nofollow">こちらのサイトを参考にさせていただきました。</a><pre><code class="language-typescript">import Head from &apos;next/head&apos;;

const Seo = ({ pageTitle, pageDescription, pagePath, pageImg, pageImgWidth, pageImgHeight }) =&gt; {
 const defaultTitle = &apos;サンプル&apos;;
 const defaultDescription = &apos;サンプルディスクリプション&apos;;
 const defautlImg = &apos;https://sample.jp/sample-logo.png&apos;;

 const title = pageTitle ? `${pageTitle} | ${defaultTitle}` : defaultTitle;
 const description = pageDescription ? pageDescription : defaultDescription;
 const url = pagePath;
 const imgUrl = pageImg ? pageImg : defautlImg;
 const imgWidth = pageImgWidth ? pageImgWidth : 1200;
 const imgHeight = pageImgHeight ? pageImgHeight : 630;

 return (
 &lt;Head&gt;
 &lt;title&gt;{title}&lt;/title&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot; /&gt;
 &lt;meta name=&quot;description&quot; content={description} /&gt;
 &lt;meta property=&quot;og:url&quot; content={url} /&gt;
 &lt;meta property=&quot;og:title&quot; content={title} /&gt;
 &lt;meta property=&quot;og:site_name&quot; content={title} /&gt;
 &lt;meta property=&quot;og:description&quot; content={description} /&gt;
 &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; /&gt;
 &lt;meta property=&quot;og:image&quot; content={imgUrl} /&gt;
 &lt;meta property=&quot;og:image:width&quot; content={String(imgWidth)} /&gt;
 &lt;meta property=&quot;og:image:height&quot; content={String(imgHeight)} /&gt;
 &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; /&gt;
 &lt;link
 href=&quot;https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&amp;amp;display=swap&quot;
 rel=&quot;stylesheet&quot;
 /&gt;
 &lt;link rel=&quot;canonical&quot; href={url} /&gt;
 &lt;/Head&gt;
 );
};

export default Seo;
</code></pre>こちらをトップページに埋め込むととりあえずはOGPが設定された状態になります。これをブログ記事によって変えたいのであれば、propsに値を渡すことで可能になります。<pre><code class="language-typescript">import Layout from &apos;../components/Layout&apos;;
import Seo from &apos;../components/SeoOgp&apos;;

export default function Home({ blog, totalCount }) {
 return (
 &lt;Layout title=&quot;Home&quot;&gt;
 &lt;Seo /&gt;
 &lt;/Layout&gt;
 );
}
</code></pre>このように設定します。例えば、ブログ記事の情報に変えたいなら、blogs/[id].jsなどのファイルで、<pre><code class="language-typescript">import Layout from &apos;../../components/Layout&apos;;
import Seo from &apos;../../components/SeoOgp&apos;;

export default function BlogId({ blog }) {
 return (
 &lt;Layout title=&quot;blog&quot;&gt;
 &lt;Seo
 pageTitle={blog.title}
 pageDescription={blog.body}
 pageImg={blog.image.url}
 pageImgWidth={1280}
 pageImgHeight={960}
 /&gt;
 &lt;/Layout&gt;
 );
}
</code></pre>などとします。

Next.jsで動的OGPを生成しメタ情報を出し分けてみた

<h2 id="h29cf429e5c">一旦文章なし</h2><h2 id="h922edff87b">実装</h2><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><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><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><h2 id="h03e7af0d39">参考リンク</h2><a href="https://blog.hpfull.jp/nextjs-microcms-pagination/">Next.js × microCSSブログでページネーションを実装する (with Tailwind CSS)</a>