More than 1 year has passed since last update.

imdb clone Part19　13 AddSearch ability 1/2 検索コンポーネントを新規作成

Posted at 2023-05-11

概要

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

開発環境

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コミット分

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

imdb clone Part19 13 AddSearch ability 1/2 検索コンポーネントを新規作成

概要