☰

サーバーコンポーネントを使用してクエリパラメータを取得する方法（次の13）質問する

tag-icon • tag-icon reactjs next.js server-side-rendering
サーバーコンポーネントを使用してクエリパラメータを取得する方法（次の13）質問する

appNext13がリリースされ、すべてのコンポーネントがデフォルトで存在する新しいディレクトリを使用することが推奨されています。「サーバーコンポーネント」

「サーバー コンポーネント」内では、以下を使用できます。

  • async/awaitデータを取得します。
  • cookies()クッキーを取得する
  • headers()リクエスト ヘッダーを取得します。

しかし、クエリパラメータを取得する方法が見つかりません。

Next 13 より前では、 内でgetServerSideProps、 を使用してcontext.queryクエリ パラメータにアクセスできました。

Next 13 で「サーバー コンポーネント」を使用してクエリ パラメータを取得する方法をご存知ですか。

ベストアンサー1

現時点では、任意のコンポーネントでこれを行うことはできないと思います。ただし、page.tsxファイル内のクエリ パラメータにアクセスし、これを props 経由でコンポーネントに渡すことは可能です。

export default function Page({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  return <h1>{searchParams?.greeting || "Hello!"}</h1>;
}

を参照してくださいドキュメント

おすすめ記事