Next.js15+TypeScript：如何将layout的lang变量传递给嵌套组件

在你的项目场景下，要把layout.tsx中的lang变量传递给深层嵌套组件，有以下几种实用方案：

方法1：React Context（推荐用于全局/多层级场景） #

这种方式适合需要在多个无关联组件中共享lang的场景，无需逐层传递props。

1. 创建Context文件
   在src/app/i18n目录下新建context.ts：

// src/app/i18n/context.ts
import { createContext, useContext } from 'react';

type LangContextType = {
  lang: 'en' | 'pl';
};

const LangContext = createContext<LangContextType | undefined>(undefined);

export function LangProvider({ children, lang }: { children: React.ReactNode; lang: 'en' | 'pl' }) {
  return <LangContext.Provider value={{ lang }}>{children}</LangContext.Provider>;
}

export function useLang() {
  const context = useContext(LangContext);
  if (!context) {
    throw new Error('useLang must be used within a LangProvider');
  }
  return context;
}

2. 在Layout中包裹Provider
   修改你的layout.tsx，用LangProvider包裹children：

// src/app/[lang]/layout.tsx
import { LangProvider } from './i18n/context';

export async function generateStaticParams() {
  return [{ lang: 'pl' }, { lang: 'en' }];
}

type Params = Promise<{ lang: "en" | "pl" }>;

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Params;
}) {
  const { lang } = await params; 

  return (
    <html lang={lang}>
      <body>
        <LangProvider lang={lang}>
          <main>
            {children}
          </main>
        </LangProvider>
      </body>
    </html>
  );
}

3. 在深层组件中使用
   不管组件嵌套多深，只要在LangProvider范围内，就能通过useLang钩子获取lang：

// 深层嵌套组件，比如src/app/[lang]/components/DeepComponent.tsx
'use client'; // 客户端组件需添加该指令
import { useLang } from '../../i18n/context';

export default function DeepComponent() {
  const { lang } = useLang();
  return <div>当前语言：{lang}</div>;
}

方法2：Props逐层传递（适合层级较少的场景） #

如果组件层级不多，直接通过props传递是最直观的方式：

1. 在Layout中给页面组件传递lang
   修改layout.tsx的返回部分，动态给子组件注入lang props：

// 修改layout.tsx的return内容
return (
  <html lang={lang}>
    <body>
      <main>
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            return React.cloneElement(child, { lang });
          }
          return child;
        })}
      </main>
    </body>
  </html>
);

2. 页面组件接收并向下传递

// src/app/[lang]/page.tsx
import ChildComponent from './components/ChildComponent';

type PageProps = {
  lang: 'en' | 'pl';
};

export default function Page({ lang }: PageProps) {
  return <ChildComponent lang={lang} />;
}

3. 深层组件接收使用

// src/app/[lang]/components/DeepComponent.tsx
type DeepComponentProps = {
  lang: 'en' | 'pl';
};

export default function DeepComponent({ lang }: DeepComponentProps) {
  return <div>当前语言：{lang}</div>;
}

方法3：直接使用useParams（客户端组件） #

在Next.js App Router中，客户端组件可以直接通过useParams钩子获取路由参数，无需从layout传递：

// src/app/[lang]/components/DeepComponent.tsx
'use client';
import { useParams } from 'next/navigation';

export default function DeepComponent() {
  const params = useParams<{ lang: 'en' | 'pl' }>();
  const lang = params.lang;
  
  return <div>当前语言：{lang}</div>;
}

注意：该方法仅适用于客户端组件（需添加'use client'指令），且组件必须处于[lang]路由的范围内。

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