NextJS 14组件间数据共享最优方案求助（服务端兼容）

针对你提到的认证会话传递和i18n语言参数传递的props drilling问题，以下是适配NextJS 14服务端组件（Server Components）的解决方案：

一、认证会话（Cookies/Headers）传递优化 #

1. 服务端组件：缓存会话获取逻辑 #

利用React.cache封装会话读取逻辑，同一次请求内共享会话数据，无需逐层传递props：

// app/lib/session.ts
import { cookies } from 'next/headers';
import { cache } from 'react';

export const getCurrentSession = cache(() => {
  const sessionCookie = cookies().get('session')?.value;
  return sessionCookie ? { apiKey: sessionCookie } : null;
});

在任意服务端组件中直接调用：

async function UserSettingsPopup() {
  const session = getCurrentSession();
  if (!session) return null;
  
  // 带会话发起服务端请求
  const userData = await fetch(`${process.env.API_URL}/user/settings`, {
    headers: { Authorization: `Bearer ${session.apiKey}` }
  }).then(res => res.json());
  
  return <div>{userData.preferences}</div>;
}

2. 客户端组件：用Server Actions处理请求 #

如果弹窗是客户端组件，无需传递会话Cookie，直接调用Server Actions（自动在服务端读取Cookies）：

// app/actions/userActions.ts
'use server';
import { cookies } from 'next/headers';

export async function getUserSettings() {
  const sessionCookie = cookies().get('session')?.value;
  if (!sessionCookie) throw new Error('未授权');
  
  const res = await fetch(`${process.env.API_URL}/user/settings`, {
    headers: { Authorization: `Bearer ${sessionCookie}` }
  });
  
  if (!res.ok) throw new Error('获取设置失败');
  return res.json();
}

客户端组件调用：

'use client';
import { getUserSettings } from '@/app/actions/userActions';
import { useState } from 'react';

function UserSettingsPopup() {
  const [settings, setSettings] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  const loadSettings = async () => {
    try {
      const data = await getUserSettings();
      setSettings(data);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <>
      <button onClick={() => { setIsOpen(true); loadSettings(); }}>打开设置</button>
      {isOpen && settings && <div>{settings.preferences}</div>}
    </>
  );
}

这种方式只有在弹窗打开时才会请求数据，避免页面加载时预加载不必要的内容。

二、i18n语言参数传递优化 #

1. 客户端组件：直接用useParams获取路由参数 #

客户端组件可以通过NextJS的useParams钩子直接获取动态路由的lang参数，无需props传递：

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

function LanguageAwareLink() {
  const params = useParams<{ lang: string }>();
  return <a href={`/${params.lang}/about`}>关于我们</a>;
}

2. 服务端组件：缓存语言参数 #

在根布局中设置当前语言，用缓存函数让子服务端组件直接获取：

// app/lib/i18n.ts
import { cache } from 'react';

let currentLang: string | undefined;

export const setCurrentLang = (lang: string) => {
  currentLang = lang;
};

export const getCurrentLang = cache(() => {
  if (!currentLang) throw new Error('语言参数未初始化');
  return currentLang;
});

根布局中设置语言：

export default async function RootLayout({ children, params }: { children: React.ReactNode, params: { lang: string } }) {
  setCurrentLang(params.lang);
  const translations = await import(`../locales/${params.lang}.json`).then(res => res.default);
  
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

子服务端组件获取语言：

async function LanguageAwareServerComponent() {
  const lang = getCurrentLang();
  const translations = await import(`../locales/${lang}.json`).then(res => res.default);
  
  return <div>{translations.greeting}</div>;
}

3. 客户端组件翻译数据传递：用客户端Context #

如果需要将服务端加载的翻译数据传递给客户端组件，用React Context封装，避免props drilling：

// app/components/TranslationProvider.tsx
'use client';
import { createContext, useContext, ReactNode } from 'react';

type TranslationContextType = {
  t: (key: string) => string;
};

const TranslationContext = createContext<TranslationContextType | undefined>(undefined);

export function TranslationProvider({ children, translations }: { children: ReactNode, translations: Record<string, string> }) {
  const t = (key: string) => translations[key] || key;
  return (
    <TranslationContext.Provider value={{ t }}>
      {children}
    </TranslationContext.Provider>
  );
}

export const useTranslation = () => {
  const context = useContext(TranslationContext);
  if (!context) throw new Error('useTranslation必须在TranslationProvider内使用');
  return context;
};

根布局中注入翻译数据：

export default async function RootLayout({ children, params }: { children: React.ReactNode, params: { lang: string } }) {
  const translations = await import(`../locales/${params.lang}.json`).then(res => res.default);
  
  return (
    <html lang={params.lang}>
      <body>
        <TranslationProvider translations={translations}>
          {children}
        </TranslationProvider>
      </body>
    </html>
  );
}

客户端组件使用翻译：

'use client';
import { useTranslation } from '@/app/components/TranslationProvider';

function Greeting() {
  const { t } = useTranslation();
  return <h1>{t('hello')}</h1>;
}

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