Next.JSのブログにSSRの検索機能を実装してNetlifyにデプロイ

<div className="hidden lg:flex border-2 rounded focus-within:ring focus-within:border-blue-300 text-gray-600 focus-within:text-black h-3/4">
  <input
    type="text"
    className="px-2 py-2 w-48 text-black text-sm border-0 rounded-none focus:outline-none"
    placeholder="サイト内検索"
    onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) =>
      onEnterKeyEvent(e)
    }
  />
  <button
    className="flex items-center justify-center px-3 border-0 bg-white"
    onClick={(e) => onClickSearchButton(e)}>
    <svg
      className="w-5 h-5"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24">
      <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
    </svg>
  </button>
</div>

<div
  className="flex lg:hidden items-center mr-2 md:mr-10"
  onClick={() => setSearchModal(true)}>
  <svg
    className="w-6 h-6 text-white cursor-pointer"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24">
    <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
  </svg>
</div>

{isSearchModal && (
  <div
    className={`menuWrapper ${
      isSearchModal ? 'menuWrapper__active' : ''
    }`}
    onClick={(e) => {
      closeWithClickOutSideMethod(e, setSearchModal);
    }}>
    <form
      className="block absolute top-12 right-0 left-0 z-50 w-11/12 my-0 mx-auto"
      action="/search"
      method="get">
      <input
        type="text"
        className="w-full h-11 border border-solid border-gray-200 bg-white shadow text-base pl-2"
        autoComplete="off"
        placeholder="サイト内検索"
        defaultValue=""
        name="q"
      />
    </form>
  </div>
)}

<div className="flex justify-center px-5 pb-5">
  <div className="flex w-full max-w-screen-sm border-2 rounded focus-within:ring focus-within:border-blue-300 text-gray-600 focus-within:text-black">
    <input
      type="text"
      value={searchValue}
      className="w-full px-2 py-2 text-black border-0 rounded-none focus:outline-none"
      placeholder="サイト内検索"
      onChange={(e) => setSearchValue(e.target.value)}
      onKeyPress={(e) => onEnterKeyEvent(e)}
    />
    <button
      className="flex items-center justify-center px-3 border-0 bg-white"
      onClick={(e) => onClickSearchButton(e)}>
      <svg
        className="w-5 h-5"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24">
        <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
      </svg>
    </button>
  </div>
</div>

  const router = useRouter();
  const onEnterKeyEvent = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (!e.currentTarget.value.trim()) {
      return;
    }
    if (e.key === 'Enter') {
      router.push(`/search?q=${e.currentTarget.value}`);
    }
  };

import { NextApiRequest, NextApiResponse } from 'next';
import { HttpsProxyAgent } from 'https-proxy-agent';

export default async (
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> => {
  const query: string | string[] = req.query.q;
  if (!query) {
    res.status(400).json({ error: `missing queryparamaeter` });
  }
  const header: HeadersInit = new Headers();
  header.set('X-API-KEY', process.env.API_KEY || '');
  const proxy = process.env.https_proxy;
  const opt = proxy
    ? {
        headers: header,
        agent: new HttpsProxyAgent(proxy),
      }
    : {
        headers: header,
      };
  return await fetch(
    //ページネーション未実装のため、limit=100
    `${process.env.API_URL}contents?limit=100&q=${encodeURIComponent(
      query as string
    )}`,
    opt
  )
    .then(async (data) => {
      res.status(200).json(await data.json());
    })
    .catch(async (error) => {
      res.status(500).json(await error.json());
    });
};

type Props = {
  blogs: MicroCmsResponse<IBlog>;
  query: string;
};

const Page: NextPage<Props> = ({ blogs, query }) => {
  const {
    searchValue,
    setSearchValue,
    onEnterKeyEvent,
    onClickSearchButton,
    data,
  } = useSearchByQuery(query, blogs);

  const [isTooltipVisible, setTooltipVisibility] = useState(false);
  useEffect(() => {
    setTooltipVisibility(true);
  }, []);
（略）

{
    "contents": [
        {
            "id": "fgm-dkbu10",
            "createdAt": "2021-05-09T08:41:26.685Z",
            "updatedAt": "2021-07-16T10:13:36.149Z",
            "publishedAt": "2021-05-09T08:41:26.685Z",
            "revisedAt": "2021-07-16T10:13:36.149Z",
            "title": "Ubuntu 20.04.2.0にGitLabをインストール",
            "category": {
                "id": "xexrrtp93gce",
                "createdAt": "2021-05-09T08:36:14.468Z",
                "updatedAt": "2021-08-31T12:05:21.841Z",
                "publishedAt": "2021-05-09T08:36:14.468Z",
                "revisedAt": "2021-08-31T12:05:21.841Z",
                "topics": "GitLab",
                "logo": "/logos/GitLab.png",
                "needs_title": false
            },
            "topics": [
                {
                    "id": "xexrrtp93gce",
                    "createdAt": "2021-05-09T08:36:14.468Z",
                    "updatedAt": "2021-08-31T12:05:21.841Z",
                    "publishedAt": "2021-05-09T08:36:14.468Z",
                    "revisedAt": "2021-08-31T12:05:21.841Z",
                    "topics": "GitLab",
                    "logo": "/logos/GitLab.png",
                    "needs_title": false
                },
                {
                    "id": "bcluojl_o",
                    "createdAt": "2021-02-18T07:36:53.394Z",
                    "updatedAt": "2021-08-31T12:08:52.380Z",
                    "publishedAt": "2021-02-18T07:36:53.394Z",
                    "revisedAt": "2021-08-31T12:08:52.380Z",
                    "topics": "ubuntu",
                    "logo": "/logos/ubuntu.png",
                    "needs_title": false
                }
            ],
            "content": "（略 ブログの内容）",
            "description": "（略 ブログの説明文）",
            "reflect_updatedAt": false,
            "reflect_revisedAt": false,
            "seo_images": [
                {
                    "id": "x5ad6bml5",
                    "createdAt": "2021-07-16T10:02:27.966Z",
                    "updatedAt": "2021-07-16T10:02:27.966Z",
                    "publishedAt": "2021-07-16T10:02:27.966Z",
                    "revisedAt": "2021-07-16T10:02:27.966Z",
                    "url": "https://res.cloudinary.com/dt8zu6zzd/image/upload/blog/gitlab_install/ITC_Engineering_Blog.png",
                    "alt": "Ubuntu 20.04.2.0にGitLabをインストール",
                    "width": 1200,
                    "height": 630
                }
            ],
            "seo_authors": []
        },
        {
            "id": "i-hna4_wx",
            ・・・略　同じ形式のデータの繰り返し・・・
        }
    ],
    "totalCount": 10,
    "offset": 0,
    "limit": 10
}

export function useSearchByQuery(
  query: string,
  initialData: MicroCmsResponse<IBlog>
): Props {
  const [searchValue, setSearchValue] = useState<string>(query);
  const { isLoading, data, refetch } = useQuery(
    ['blogs', searchValue],
    async (context) => {
      return await new BlogService().getBlogsByQuery(
        context.queryKey[1] as string
      );
    },
    {
      initialData: initialData,
      enabled: false,
    }
  );

  const onEnterKeyEvent = async (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log('onEnterKeyEvent', e);
    if (!e.currentTarget.value.trim()) return;
    if (e.key === 'Enter') {
      refetch();
    }
  };

  const onClickSearchButton = (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    const { value } = (e.currentTarget as HTMLButtonElement)
      .previousElementSibling as HTMLInputElement;
    if (!value.trim()) {
      return;
    }
    refetch();
  };

  return {
    setSearchValue,
    onEnterKeyEvent,
    onClickSearchButton,
    data,
    searchValue,
    isLoading,
  };

  const onEnterKeyEvent = async (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log('onEnterKeyEvent', e);
    if (!e.currentTarget.value.trim()) return;
    if (e.key === 'Enter') {
      refetch();
    }
  };

  const onClickSearchButton = (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    const { value } = (e.currentTarget as HTMLButtonElement)
      .previousElementSibling as HTMLInputElement;
    if (!value.trim()) {
      return;
    }
    refetch();
  };

  return {
    setSearchValue,
    onEnterKeyEvent,
    onClickSearchButton,
    data,
    searchValue,
    isLoading,
  };

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
  usePageView();
  return (
    <>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </>
  );
};

export default MyApp;

error - ./node_modules/https-proxy-agent/dist/agent.js:15:0
Module not found: Can't resolve 'net'

import { HttpsProxyAgent } from 'https-proxy-agent';

$ npm install net
$ npm install tls

const Page: NextPage = () => {
  const router = useRouter();

  const [searchValue, setSearchValue] = useState<string>();

  useEffect(() => {
    if (!router.isReady) return;
    const { q } = router.query;
    setSearchValue(q as string);
  }, [router.isReady, router.query]);

  const { isLoading, data } = useQuery(
    ['blogs', searchValue],
    async (context) => {
      return await new BlogService().getBlogsByQuery(
        context.queryKey[1] as string
      );
    },
    {
      staleTime: Infinity,
      enabled: searchValue ? true : false,
    }
  );

import FadeLoader from 'react-spinners/FadeLoader';

{isLoading && (
  <div className="text-center h-20">
    <div className="inline-block">
      <div className="relative" style={{ left: '-20px' }}>
        <FadeLoader color={'#4A90E2'} loading={isLoading} />
      </div>
    </div>
  </div>
)}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const query = context.query.q;
  const service: IBlogService = new BlogService();
  const blogs = await service.getBlogsByQuery(query as string);
  return {
    props: {
      blogs: blogs,
      query: query,
    },
  };
};

$ npm run export

$ npm run build

warn  - Statically exporting a Next.js application via `next export` disables API routes.
This command is meant for static-only hosts, and is not necessary to make your application static.
Pages in your application without server-side data dependencies will be automatically statically exported by `next build`, including pages powered by `getStaticProps`.
Learn more: https://nextjs.org/docs/messages/api-routes-static-export
info  - Exporting (0/3)
info  - Copying "public" directory
Error occurred prerendering page "/search". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error for page /search: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export
    at /opt/build/repo/node_modules/next/dist/export/worker.js:227:27
    at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
info  - Exporting (3/3)
Error: Export encountered errors on following paths:
	/search
    at /opt/build/repo/node_modules/next/dist/export/index.js:487:19
    at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
​
────────────────────────────────────────────────────────────────
  "build.command" failed                                        
────────────────────────────────────────────────────────────────
​
  Error message
  Command failed with exit code 1: npm run export
​
  Error location
  In Build command from Netlify app:
  npm run export
​
  Resolved config
  build:
    command: npm run export
    commandOrigin: ui
    environment:

module.exports = {
  ・・・
  target: 'serverless',
  ・・・
};

Installing NPM modules using NPM version 7.21.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: itc-blog@0.1.0
npm ERR! Found: next@11.1.2
npm ERR! node_modules/next
npm ERR!   next@"^11.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.6" from react-static-tweets@0.5.4
npm ERR! node_modules/react-static-tweets
npm ERR!   react-static-tweets@"0.5.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     /opt/buildhome/.npm/_logs/2021-09-12T08_05_49_299Z-debug.log
Error during NPM install

────────────────────────────────────────────────────────────────
  5. onPostBuild command from @netlify/plugin-nextjs            
────────────────────────────────────────────────────────────────
​
Next.js cache saved.

For faster deploy times, build IDs should be set to a static value.
To do this, set generateBuildId: () => 'build' in your next.config.js
​
(@netlify/plugin-nextjs onPostBuild completed in 292ms)
​
────────────────────────────────────────────────────────────────
  6. Deploy site                                                
────────────────────────────────────────────────────────────────
​
Starting to deploy site from 'out'
Creating deploy tree 
Creating deploy upload records
92 new files to upload
6 new functions to upload
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
Request must be smaller than 69905067 bytes for the CreateFunction operation
・・・

Page                                       Size     First Load JS
┌ ● / (9815 ms)                            263 B           122 kB
├   /_app                                  0 B            79.9 kB
├ ○ /404                                   195 B          80.1 kB
├ λ /api/search                            0 B            79.9 kB
├ ● /blogs/[id] (137237 ms)                292 kB          410 kB
├   ├ /blogs/download-iframe (10615 ms)
├   ├ /blogs/nextjs-fetch-proxy (9927 ms)
├   ├ /blogs/nextjs-patch (9807 ms)
├   ├ /blogs/sslcert (9558 ms)
├   ├ /blogs/next-sitemap2 (9481 ms)
├   ├ /blogs/proxies (8400 ms)
├   ├ /blogs/next-sitemap (3571 ms)
├   └ [+31 more paths] (avg 2448 ms)
├ ● /list/[[...slug]] (115105 ms)          216 B           122 kB
├   ├ /list/1/8hcq78trdqsy (4334 ms)
├   ├ /list/1/068udcpeazn (4258 ms)
├   ├ /list/1/umqsrvfrv7 (4177 ms)
├   ├ /list/1/6ra37_nhnpqm (4068 ms)
├   ├ /list/1/o8o4z1zp7 (4019 ms)
├   ├ /list/1/91zw54wj7d (3841 ms)
├   ├ /list/1/n767cc7fin (3765 ms)
├   └ [+26 more paths] (avg 3332 ms)
└ λ /search                                41 kB           144 kB
+ First Load JS shared by all              79.9 kB
  ├ chunks/framework.c179ed.js             42.4 kB
  ├ chunks/main.2ca113.js                  23.2 kB
  ├ chunks/pages/_app.d6e24f.js            13.5 kB
  ├ chunks/webpack.0cb069.js               825 B
  └ css/ae63bce8d69d04f7cb7c.css           7.91 kB
λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
> itc-blog@0.1.0 postbuild /opt/build/repo
> next-sitemap --config sitemap.config.js
​
(build.command completed in 1m 44.3s)
​
────────────────────────────────────────────────────────────────
  3. onBuild command from @netlify/plugin-nextjs                
────────────────────────────────────────────────────────────────
​
Detected Next.js site. Copying files...
** Running Next on Netlify package **
🚀 Next on Netlify 🚀
🌍️ Copying public folder to /opt/build/repo/out
💼 Copying static NextJS assets to /opt/build/repo/out
💫 Setting up API endpoints as Netlify Functions in /opt/build/repo/.netlify/functions-internal
💫 Setting up pages with getInitialProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
💫 Setting up pages with getServerSideProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
🔥 Copying pre-rendered pages with getStaticProps and JSON data to /opt/build/repo/out
💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in /opt/build/repo/.netlify/functions-internal
💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in /opt/build/repo/.netlify/functions-internal
🔥 Copying pre-rendered pages without props to /opt/build/repo/out
Building 150 pages
🔀 Setting up redirects
🔀 Setting up headers
✅ Success! All done!
​
(@netlify/plugin-nextjs onBuild completed in 375ms)
​
────────────────────────────────────────────────────────────────
  4. Functions bundling                                         
────────────────────────────────────────────────────────────────
​
Packaging Functions from .netlify/functions-internal directory:
 - next_api_search/next_api_search.js
 - next_blogs_id/next_blogs_id.js
 - next_image/next_image.js
 - next_index/next_index.js
 - next_list_slug/next_list_slug.js
 - next_search/next_search.js
​
​
(Functions bundling completed in 35.4s)
​
────────────────────────────────────────────────────────────────
  5. onPostBuild command from @netlify/plugin-nextjs            
────────────────────────────────────────────────────────────────
​
Next.js cache saved.

For faster deploy times, build IDs should be set to a static value.
To do this, set generateBuildId: () => 'build' in your next.config.js
​
(@netlify/plugin-nextjs onPostBuild completed in 357ms)
​
────────────────────────────────────────────────────────────────
  6. Deploy site                                                
────────────────────────────────────────────────────────────────
​
Starting to deploy site from 'out'
Creating deploy tree 
Creating deploy upload records
87 new files to upload
5 new functions to upload
Site deploy was successfully initiated
​
(Deploy site completed in 5.9s)
​
────────────────────────────────────────────────────────────────
  Netlify Build Complete                                        
────────────────────────────────────────────────────────────────
​
(Netlify Build completed in 2m 29s)
Starting post processing
Post processing - HTML
Caching artifacts
Started saving node modules
Finished saving node modules
Started saving build plugins
Finished saving build plugins
Started saving pip cache
Finished saving pip cache
Started saving emacs cask dependencies
Finished saving emacs cask dependencies
Started saving maven dependencies
Finished saving maven dependencies
Started saving boot dependencies
Finished saving boot dependencies
Started saving rust rustup cache
Finished saving rust rustup cache
Started saving go dependencies
Finished saving go dependencies
Build script success
Post processing - header rules
Post processing - redirect rules
Post processing done
Site is live ✨
Finished processing build request in 3m19.77232733s