Блог

Я борюсь с интеграцией next-i18next в проекте NextJS Typescript — нигде почти нет недавних примеров. Я уже настроил интернационализированную маршрутизацию, но я не могу правильно настроить i18next, пока меня беспокоит синтаксис getServerSideProps.

Я мало что знаю о машинописном тексте и еще не знаком с объявлениями типов.

Код выглядит следующим образом, в основном скопированный из документации 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-адреса было бы потрясающе.

Ошибка ввода о локали верна, потому что она может быть пустой, когда i18n не настроен. Смотрите обсуждение здесь: https://github.com/isaachinman/next-i18next/issues/1307

Существует несколько способов решения этой проблемы

1. Приведите языковой стандарт в виде строки

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

2. Определите свой собственный 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 amp; {
    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']),
  },
})
 

Я сам использую второй вариант, потому что таким образом мне не нужно все время приводить одну и ту же переменную, которая также уже является строкой.

 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
 

Если это не сработает, сообщите мне, и я поделюсь своим решением.

Работая с примерами, я тоже попытался получить доступ к { locale}, который оказался пустым в getServerSideProps.

Использование предложенного контекста (спасибо @ilia chill) сработало как заклинание.

Поскольку я уже использовал контекстный объект, доступ к локали в качестве атрибута был простым решением. (не могу прокомментировать, поэтому нужно повторить итерацию вот так 😉 )