はじめに

ページネーション機能のある一覧ページをSSGまたはISRにしようとした際に配列の作成を行い実装したのでこの記事を作成しました。

実装していく上での要点

APIサーバ(Django REST frameworkを使用)とWebサーバ(Next.js)を使用しています。

APIサーバは1ページあたりに表示する記事数を設定しており、Webサーバからリクエストがきた際にページネーションで扱うページ数を返すようにしています。
(1ページあたり表示する記事の数が6で記事数が12の場合、ページ数は2なので2をWebサーバへ返します)

正直なところ、今回のAPIサーバはページネーションで扱っているページ数を返しているだけなのでWebサーバだけでも実現可能ですが、「せっかくならAPIサーバを利用しよう」ということでこんな処理になっています。

実装の流れ

APIサーバへリクエストを送り、ページネーションのページ数を取得。
1から取得したページ数までが埋まった配列を作成後、mapしgetStaticPathsのpathsとして登録します。

なぜ配列を作成する必要があったのか

SSGやISRを実装する上でgetStaticPathsは必須であり、このgetStaticPathsには扱うURLを以下の形式で事前に登録しなければいけないためです。
そのため1からページネーションで扱うページ数までが含まれている配列を用意しなければいけませんでした。

// [id].tsxの時
[
    params: {
        { id: '1' }
    },
    params: {
        { id: '2' }
    }
    // こんな感じで続く
]

JavaScriptでの配列作成

まずはじめに、JavaScriptでの配列作成方法についてご説明します。

最小値から最大値で中身を埋めて配列を作成する関数

1からページネーションで取り扱うページ数までの数値を含んだ配列作成にはstartを1と固定してもいいのですが、汎用性を考慮してstartの値は引数として受け取れるようにしました。

const array = (start, end) =>
    [...Array(end - start -1)].map((_, i) => start + i)

使い方

上記の関数を定義後、以下のコードを実行すると[1,2, 3, 4, 5]となる配列を作成できるかと思います。

array(1, 5);

getStaticPathsの記述

 配列の作成方法を確認できたら、次に本来の目的である動的ルーティングを作成していきます。

export const getStaticPaths = async () => {
    const paths = await [生成するURLを返す関数]();// 後で記述します
    return {
        paths,
        fallback: false// falseにしておくことで生成されていないパスへのアクセスに404を返す
    }
}

生成するURLを返す関数

次にconst pathsに対応する処理を記述していきます。
page_totalはページネーションで扱うページ数を表しています。

import axios from "axios"// インストールも忘れずに

const [登録するURLを返す関数] = async () => {
    const array = (start, end) => 
        [...Array(end - start + 1)].map((_, i) => start + i)

    const res = await axios({
        method: "GET",
        url: [page_totalを返すAPIサーバのURL],
    })
    const page_total = await res.data.page_total;
    return array(1, page_total).map((pageNumber) => {
        return {
            params: {
                id: String(pageNumber)
            }
        }
    });
}

先ほど作成したarray関数を用いて、1からページネーションで扱う数(page_total)までの配列を作成しています。
私はpage_totalを取得するのにaxiosを使用していますが、fetchでも問題ありません。

これでページネーションを扱っている記事一覧のURLを事前に登録しておくことができました。

おわりに

いかがだったでしょうか。

私は今回ページネーションを用いた一覧ページをISRにしたかったため新しく配列を作成し、ダイナミックルートの生成を試みました。

この記事がお役に立てば幸いです。
最後までご覧くださりありがとうございました。