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

# 概要
目次

https://qiita.com/RYA234/items/7cf917e4e5cdea668e2e

今回は画像の検索結果を実装します。
以下gif画像は実装後の結果です。

![dfagggggaddfafda.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/83cc797c-5cab-fb99-a1a7-abfb43fffdea.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の順で表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/015a6d7f-e7db-217a-d03b-3b6a8c5df92d.png)




## gridで検索結果を並べる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fca28df7-5d11-5303-cb82-1a7568fce399.png)




## groupを使って子要素をhoverし

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e0b957e8-1707-992f-4493-a05eb3796864.png)


# コード部分
## app/search/image/page
```diff_jsx: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
```diff_jsx: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>
    );
}
```




# 参考

## css

### grid

https://tailwindcss.com/docs/grid-template-columns

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/b5c38d5a-25f2-fe44-819e-1c41695b6d66.png)

### group

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state



## その他

Google API レスポンス

https://developers.google.com/custom-search/v1/reference/rest/v1/Search?hl=ja

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7b5fadbf-0b4f-7774-7e72-59fe1dc6dd90.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/69d27312-4ab4-b679-cbc4-ac2a390cabd9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/af581205-a19a-23ea-9dab-a65b038c886c.png)


Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/57785f2873c30943f8403a5ac2bf31efc72797ea