Lingui在Next.js特殊loading.js文件中的国际化方案解析

2025-06-09 00:28:28作者：傅爽业Veleda

背景介绍

在使用Next.js框架开发多语言应用时，开发者经常会遇到需要为页面加载状态添加国际化支持的需求。Next.js提供了特殊的loading.js文件来自定义页面加载UI，但当结合Lingui国际化库使用时，会出现一些技术挑战。

核心问题分析

在Next.js应用中，loading.js文件是一个特殊文件，Next.js不会向这个文件传递路由参数（包括语言参数）。这导致在使用Lingui进行国际化时遇到两个主要问题：

当使用高阶组件withLinguiPage时，由于缺少路由参数props.params，无法正确初始化i18n实例
当不使用高阶组件时，会收到RSC（React Server Component）环境下i18n实例未初始化的错误提示

技术解决方案

方案一：使用Suspense替代loading.js

Next.js的loading.js本质上是对React Suspense的封装。开发者可以考虑直接使用Suspense组件来替代loading.js文件，这样可以获得完整的路由参数传递能力。

import { Suspense } from 'react'
import LoadingComponent from './LoadingComponent'

export default function Page() {
  return (
    <Suspense fallback={<LoadingComponent />}>
      {/* 页面内容 */}
    </Suspense>
  )
}

方案二：全局i18n实例初始化

对于必须使用loading.js的场景，可以考虑在应用根布局中初始化i18n实例，确保所有组件（包括loading组件）都能访问到i18n功能。

// app/layout.js
import { setI18n } from '@lingui/core'
import { i18n } from './i18n-config'

export default function RootLayout({ children }) {
  setI18n(i18n)
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

方案三：静态加载提示

如果加载提示不需要动态变化，可以考虑使用静态文本或预定义的翻译键，避免在loading组件中进行动态翻译。

// 预定义的翻译内容
const loadingMessages = {
  en: 'Please wait while we redirect you...',
  zh: '正在跳转，请稍候...'
}

function Loading() {
  return (
    <div>
      {loadingMessages['en']} {/* 使用默认语言 */}
    </div>
  )
}