Next.js 13中在Root Layout获取搜索查询参数求助

在Next.js 13的App Router模式下，app/layout.tsx作为根布局组件，默认是服务端组件，可直接通过props接收searchParams来获取URL中的查询参数，以下是完整的实现方案：

完整代码示例 #

import { ReactNode } from 'react';

const Layout = async ({
  children,
  searchParams,
}: {
  children: ReactNode;
  searchParams: { [key: string]: string | string[] | undefined };
}) => {
  // 获取单个查询参数（例如URL中的?q=hello）
  const searchQuery = searchParams?.q;
  
  // 处理多值参数（例如URL中的?category=frontend&category=backend）
  const categories = Array.isArray(searchParams?.category) 
    ? searchParams.category 
    : [searchParams?.category].filter(Boolean);

  return (
    <html lang="zh-CN">
      <body>
        {/* 根据搜索参数渲染内容 */}
        {searchQuery && <div className="search-query">当前搜索：{searchQuery}</div>}
        {categories.length > 0 && <div className="categories">分类：{categories.join('、')}</div>}
        <main>{children}</main>
      </body>
    </html>
  );
};

export default Layout;

关键注意点 #

• searchParams是可选参数：当URL没有查询参数时，该值为undefined，需用可选链（?.）避免报错
• 多值参数处理：同一参数多次出现时（如?tag=a&tag=b），searchParams中对应的值会是数组类型，需判断后统一格式
• 服务端执行特性：因为Layout是服务端组件，所有基于searchParams的逻辑都会在服务端完成，不会传递到客户端代码中

内容的提问来源于stack exchange，提问作者Mehadi Hassan