Next.jsのfetch APIでqueryパラメータを使用する方法

Next.jsのgetServerSideProps等でfetch APIを使用してSSRする場合に、queryパラメータを扱う方法を説明します。

実装

query-stringというNPMライブラリを使用します。 query-stringを使用することで、安全にqueryパラメータを生成することができます。

import queryString from 'query-string';

export async function getServerSideProps(context) {
  // contextからqueryを取得します
  const { query } = context;

  // queryが空でない場合は、queryString.stringifyによりquery stringに変換します
  const qs = Object.keys(query).length === 0 ? '' : '?' + queryString.stringify(query);

  // fetch apiにquery stringを付与して結果を取得します
  const response = await fetch(`https://...com/products${qs}`
  const products = await response.json();
  return { props: {products} };
}

query-stringはstringifyメソッド以外にも、query stringをオブジェクト型に変換する処理や、Array型を任意の配列のフォーマットに合わせたquery stringを生成する処理などもありますので、とても便利なライブラリです。