getStaticPathsについて

動的ルーティングを行うページでgetStaticPropsを使用してSSGやISRといった技術を実現する際に扱う関数のことです。

getStaticProps, SSGについてはこちらで紹介しています。
[入門]Next.jsのgetStaticPropsについて

動的ルーティングとは

動的ルーティングは別名、ダイナミックルーティングとも呼ばれ、予め決められたURLでなくてもアクセスした際のURLに応じたページを表示したりと汎用的なことができます。

動的ルーティングのページは[id].jsxのようなファイル名となり、SSGを利用するためにこの[id]に対するパス名をgetStaticPathsを用いて事前に決めていきます。

動的ルーティングについてはこちらで詳しく紹介しています。
[入門]Next.jsのダイナミックルーティング作成方法

実際のコード

では、getStaticPathsを用いてパスの設定方法を実際のコードとともに説明します。

getStaticPaths関数はasyncを必ず使用し、pathsの中にあらかじめ登録しておくパスを入れます。

今回は[id].jsxを例に出していますが、仮に[slug].jsxを作成した場合は以下のコードにある「id」が「slug」となります。

// [id].jsx
export const getStaticPaths = async () => {
    return {
        paths: [
            { params: { id: '1'} },
            { params: { id: '2'} },
            // こんな感じで続く
        ],
        fallback: false
    }
}

fallbackについて

getStaticPathsで定義しなかったパスにアクセスした際の処理をfallbackを用いることで決めることができます。
fallbackにはtrue, false, 'blocking'の3つの値があります。

以下コードのfallbackにそれぞれの値を入れて検証していきます。
(fallbackの動作を確認したいため、getStaticPathsで定義していないパスにアクセスします。)

// [id].jsx

const FallbackTest = ({ title }) => {
    return (
        <>
            <p>Fallbackのテスト</p>
            <h1>{ title }</h1>// ここにはgetStaticPropsから渡された値のtitle(タイトル)が入ります
        </>
    )
}

export default FallbackTest;

export const getStaticPaths = async () => {
    return {
        paths: [
            { params: { id: String(1) } }// 定義しているパスは1のみ
        ],
        fallback: // ここにそれぞれの値を入れてみる
    }
}

export const getStaticProps = async () => {
    return {
        props: {
            title: "タイトル"
        }
    }
}

trueにした場合

trueの場合、ページを読み込むと「Fallbackのテスト」のみ最初に表示され、その後に「タイトル」が表示されます。
これはサーバーサイドでHTMLファイルの生成が完了するまでの間、生成完了前のデータを表示するためです。
生成完了後は出来上がったデータを表示します。

falseにした場合

falseの場合は404エラーを返却するため上記のページコンポーネントとは異なったページが表示されます。

'blocking'にした場合

blockingを設定していると「Fallbackのテスト」と「タイトル」が同時に表示されます。
これはサーバーサイドでHTMLファイルを生成してからブラウザに渡すためです。
そのため途中から表示内容が変わることはありません。

また、この値だけ''がついているのに気が付いたでしょうか。
上記のtrueとfalseについてはbool型で、blockingは文字列となるため''をつける必要があります。

おわりに

getStaticPathsはgetStaticPropsと一緒に使用する必要があるので興味のある方はぜひこちらの記事もご覧ください。
[入門]Next.jsのgetStaticPropsについて

最後までご覧くださりありがとうございました。