Next.js v14服务端Loading UI如何获取URL查询参数？

由于loading.tsx作为服务端组件时无法直接通过组件props拿到searchParams，但你又需要保持服务端渲染以展示用户会话内容，可以通过以下方式解决：

方法：利用headers()手动解析查询参数 #

Next.js的服务端组件可以通过headers()函数获取请求头信息，从中提取当前请求的URL并解析查询参数：

import { headers } from 'next/headers';

export default async function Loading() {
  const headersList = headers();
  // 优先取Next.js内部传递的当前请求URL
  const requestUrl = headersList.get('x-nextjs-url') || '';
  
  if (!requestUrl) {
    return <p>正在处理请求...</p>;
  }

  const searchParams = new URL(requestUrl).searchParams;
  // 示例：获取具体参数，比如`userId`
  const userId = searchParams.get('userId');

  return (
    <div>
      <p>正在处理您的请求，用户ID：{userId}</p>
    </div>
  );
}

关键说明 #

• x-nextjs-url是Next.js在服务端请求中自动添加的请求头，包含当前完整的请求URL，比referer更可靠。
• 整个逻辑在服务端执行，完全兼容用户会话等服务端渲染的需求，无需转为客户端组件。
• 注意处理requestUrl为空的边界情况，避免解析时出现报错。

内容的提问来源于stack exchange，提问作者Jack Evans