如何使用服务器组件获取查询参数（下13）

Question

Next13 已推出，他们建议使用新app目录，其中每个组件默认都是“服务器组件”

在“服务器组件”内，您可以使用：

• async/await获取数据。
• cookies()检索 cookie
• headers()检索请求标头。

但我找不到如何检索查询参数。

在 Next 13 之前getServerSideProps，您可以使用context.query来访问查询参数。

您知道如何使用 Next 13 中的“服务器组件”检索查询参数吗？

Answer 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>;
}

请参阅文档

Answer 2

我知道这听起来很糟糕，但我也没有找到任何东西，所以你必须自己解析它

这是一个例子

import type { NextRequest, NextResponse } from 'next/server';
import qs from 'qs';
export async function GET(request: NextRequest, response: NextResponse) {
   try {
      const rawParams = request.url.split('?')[1];
      const params = qs.parse(rawParams);
// Now you have access to the query String parameters //
// Or you can do it this way
      const yourParamName = request.nextUrl.searchParams.get('paramName');
// also try getAll() I think that might work
    } catch (error: unknown) {
      console.log(error);
   }
}