More than 1 year has passed since last update.

google clone Part16　Imageの検索結果を実装

Posted at 2023-05-19

概要

今回は画像の検索結果を実装します。
以下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"

実装のポイント

検索結果の要素を構成する

上から順に、image title linkの順で表示します。

gridで検索結果を並べる

groupを使って子要素をhoverし

コード部分

app/search/image/page

page.jsx

import Link from "next/link"
import ImageSearchResults from "@/components/ImageSearchResults"; 

export default async function ImageSearchPage({searchParams}){
    const response = await fetch(
        `https://www.googleapis.com/customsearch/v1?key=${process.env.API_KEY}&cx=${process.env.CONTEXT_KEY}&q=${searchParams.searchTerm}}&searchType=image`
    );

    if(!response.ok){
        throw new Error("Something went wrong");
    }
    
    const data = await response.json();
    const results = data.items;
    if(!results){
        return(
            <div className="flex flex-col justify-center items-cente pt-10">
                <h1 className="text-3xl mb-4">No results found</h1>
                <p className="text-lg">
                    Try searching  else or go back to the homepage{""}
                    <Link href="/" className="text-blue-500" >
                        Home
                    </Link>
                </p>
            </div>
        )
    }

+    return <>{results && <ImageSearchResults results={data} />}</>;
}

ImageSearchResults

ImageSearchResults.jsx

import Link from "next/link";

export default function ImageSearchPage({results}){
    return(
        <div className="pb-24 mt-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 px-3 space-x-4">
                {results.items.map((result) => (
                    <div key={result.link} className="mb-8">
                        <div className="group">
                            <Link href={result.image.contextLink}>
                                <img 
                                    src={result.link} 
                                    alt={result.title} 
                                    className="h-60 group-hover:shadow-xl w-full object-contain transition-shadow"
                                />
                            </Link>
                            <Link href={result.image.contextLink}>
                                <h2 className="group-hover:underline truncate text-xl">
                                    {result.title}
                                </h2>
                            </Link>
                            <Link href={result.image.contextLink}>
                                <p className="group-hover:underline text-gray-600">
                                    {result.displayLink}
                                </p>
                            </Link>                            
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}