前回はクライアントコンポーネントで動的パスやクエリパラメーターを取得しましたが、今回はサーバーサイド（サーバーコンポーネント）で取得する場合の方法。下記のコードでサーバーサイド（SSR）で動作するようです。例として/[slug]/page.jsという動的ルーティングのファイルを作成して、/taro/?id=10にアクセスした場合。

export default function Page(props) {
 const slug = props.params.slug;
 const pram = props.searchParams.id;
 return (
  <main>
   <p>パスは、<i>{slug}</i>です。</p>
   <p>GETパラメータは、<i>{pram}</i>です。</p>
  </main>
 );
}

paramsで動的パス、searchParamsでクエリパラメータを取得できました。

応用編。気象庁のAPIを取得表示するサンプル。http://localhost:3000/130000/にアクセスしたら東京都の気象情報を表示する…的な。

const getData = (slug) => fetch(`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${slug}.json`).then((res) => { return res.json()});
export default async function Page(props) {
 const slug = props.params.slug;
 const data = await getData(slug);
 return (
  <main>
   <p>{data.targetArea}の天気は{data.targetArea}です</p>
  </main>
 );
}

• 関連記事：Next.jsのApp Routerでクエリパラメータ（GETパラメータ）と動的パスを取得

おしまい♥

タグ：Next.js