Next.js 13中如何在Layout或组件中获取搜索参数lang？

方案一：客户端组件用useSearchParams钩子 #

Next.js 13 App Router里，客户端组件可直接通过useSearchParams拿到URL搜索参数，适配你的DashboardMenu组件：

1. 给DashboardMenu加上'use client'指令，标记为客户端组件
2. 调用钩子提取lang参数，设置默认值避免空值

修改后代码：

'use client';
import { useSearchParams } from 'next/navigation';

export default function DashboardMenu(){
    const searchParams = useSearchParams();
    const lang = searchParams.get('lang') || 'en';
    const langData: DashboardLangsTypes = getLang(lang, "dashboard");
    return (
        // 菜单渲染内容
    )
}

方案二：页面组件中转传递参数到Layout #

如果要在Layout里拿到lang，可以先在对应页面组件获取searchParams，再通过props传给Layout：

1. 更新Layout的Props定义 #

type DashboardProps = {
  children: React.ReactNode;
  lang: string;
};

export default function DashboardLayout({ children, lang }: DashboardProps) {
    // 这里可直接使用lang，比如传给子组件
    return (
        <html>
            <body>
                <div className="w-full h-full flex absolute bg-slate-100">
                    <div className="flex flex-col">
                        {/* ... 原有代码 ... */}
                        <div className="bg-white h-full shadow-md">
                            <DashboardMenu lang={lang} />
                        </div>
                    </div>
                    {/* ... 原有代码 ... */}
                </div>
            </body>
        </html>
    )
};

2. 页面组件获取并传递参数 #

比如dashboard/page.tsx作为服务端组件，可直接接收searchParams：

import DashboardLayout from '../layout';

export default function DashboardPage({ searchParams }: { searchParams: { lang?: string } }) {
  const lang = searchParams.lang || 'en';
  return (
    <DashboardLayout lang={lang}>
      {/* 页面内容 */}
    </DashboardLayout>
  );
}

方案三：服务端组件用headers()解析URL #

如果是服务端组件（包括服务端Layout），可以通过headers()函数拿到请求头里的URL信息，解析出搜索参数：

import { headers } from 'next/headers';

export default function DashboardLayout({ children }: DashboardProps) {
    const headersList = headers();
    const requestUrl = headersList.get('x-nextjs-url') || '';
    const searchParams = new URL(requestUrl, 'http://localhost').searchParams;
    const lang = searchParams.get('lang') || 'en';

    return (
        <html>
            <body>
                <div className="w-full h-full flex absolute bg-slate-100">
                    <div className="flex flex-col">
                        {/* ... 原有代码 ... */}
                        <div className="bg-white h-full shadow-md">
                            <DashboardMenu lang={lang} />
                        </div>
                    </div>
                    {/* ... 原有代码 ... */}
                </div>
            </body>
        </html>
    )
};

注意：这个方法依赖服务端请求头，客户端路由切换时可能需要配合其他方式处理。

内容的提问来源于stack exchange，提问作者Tomás