Next.js+Typescript+i18n项目中getServerSideProps的正确语法怎么写？

前置配置（先确认已完成） #

首先确保你已经完成两个基础配置文件的编写：

• next.config.js 配置国际化路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    // 替换为你实际支持的所有语言
    locales: ['zh-CN', 'en-US'],
    // 替换为你的默认语言
    defaultLocale: 'zh-CN',
  },
  reactStrictMode: true,
}

module.exports = nextConfig

• 根目录新建next-i18next.config.js：

module.exports = {
  i18n: {
    defaultLocale: 'zh-CN',
    locales: ['zh-CN', 'en-US'],
    // 翻译文件默认存放路径为 public/locales/{locale}/{命名空间}.json
  },
}

你需要在public/locales下新建对应语言的文件夹，比如zh-CN、en-US，每个文件夹下放对应的命名空间JSON文件，比如common.json、header.json，内容格式示例：

// public/locales/zh-CN/common.json
{
  "welcome": "欢迎来到首页"
}

修复getServerSideProps的类型错误 #

你遇到的locale相关报错来自两个原因：

1. Next.js的GetServerSideProps上下文里的locale字段是可选类型，可能为undefined
2. 没有正确处理异步返回的类型兼容
   修正后的getServerSideProps写法：

import type { GetServerSideProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'

// 页面组件
const Home = () => {
  // 传入命名空间即可调用对应翻译
  const { t } = useTranslation('common')
  return <h1>{t('welcome')}</h1>
}

export const getServerSideProps: GetServerSideProps = async ({ locale, defaultLocale }) => {
  // 给locale加兜底逻辑，避免为空报错
  const currentLocale = locale || defaultLocale
  return {
    props: {
      ...await serverSideTranslations(currentLocale, ['common', 'header']),
    },
  }
}

export default Home

静态内容项目的更优方案 #

如果你的项目以静态内容为主，不需要每次请求都做服务端渲染，建议用getStaticProps替代getServerSideProps，打包时预生成所有语言版本的静态页面，性能更好，配置几乎完全一致：

import type { GetStaticProps } from 'next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { useTranslation } from 'next-i18next'

const Home = () => {
  const { t } = useTranslation('common')
  return <h1>{t('welcome')}</h1>
}

export const getStaticProps: GetStaticProps = async ({ locale, defaultLocale }) => {
  const currentLocale = locale || defaultLocale
  return {
    props: {
      ...await serverSideTranslations(currentLocale, ['common', 'header']),
    },
    // 可配置增量更新，有内容变更时自动重新生成页面，单位为秒
    revalidate: 86400,
  }
}

// 开启SSG多语言预渲染需要加这个函数生成所有语言的静态路径
export const getStaticPaths = () => {
  return {
    paths: [
      { params: {}, locale: 'zh-CN' },
      { params: {}, locale: 'en-US' },
    ],
    fallback: false,
  }
}

export default Home

全局入口配置 #

需要在_app.tsx里包装app组件来让翻译全局生效：

import type { AppProps } from 'next/app'
import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

以上配置完成后，访问根路径/会匹配默认语言，访问/en-US会自动切换为英文内容，翻译完全对应URL里的locale参数。

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