google clone Part17　Pagination実装

# 概要

目次

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

検索結果の２ページ目を表示できるよう実装します。
以下gifアニメは実装後の様子です。

![nnnmn..,.m,.m,.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/b9dc0a61-acc4-907d-a0b2-a4a2b87cffcb.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"

# 実装のポイント
APIのパラメーターstartを追加します。
1ページあたり10件表示するようにします。

## Start=1　最初の１ページ目

### Nextを押したときの処理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d3e81f14-b0a2-d177-b8dc-5bf038bdd0fb.png)



## Start=11 ２ページ目の場合
２ページからは前のページに進めるリンクを表示します。

### Previousを押したときの処理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/5cfc9cfb-d7c7-4fc5-3310-108f88af2be4.png)


###  justify-betweenでPreviousとNextを配置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e63f0130-5524-3adb-94de-93b4a3b0b240.png)



## 

# コード部分
## PaginationButtons
```diff_jsx:PaginationButtons.jsx
"use client"

import Link from "next/link";
import {usePathname,useSearchParams} from "next/navigation";
import { BsChevronLeft,BsChevronRight } from "react-icons/bs";


export default function PaginationButton(){
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const searchTerm = searchParams.get("searchTerm");
    const startIndex = +searchParams.get("start") || 1;

    return(
        <div className="text-blue-700 flex px-10 pb-4 justify-between sm:justify-start sm:space-x-44 sm:px-0">
      {startIndex >= 10 && (
        <Link   href={`${pathname}?searchTerm=${searchTerm}&start=${startIndex - 10}`}>
            <div className="flex flex-col cursor-pointer items-center hover:underline">
                <BsChevronLeft clssName="h-5" />
                <p>Previous</p>
            </div>
        </Link>
      )}
      {startIndex <= 90 && (
        <Link
          href={`${pathname}?searchTerm=${searchTerm}&start=${startIndex + 10}`}
        >
          <div className="flex flex-col cursor-pointer items-center hover:underline">
            <BsChevronRight className="h-5" />
            <p>Next</p>
          </div>
        </Link>
      )}
        </div>
    )
}
```


## WebSearchResults
```diff_jsx:WebSearchResults.jsx
import Link from "next/link";
import Parser from "html-react-parser";
import PaginationButtons from "./PaginationButtons";

export default function WebSearchResults({results}){
   return(
    <div className="w-full mx-auto px-3 pb-24 sm:pl-[5%] md:pl-[14%] lg:pl-52">
        <p className="text-gray-600 text-sm mb-5 mt-3">
            About {results.searchInformation?.formattedTotalResults}
            results ({results.searchInformation?.formattedSearchTime} seconds)
        </p>  
        {results.items?.map((result) => (
            <div className="mb-8 max-w-xl" key={result.link}>
                <div className="group flex flex-col">
                    <Link className="text-sm truncate" href={result.link}>
                        {result.formattedUrl}
                    </Link>
                    <Link className="group-hover:underline decoration-blue-800 text-xl truncate font-medium text-blue-900" href={result.link}>
                        {result.title}
                    </Link>
                    <p className="text-gray-600">
                        {Parser(result.htmlSnippet)}
                    </p>
                </div>
            </div>
        ))}
        <div className="ml-16">
+            <PaginationButtons />
        </div>
    </div>
   ) 
}
```






# 参考

## css

https://tailwindcss.com/docs/justify-content


## その他

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d25e11c3-b0ad-96b8-efbc-1f18a187d144.png)


Next.js usePathname()


https://nextjs.org/docs/app/api-reference/functions/use-pathname

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/49f5bbdc-5430-da97-0e0d-78cebf43f72f.png)




Next.js useSearchParams()

https://nextjs.org/docs/app/api-reference/functions/use-search-params

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9501d53b-c2d5-6bd6-f254-bc39057525ad.png)



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/f8008cc7e2acd5b227b9ff67094b3827c505de53