Typescript next.js + i18n 的正确 getServerSideProps 语法

Question

我正在努力 next-i18next 集成到 NextJS Typescript 项目中 - 几乎没有任何最新示例。我已经配置了 国际化路由 ，但是只要 getServerSideProps 语法困扰我，我就无法正确设置 i18next。

我对 Typescript 了解不多，对类型声明也不熟悉。

代码看起来像这样，主要是从 next-i18next 文档中复制的：

### index.tsx

// rest of index.tsx...

export const getServerSideProps: GetServerSideProps = async ({locale}) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'header']),
  },
})

export default Home

我的 IDE 中出现关于“语言环境”的错误。即使我使用的是 getServerSideProps，我什至不确定它是否是大多数静态项目的最佳解决方案，但如果我最终计划 SSR，我似乎无法避免它。提供正确翻译内容的简单方法 + 具有匹配的 URL 语言环境会很棒。

Answer 1

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
.....
//try cxt or context (or locale) variables
export const getServerSideProps: GetServerSideProps = async (ctx) => ({
      props: {
        ...await serverSideTranslations(ctx.locale, ['common', 'header']),
      },
    })
    
export default Home

如果不行，通知我，我会分享我的解决方案。

Answer 2

有关语言环境的输入错误是正确的，因为在未设置 i18n 时它可以为空。请参阅此处的讨论：https://github.com/isaachinman/next-i18next/issues/1307

有多种方法可以解决这个问题

将语言环境转换为字符串

export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale as string, ['common', 'header']),
  },
})

定义您自己的 GetServerSideProps 类型，其中 locale 不是可选的并使用那个。

type CustomGetServerSideProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery
> = (context: GetServerSidePropsContext<Q>) => Promise<GetServerSidePropsResult<P>>

type GetServerSidePropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = {
  req: IncomingMessage & {
    cookies: NextApiRequestCookies
  }
  res: ServerResponse
  params?: Q
  query: ParsedUrlQuery
  preview?: boolean
  previewData?: PreviewData
  resolvedUrl: string
  locale: string // This is where the magic happens.
  locales?: string[]
  defaultLocale?: string
}

export const getServerSideProps: CustomGetServerSideProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'header']),
  },
})

我自己使用第二个选项，因为这样我就不必一直转换同一个变量，它也已经是一个字符串。

Answer 3

根据这些示例，我也想到了尝试访问 {locale}，但在 getServerSideProps 中它是空的。

使用建议的上下文（感谢@illia chill）非常有效。

由于我已经在使用上下文对象 - 将语言环境作为属性访问是一个简单的解决方案。（不能评论，所以需要像这样重复;））

Typescript next.js + i18n 的正确 getServerSideProps 语法

proper getServerSideProps syntax for Typescript next.js + i18n

typescript

next.js

i18next

next-i18next