Next.js13のappディレクトリ構成でServer Componentでクエリパラメータを取得する

はじめに

Next.js13.4からstableとなったappディレクトリでは、デフォルトのコンポーネントがServer Componentとなりました。

Client ComponentではuseSearchParamsフックが使えますが、Server Componentから利用するとエラーになってしまい使えません。
代わりにsearchParamsを利用することでServer Componentでクエリパラメータを取得することができます。

Next.jsはまだ経験が浅いので、間違っている箇所やもっと良い方法があればご指摘ください。

実装例

例えば以下のようにクエリパラメータで渡されたnameを取得する場合を考えます。

localhost:3000/sample?name=名前

page.tsxでsearchParamsを利用することでパラメータの値を取得できます。
クエリパラメータから受け取った値をデータフェッチ処理に渡す実装は以下のように書けます。

page.tsx

const getData = async ({name}: {name: string}) => {
  // データのフェッチ処理
}

export default async function Page ({searchParams}: {searchParams: {name: string}})  {
  const data = await getData({name: searchParams.name});

  return (
    <>
    </>
  )
}

ちなみに[slug]などディレクトリ内に角括弧を含む場合はsearchParamsではなくparamsを使って書くことができます。