import React from "react"

const Search = () => {
  
  const cx = 'xxxxx:xxxxx'; //数字の羅列:アルファベットの羅列
  let gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  let s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
  return (
    <div>
      <div className="gcse-search"></div>
    </div>
  )
}

export default Search

import React, { useState, useEffect } from 'react'

function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }
  return (
    <div {...delegated}>
      {children}
    </div>
  );
}

export default ClientOnly

class Sidebar extends React.Component {

  render() {
    const { location } = this.props
    const {
      author,
      subtitle,
      copyright,
      menu,
    } = this.props.data.site.siteMetadata
    const isHomePage = get(location, 'pathname', '/') === '/'

    ...

    return (
      <div className="sidebar">
        <div className="sidebar__inner">
          <div className="sidebar__author">{authorBlock}</div>
          <div>
            <Menu data={menu} />
            
            {/* following is google search box */}
            <ClientOnly>
              <Search />
            </ClientOnly>

            <Links data={author} />
            
            <Adsense />
          </div>
        </div>
        ...