getStaticPropsではクエリパラメータは取得できない
Next.js
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 は基本的にこのどちらかを使うことを推奨している。
