在i18next中能否为{{val, datetime}}格式设置独立默认区域设置？

核心思路是在i18next初始化时保存用户的原始检测locale（比如从请求头获取的de-DE），后续使用Intl.* API时优先使用这个原始locale，而非i18next回退后的语言（如en）。

1. 初始化i18next时保存用户原始locale #

在Next.js SSR场景中，从请求头拿到用户的locale后，直接挂载到i18next实例上，不管i18next是否支持该语言：

// i18n.js
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

export async function initI18n(userLocale) {
  // 保存用户原始locale到i18next实例
  i18next.userLocale = userLocale;

  return i18next.use(initReactI18next).init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'], // 你的项目支持的语言列表
    interpolation: {
      escapeValue: false, // React已自动处理转义
    },
    // 其他i18next配置...
  });
}

在Next.js的服务端逻辑（如getServerSideProps）中传递用户locale：

// 页面组件
export async function getServerSideProps(context) {
  // 从请求头解析用户首选locale
  const userLocale = context.req.headers['accept-language']?.split(',')[0] || 'en';
  await initI18n(userLocale);

  return { props: {} };
}

2. 封装格式化工具函数 #

写通用的日期/数字格式化函数，优先使用用户原始locale，不支持时回退到i18当前语言：

// utils/format.js
export function formatDate(date, formatOptions = {}) {
  // 检查原始locale是否被当前环境支持，不支持则回退到i18next当前语言
  const validLocale = Intl.DateTimeFormat.supportedLocalesOf(i18next.userLocale)[0] || i18next.language;
  return new Intl.DateTimeFormat(validLocale, formatOptions).format(date);
}

// 数字格式化同理
export function formatNumber(number, formatOptions = {}) {
  const validLocale = Intl.NumberFormat.supportedLocalesOf(i18next.userLocale)[0] || i18next.language;
  return new Intl.NumberFormat(validLocale, formatOptions).format(number);
}

3. 结合i18next插值实现模板内格式化 #

如果需要在翻译字符串中直接格式化，可以扩展i18next的插值器，自动使用用户原始locale：

// 修改i18n.js中的interpolation配置
interpolation: {
  escapeValue: false,
  format: (value, formatType) => {
    if (value instanceof Date) {
      const validLocale = Intl.DateTimeFormat.supportedLocalesOf(i18next.userLocale)[0] || i18next.language;
      // 根据formatType返回对应格式，比如'date'对应短日期，'longDate'对应长格式
      const options = formatType === 'date' 
        ? { year: 'numeric', month: '2-digit', day: '2-digit' }
        : formatType === 'longDate' 
        ? { year: 'numeric', month: 'long', day: 'numeric' }
        : {};
      return new Intl.DateTimeFormat(validLocale, options).format(value);
    }
    return value;
  },
}

然后在翻译文件（如en.json）中使用：

{
  "welcome": "Welcome! Your last visit was on {{lastVisitDate, date}}",
  "signupDate": "You signed up on {{signupDate, longDate}}"
}

使用时直接传递Date对象即可：

t('welcome', { lastVisitDate: new Date() });

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