CloudFlareにデプロイするためのRemixプロジェクト ページング用のリンクを用意（前ページ、次ページへのリンク追加）

## 概要

前回、ページング処理のページ数を表示する実装を行った。
今回は前ページ次ページへの遷移用リンクを追加する。

## 前提

下記の内容が完了していること

https://qiita.com/miriwo/items/a6a303c93fe38f28b7df

## 仕様

前ページがある場合、「前ページへ」のリンクを出す。クリックしたら現在のページの一つ前のページを開く。
次ページが有る場合、「次ページへ」のリンクを出す。クリックしたら現在のページの一つ次のページを開く。

## 内容

- `app/routes/tasks.tsx`を下記のように修正

    ```app/routes/tasks.tsx
    import type { MetaFunction } from "@remix-run/cloudflare";
    import type { TaskListInfos, Task } from "~/types";
    import { loader } from "./tasks-loader";
    export { loader };
    import { useLoaderData } from "@remix-run/react";
    
    export const meta: MetaFunction = () => {
      return [
        { title: "tasks" },
        {
          name: "description",
          content: "tasks",
        },
      ];
    };
    
    export default function Index() {
      const taskListInfos = useLoaderData<TaskListInfos>();
      const tasks = taskListInfos.tasks;
      const tasksCount = taskListInfos.tasksCount;
      const pageSize = taskListInfos.pageSize;
      const nowPage = taskListInfos.nowPage;
      const totalPage = Math.ceil(tasksCount / pageSize); // 切り上げで整数を返す
      const existsBeforePage = nowPage !== 1; // 現在のページが1ページ目ではない場合前ページが有る
      const beforePage = nowPage - 1; // 前ページのページ番号
      const existsAfterPage = nowPage !== totalPage; // 現在のページが最終ページではない場合次ページが有る
      const afterPage = nowPage + 1; // 次ページのページ番号
    
      return (
        <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
          <h1>tasks</h1>
          <ul>
            {tasks.map((task: Task) => (
              <li key={task.id}>
                <div>id: {task.id}</div>
                <div>name: {task.name}</div>
                <div>memo: {task.memo}</div>
                <div>is complete: {task.is_complete}</div>
                <div>task category: {task.task_category_master.name}</div>
                <div>created at: {task.created_at}</div>
                <div>updated at: {task.updated_at}</div>
              </li>
            ))}
          </ul>
          <div>
            <div>
              { existsBeforePage
                ? <a href={`?page=${beforePage}`}>
                    前ページへ
                  </a>
                : null
              }
            </div>
            <div>{nowPage} / {totalPage}</div>
            <div>
              { existsAfterPage
                ? <a href={`?page=${afterPage}`}>
                    次ページへ
                  </a>
                : null
              }
            </div>
          </div>
        </div>
      );
    }
    ```

- 下記のように前ページがないページにアクセスしたときに次ページへのリンクが現れる

    ![CleanShot 2024-07-06 at 13.29.16@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f608220b-45c0-d763-db7d-5ced531056c2.png)

- 下記のように前後のページがあるページにアクセスしたときに次ページと前ページへのリンクが現れる

    ![CleanShot 2024-07-06 at 13.30.07@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/32371ea7-a119-e9ea-1d4d-9f0a7be51ae5.png)

- 下記のように次ページがないページにアクセスしたときに前ページへのリンクが現れる

    ![CleanShot 2024-07-06 at 13.30.59@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0fd1ea4e-51e7-743d-45db-2bddacf74d0b.png)

ここまで確認できたら完了となる。