概要

今回は検索後表示されるページを実装します。
下gifアニメは実装後の様子です。

開発環境

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"

実装のポイント

app/search/[searchTerm]/page.jsxを新規作成して検索結果のページを作ります。
pageが開かれる段階でTMDBのAPIを使い該当する映画を取得します。

コード部分

app/search/[searchTerm]/page.jsx

page.jsx

import Results from "@/components/Results";

export default async function SearchPage({params}){
    const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${process.env.API_KEY}&query=${params.searchTerm}&language=en-US&include_adult=false`)
    if(!res.ok){
        throw new Error("Error fetching data")
    }

    const data = await res.json();

    const results = data.results

    return(
        <div>
            {results && results.length === 0 && (
                <h1 className="text-center pt-6">No results found</h1>
            )}
            {results && <Results results={results}/>}
        </div>
    )
}

参考

TMDB API Search

その他

Udemy

githubコミット分