如何在Next.js中无需Context传递全局本地化数据至页面组件

问题现状 #

目前通过API获取本地化键值数组数据，使用Context Provider传递给子组件，但所有使用本地化数据的组件必须改为客户端组件，不符合需求。数据仅需每日重新验证一次，希望改用服务端方式传递，让page.jsx拥有languages属性，用普通函数筛选数据。

解决方案步骤 #

1. 封装带缓存的本地化数据获取函数 #

创建服务端工具函数，利用Next.js的缓存机制将数据缓存24小时，避免重复请求：

// app/utils/localization.js
import post_req from './your-post-req-path'; // 替换为你的post_req实际路径

export async function getLocalizationData() {
  // 缓存24小时，revalidate设置为86400秒
  const res = await post_req(
    process.env.LANG_GET_TRANSLATELIST,
    false,
    { AddLang: true, list: TranslationByPage },
    false,
    { next: { revalidate: 86400 } } // 添加缓存配置，控制刷新频率
  );
  return res.data?.Data?.list || [];
}

2. 创建普通筛选函数替代钩子 #

把原来的useLanguage钩子改造成普通函数，直接接收本地化数据和formKey：

// app/utils/localization.js
export function getLocalizedValue(localizationData, formKey) {
  const _languages = localizationData.find(el => Array.isArray(el));
  const _value = _languages?.find(el => el.FormKey === formKey);
  return _value?.Value || _value?.Key || '';
}

3. 在Page组件中直接使用 #

在每个page.jsx（服务端组件）中调用获取数据的函数，拿到languages后使用筛选函数：

// app/your-page/page.jsx
import { getLocalizationData, getLocalizedValue } from '@/app/utils/localization';

export default async function YourPage() {
  const languages = await getLocalizationData();

  // 直接用普通函数筛选翻译值
  const welcomeText = getLocalizedValue(languages, 'welcome_key');

  return (
    <div>
      <h1>{welcomeText}</h1>
    </div>
  );
}

4. （可选）向子组件传递数据 #

如果需要在子组件（服务端组件）中使用，直接将languages作为props传递，无需改为客户端组件：

// app/your-page/page.jsx
import { getLocalizationData } from '@/app/utils/localization';
import ChildComponent from './ChildComponent';

export default async function YourPage() {
  const languages = await getLocalizationData();

  return (
    <div>
      <ChildComponent languages={languages} />
    </div>
  );
}

// app/your-page/ChildComponent.jsx （服务端组件）
import { getLocalizedValue } from '@/app/utils/localization';

export default function ChildComponent({ languages }) {
  const buttonText = getLocalizedValue(languages, 'button_submit');
  return <button>{buttonText}</button>;
}

核心优势 #

• 所有组件保持服务端组件身份，无需添加'use client'指令
• 数据自动缓存24小时，符合每日验证的需求
• 用普通函数替代钩子，彻底摆脱Context带来的客户端依赖

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