Next.js

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 は?

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

ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。