手動でexportPathMapを動的に設定する

こんにちは。GORAN です。ついこの前「手動でAPI（JSONファイル）を作ってJamstackにしたい」という謎の仕様希望があったので、その時の対応を残しておきます。

どんなときに使う？？

一般的に、Jamstack構成のサイトを設計するときというのは、microCMSのようなHeadless CMSを用意してAPIを設計し、[id].tsxなどでDynamic Routesを利用して静的ページ生成する場合がほとんどだと思います。

が、中には「個別のページファイルはコードである程度やりたいけど、一覧ページとかは自動生成したい」みたいな要望がありまして。

つまりは、いつも[id].tsxでやってるgetStaticPathsを手動でやりたいときがあるということです。

実装

方針はシンプルで、getStaticPathsでreturnしていたpathsを直接next.config.jsのexportPathMapに書いてしまおうというものです。

コード

module.exports = {
    ...
    exportPathMap: async function () {
        const paths = {
        '/': { page: '/' },
                ...
        }

        const arr = await require('**.json');
        const pathsArr = itemsArr.map(item => item.id);
        
        pathsArr.forEach(path => {
        paths[`/${path}`] = { page: path };
        });
    
        return paths
    }
}

上記のコードは以下のようなjsonを想定しています。

[
    {
        "id": "hogehoge",
        ...
    },
    ...
]

おわりに

今回はかなりニッチな話をしましたが、実は最近「Web制作とは」というポピュラーな概念について思案しておりまして。そろそろ何か書けそうなので、次はそんなメジャーな話をしたいと思います。

本年もよろしくお願いいたします。