おはこんばんは。最近、&nbsp;Next.js × microCMS&nbsp;で自作したこのサイトにブログの検索機能を実装してみました。 ブログでは、サイト内検索のフォームをよく見かけますよね。ただ、全文検索の機能等を実装する必要があり、意外と面倒だったりします。 そんな面倒なことも、microCMS&nbsp;のAPIは全文検索機能を備えているので、簡単に実装出来てしまいます。今回はその全文検索機能を用いたブログの検索機能の実装方法をご紹介します。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.4</li><li>React 17.0.1</li></ul> <h2 id="h786b965285">グローバルなStateの管理</h2>まずは、複数のドメインでキーワードを扱うことを想定し、グローバルなStateで管理するようにします。今回は、React Context を用いた方法でご紹介します。 createContext で以下のように Context を定義します。<pre><code>// context/searchContext.ts

import { createContext } from 'react';

interface SearchContextValue {
 search: string;
 setSearch: React.Dispatch&lt;React.SetStateAction&lt;string&gt;&gt;;
}

export const SearchContext = createContext&lt;SearchContextValue&gt;({
 search: '',
 setSearch: () =&gt; undefined,
});</code></pre> 次に <code>_app.tsx</code> で Context を呼び出して、グローバルで管理するStateをセットします。<pre><code>// pages/_app.tsx

import React, { useState } from 'react';
import { AppProps } from 'next/app';

const MyApp = (props: AppProps): JSX.Element =&gt; {
 const { Component, pageProps } = props;
 const [search, setSearch] = useState&lt;string&gt;('');

 return (
 &lt;SearchContext.Provider value={{ search, setSearch }}&gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/SearchContext.Provider&gt;
 );
};

export default MyApp;</code></pre> これでグローバルでStateを扱えるようになりました。 <h2 id="h6cb2b333f2">検索用のコンポーネントを用意</h2>以下のように検索用のコンポーネントを用意します。今回は Material-UI を用いています。 <pre><code>// components/SearchInput

import React, { useCallback, useContext } from 'react';
import { IconButton, InputBase } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import { useRouter } from 'next/router';
import style from './SearchInput.module.scss';
import SearchContext from '../../context/searchContext';

const SearchInput: React.FC = () =&gt; {
 const { search, setSearch } = useContext(SearchContext);
 const router = useRouter();

 const handleChangeKeyword = useCallback(
 (e: React.ChangeEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;) =&gt; {
 const { value } = e.currentTarget;
 setSearch(value);
 },
 [setSearch],
 );

 const handleClickSearchButton = useCallback(() =&gt; {
 void router.push(`/blogs/search/?keyword=${search}`);
 }, [search, router]);

 const handleKeyDownSearch = useCallback(
 (e: React.KeyboardEvent&lt;HTMLInputElement | HTMLTextAreaElement&gt;) =&gt; {
 if (e.key === 'Enter') {
 void router.push(`/blogs/search/?keyword=${search}`);
 }
 },
 [search, router],
 );

 return (
 &lt;div className={style.search}&gt;
 &lt;InputBase
 placeholder="Search…"
 inputProps={{ 'aria-label': 'search' }}
 className={style.searchInput}
 value={search}
 onChange={handleChangeKeyword}
 onKeyDown={handleKeyDownSearch}
 /&gt;
 &lt;IconButton
 className={style.searchIcon}
 onClick={handleClickSearchButton}
 aria-label="Search"
 &gt;
 &lt;SearchIcon /&gt;
 &lt;/IconButton&gt;
 &lt;/div&gt;
 );
};

export default SearchInput;</code></pre> 先ほど、定義した Context で定義したグローバルなStateは以下のように <code>useContext</code> で呼び出しています。<pre><code>const { search, setSearch } = useContext(SearchContext);</code></pre> <code>handleClickSearchButton</code>と<code>handleKeyDownSearch</code> で検索結果のページへ遷移するようにしています。 ポイントは、検索キーワードをURLクエリに入れていることです。Context で入れているから不要では？と思いますよね。 ただ、ブラウザをリロードすると Context のは値が消えてしまいます。なので、リロードされても検索結果が残るようにURLクエリにキーワードを入れています。 <pre><code>void router.push(`/blogs/search/?keyword=${search}`);</code></pre> <h2 id="hd9cc592a7d">ページ側の処理</h2>ページ側は先ほどセットしたURLクエリを元にブログの一覧を取得します。フロントから直接 microCMS のAPIを叩いてしまうと、API keyが漏洩してしまうので、API Routerを叩くようにしています。 <pre><code>const [blogsQuery, setBlogsQuery] = useState&lt;{ keyword:string } | null&gt;(null);

useEffect(() =&gt; {
 const urlQuery = router.query { keyword:string };

 if (!isEmpty(urlQuery)) setBlogsQuery(urlQuery);
}, [router.query]);

useEffect(() =&gt; {
 if (blogsQuery) {
 void (async (): Promise&lt;void&gt; =&gt; {
 try {
 const res = await fetch(`/api/blogs`, {
 body: JSON.stringify(blogsQuery),
 });
 } catch {
 return;
 }
 })();
 }
}, [blogsQuery]);</code></pre> 一応、URLクエリがないページに遷移した際に検索キーワードが消えるように <code>_app.tsx</code> に以下の処理も入れておくと良いでしょう。 <pre><code>// pages/_app.tsx

 useEffect(() =&gt; {
 const urlQuery = router.query { keyword:string };
 if (urlQuery &amp;&amp; urlQuery.keyword) {
 setSearch(urlQuery.keyword);
 } else {
 setSearch('');
 }
 }, [router]);</code></pre> <h2 id="h9cb4759477">API Routerでブログ一覧を取得する</h2>以下のようにAPI Router を用いてサーバーサイド側から microCMS のAPIを叩くようにします。 <pre><code>// pages/api/blogs/index.ts

import { NextApiResponse, NextApiRequest } from 'next';

const isBlogsQuery = (item: unknown): item is { keyword: string } =&gt; {
 const target = item as { keyword: string };
 return 'keyword' in target &amp;&amp; typeof target.keyword === 'string';
};

const getSearchBlogs = async (
 req: NextApiRequest,
 res: NextApiResponse,
): Promise&lt;void&gt; =&gt; {
 // クエリのチェック
 if (!isBlogsQuery(req.body)) {
 return res.status(404).end();
 }

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const blogs = await fetch(
 `https://your-service.microcms.io/api/v1/blogs?q=${encodeURI(
 req.body.keyword,
 )}`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 return res.status(200).json(blogs);
};

export default getSearchBlogs;</code></pre> microCMS では<code>q</code>で全文検索が行えます。検索対象は「テキストフィールド」「テキストエリア」「リッチエディタ」となるので、必要なフィールドに対して検索してくれます。便利ですね。 日本語などのキーワードは<code>encodeURI</code>をしないといけなので、ご注意ください。 <pre><code>`https://your-service.microcms.io/api/v1/blogs?q=${encodeURI(
 req.body.keyword,
 )}`</code></pre> これで検索されたキーワードに関連するブログが取得出来るようになったはずです。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>今回は microCMS&nbsp;のAPIは全文検索機能を用いて、ブログのサイト内検索を実装する方法をご紹介しました！誰かの参考になれば幸いです。

Next.js × microCMSでブログの検索を実装してみた

おはこんにちばんは。今回は&nbsp;Next.js × microCMS&nbsp;で ページングを実装してみました。その手順を紹介しようと思います！ <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 10.0.4</li><li>React 17.0.0</li><li>Material-UI 4.11.2</li></ul> <h2 id="h559ffd8095">一覧画面の実装</h2>まずは雑に一覧画面を実装します。今回はUIライブラリにMaterial-UIを利用しています。構成しては以下になります。 ============= pages/ 　page/ 　　[offset].tsx ============= <pre><code>src/pages/page/[offset].tsx

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React, { useCallback } from 'react'
import { useRouter } from 'next/router';
import { Pagination } from '@material-ui/lab';

const PAGE = 10 as const;

const DynamicPage: NextPage = () =&gt; {
 const router = useRouter();
 const offset = router.query.offset
 ? Number.parseInt(String(router.query.offset), 10)
 : 1;

 const handleChangePage = useCallback(
 (_: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
 void router.push(`/page/${page}`); 
 },
 [router],
 );
 
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.offset}&lt;/h1&gt;
 &lt;Pagination
 count={PAGE}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
 /&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {
 const paths = [...Array(PAGE)].map((_, index) =&gt; ({
 params: {
 offset: `${index + 1}`,
 },
 }))

 return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async (context) =&gt; {
 return {
 props: {},
 }
}

export default DynamicPage;</code></pre> Material-UI の <a href="https://material-ui.com/api/pagination/" target="_blank" rel="noopener noreferrer">Pagination</a> を使っています。ハンドラーの第二引数に次の page が取れるのでそれを元に次のページに遷移させています。こんな感じになるはずです。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/3011efc1f05f61b9fafe77ea24f8726b.gif" alt=""> <h2 id="h2ec9ff6b44">microCMS&nbsp;で取得したコンテンツを利用</h2> microCMS で取得したコンテンツを元にページングしていきます。今回は1ページ 3つまでコンテンツを取得するようにしています。 <pre><code>import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React, { useCallback } from 'react'
import { useRouter } from 'next/router';
import { Pagination } from '@material-ui/lab';

const DynamicPage: NextPage = ({ contents }) =&gt; {
 const router = useRouter();
 const offset = router.query.offset
 ? Number.parseInt(String(router.query.offset), 10)
 : 1;

 const handleChangePage = useCallback(
 (_: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
 void router.push(`/page/${page}`); 
 },
 [router],
 );
 
 return (
 &lt;div&gt;
 &lt;h1&gt;{router.query.offset}&lt;/h1&gt;
 &lt;Pagination
 count={Math.ceil(contents.totalCount / contents.limit)}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
 /&gt;
 &lt;/div&gt;
 )
}

export const getStaticPaths: GetStaticPaths = async () =&gt; {

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const contents = await fetch(
 `https://jun-dev.microcms.io/api/v1/contents?offset=0&amp;limit=3`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 const paths = [...Array(Math.ceil(contents.totalCount / contents.limit))]
 .map((_, i) =&gt; i + 1)
 .map((offset) =&gt; `/page/${offset}`);

 return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async ({ params }) =&gt; {
 const offset = params?.offset ? String(params?.offset) : '0';

 const query = {
 offset: String(Math.ceil(Number.parseInt(offset, 10) - 1) * 3),
 limit: '3',
 };

 const key = {
 headers: { 'X-API-KEY': process.env.API_KEY ?? '' },
 };
 const contents = await fetch(
 `https://your-service.microcms.io/api/v1/contents?offset=${query.offset}&amp;limit=${query.limit}`,
 key,
 )
 .then((res) =&gt; res.json())
 .catch(() =&gt; null);

 return {
 props: {
 contents
 },
 }
}

export default DynamicPage</code></pre> getStaticPathsでは microCMS で <code>totalCount</code> と <code>limit</code> を返してくれるのでこれを元にpathsを生成しています。<pre><code> const paths = [...Array(Math.ceil(contents.totalCount / contents.limit))]
 .map((_, i) =&gt; i + 1)
 .map((offset) =&gt; `/page/${offset}`);</code></pre> getStaticPropsではgetStaticPathsで生成したoffsetを元にqueryを生成し、ページ単位でコンテンツを何件目から取得するかを指定しています。<pre><code> const offset = params?.offset ? String(params?.offset) : '0';

 const query = {
 offset: String(Math.ceil(Number.parseInt(offset, 10) - 1) * 3),
 limit: '3',
 };</code></pre> Pagination コンポーネントも <code>totalCount</code> と <code>limit</code> を元にcount（何ページ目か） を指定してあげています。<pre><code>&lt;Pagination
 count={Math.ceil(contents.totalCount / contents.limit)}
 variant="outlined"
 shape="rounded"
 color="secondary"
 page={offset}
 onChange={handleChangePage}
/&gt;</code></pre> これで以上です。お疲れ様でした。 <h2 id="h1afe451c43">さいごに</h2>Next.js × microCMS&nbsp;で ページングを実装してみました。一覧ページを実装したけど、ページングがよくわからんって方に参考となれば幸いです。

Material-UI

Next.js × microCMSでブログの検索を実装してみた

Next.js × microCMS におけるページングの実装方法