概要

今回は検索機能のコンポーネントを作成します。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

以下画像は検索したときの処理です。
next.jsのdynamicRoutingを使って個別のページを実現しています。
検索後のページは未実装なので404エラーになります。

コード部分

SearchBox

SearchBox.jsx

"use client"
import { useState } from "react";
import { useRouter } from "next/navigation"  

export default function SearchBox() {
    const [search,setSearch] = useState("");

    const router = useRouter();
    function handleSubmit(e){
        e.preventDefault();
        if(!search) return;
        router.push(`/search/${search}`);
    }
  return (
   <form onSubmit={handleSubmit}
    className="flex max-w-6xl mx-auto justify-between items-center px-5">
        <input
            value={search} 
            onChange={(e)=>setSearch(e.target.value)}
            type="text" 
            placeholder="Search keywords..."
            className="w-full h-14 rounded-sm placeholder-gary-500 outline-none bg-transparent flex-1"
        />
        <button disabled={!search} type="submit" className="text-amber-500 disabled:text-gray-400">
            Search
        </button>
   </form>
  )
}

layout

layout.jsx

import './globals.css'
import Header from '@/components/Header'
import Providers from './Providers'
import Navbar from '@/components/Navbar'
+import SearchBox from '@/components/SearchBox'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {/* Header */}
          <Header />

          {/* Navbar */}
          <Navbar />

          {/* SearchBox */}
+          <SearchBox/>

          {children}
        </Providers>
      </body>
    </html>
  );
}

参考

その他

Udemy

githubコミット分