概要

今回の記事では、Next.jsブログサーバに検索バーを追加する方法を解説します。

とにかくやってみる！ ことで、next.jsなどフロントエンドに関連することを学んでいきましょう。

前提条件

• googleアカウントをもっていること

目的

Googleカスタム検索バーの作成および配置すること！

目次

• 概要
• 前提条件
• 目的
• 内容
  • Googleカスタム検索バーを作成する。
  • Googleカスタム検索バーをカスタマイズする
  • コードを取得する
  • 検索バーをコンポーネント化
• まとめ

内容

Googleカスタム検索バーを作成する。

1. ここにアクセスする
   https://www.google.co.jp/cse/all

2. 追加ボタンを押す
   

3. 次の画面に移り、 検索エンジン名：k69blog を入力
   

4. 検索対象を指定してください
   特定のサイトまたはページを検索のラジオボタンを選択し、
   k69blog.com/*と入力し、追加ボタンを押す

5. 私はロボットではありませんをチェックし、作成ボタンを押す

   

6. 完成！
   

Googleカスタム検索バーをカスタマイズする

1. ここにアクセスし、カスタマイズ対象を選択します。
   https://www.google.co.jp/cse/all

2. 左メニューのデザインを選択し、すべてのデザインの設定を押す
   

3. 色合いなどをカスタマイズする
   プレビューを見ながら、ブログの配色に合わせてカスタマイズする。
   

コードを取得する

レイアウトを選択し、ブログに設置するためにコードを取得します。

<script async src="https://cse.google.com/cse.js?cx=c3e13445fe72c412c">
</script>
<div class="gcse-search"></div>

貼り付けるとこんな感じになりました。いいかんじですね。

検索バーをコンポーネント化

検索バーのコードをReactコンポーネントにコピペでは動きません。
こちらのページを参考にコンポーネント化しました。

コピペして、cx=XXXXXXXXXXXXXXXXX を修正すればOKです。

import { useRouter } from "next/router";
import { useEffect, VFC } from "react";

export const GoogleSearchBar: VFC = () => {
  const { asPath } = useRouter();

  useEffect(() => {
    try {
      console.log(asPath)
      const script = document.createElement('script');

      script.src = "https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXXX";
      script.async = true;

      document.body.appendChild(script);
      document.body.removeChild(script);

    } catch (error) {
      console.error(error);
    }
  }, [asPath]);

  return (
    <div className="gcse-search"></div>
  );
};

まとめ

本記事はいかがでしたか？Googleカスタム検索バーをReactで実装することはできたでしょうか？

今回作成した検索バーは上部にあるので、動かすとどのようなものかイメージできると思います。

私はScriptタグを毎回再読み込みするやり方でハマりました（笑）

もっと良いやり方をご存じの方はコメントいただけるとモチベーションUPにつながるので助かります。

本記事を読んでいただきありがとうございまいた。
少しでもみなさまのお役に立てばうれしいです。