如何使用Server组件（next 13）获取查询参数

Question

Next13已经发布，他们建议使用新的app目录，其中每个组件默认都是一个"服务器组件"

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

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

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

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

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

- Tonio

---

我目前不知道有任何方法来做到这一点。我也一直在寻找方法，但还没有得到任何好运。我只知道 useSearchParams，而那是用于客户端组件的。你能找到一个方法吗？如果找到了，你是怎么做到的呢？ - Idris

到目前为止，我还没有找到解决方案。 - Tonio

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

请参阅文档

- Kieran

---

那听起来像是一个不错的解决方法。 - Tonio

太棒了，使用searchParams对我来说很有效。谢谢。 - Rahmat Oktrifianto

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

- Peter the Russian

---

在路由中，您可以使用 req.nextUrl.searchParams，它返回 URLSearchParams。您可以通过 req.nextUrl.searchParams.get("paramName") 获取特定参数。 - Nishant

Answer 3

最后，我发现了在Next.js 13.4中获取查询值的简便方法。

    const url = new URL(request.url);
    const searchParams = new URLSearchParams(url.search);
    const skip = searchParams.get("skip"); // Retrieves the value of the 'skip' parameter
    const limit = searchParams.get("limit"); // Retrieves the value of the 'limit' parameter

    console.log(skip);
    console.log(limit);

- Gaurav Narnaware

---

嗯，request变量具体是从哪里来的？我在应用程序路由/Next.js的范围内没有看到它。 - cevaris

很遗憾，这只适用于您可以访问“request”对象的路由（正如Nishant在上面已经解释过的那样）。 - undefined

很遗憾，这只适用于您可以访问“request”对象的路由（正如Nishant在上面已经解释过的那样）。 - Rico

导出常量POST = (请求) => {} - Gaurav Narnaware

获取错误：无效的URL - Siraj Ali

Answer 4

如果你想在不必传递URL搜索参数的情况下访问它们，你可能想使用中间件来设置请求头中的URL，并在服务器组件中获取它。

// /middleware.ts
import { NextResponse } from 'next/server';

export default function middleware(request: NextRequest, event: NextFetchEvent) {
  request.headers.set('x-url', request.url);

  return next(request, event);
}

然后，在任何服务器组件中：

import { headers } from 'next/headers';

export const ServerComponent = () => {
  const url = new URL(headers().get('x-url')!);
  const searchParams = url.searchParams;
  // ...
}

另请参阅https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664。

- Sjoerd

Answer 5

NextJS版本- 13.5.2

文件位置 PROJECT/src/app/api/products/route.js

export async function GET(request) {

    const queryString = request.url.split('?')[1];
    const page = Number(new URLSearchParams(queryString).get('page')) || 1;
    const limit = Number(new URLSearchParams(queryString).get('limit')) || 1;

    console.log(page)
    console.log(limit)

    return NextResponse.json({ 'status': true }, { status: 200 })
}

- Joyal