getStaticPropsではクエリパラメータは取得できない

getStaticProps内でURLのパラメータを取得したかったんだけど、上手くいかなかったので調べた諸々をメモ

結論：getServerSidePropsを使う

パラメータを取得するときはgetServerSidePropsを使う。

export const getServerSideProps = async (context) => {
    const keyword = context.query.q;
    const page = context.query.page;
    const data = await client.get({
        endpoint: 'blogs',
        queries: { q: keyword, offset: (page - 1) * PER_PAGE, limit: PER_PAGE },
    });
    return {
        props: {
            blog: data.contents,
            totalCount: data.totalCount,
            keyword: keyword,
        },
    };
};

getStaticPropsとの違い

API	概要
getStaticProps	「ビルド時」にデータを取得する
getServerSideProps	「リクエスト時」にデータを取得する

リクエストを受けてからサーバーサイドでページ生成するgetServerSidePropsと比べるとgetStaticPropsの方がパフォーマンス面では優位。

補足

併用不可

同じページコンポーネント内ではgetStaticProps (& getStaticPaths) と getServerSidePropsは併用できない。

getInitialProps は？

getServerSidePropsやgetStaticPropsの登場以来、Next.js は基本的にこのどちらかを使うことを推奨している。