Как настроить i18next с Next.js 13^ для серверных и клиентских компонентов

Question

Next community, у меня возникли проблемы с настройкой интернационализации с помощью нового Next.js13. Я также использую i18next.

Прошу вашей помощи и могу привести несколько примеров рабочей установки.

Это то, что я пробовал до сих пор (я использую новый каталог «приложение»)

      //next-i18next-config.js

module.exports = {
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
}

      // next.config.js

const { i18n } = require('./next-i18next-config')

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { appDir: true },
  i18n
}

module.exports = nextConfig

      public
├── favicon.ico
└── locales
    ├── de
    │   └── translation.json
    └── en
       └── translation.json

      // package.json

"dependencies": {
    "i18next": "^22.0.4",
    "next": "13.0.0",
    "next-i18next": "^12.1.0",
    "react-i18next": "^12.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.56.0",
    "typescript": "4.8.4",
  },

Проблема на стороне сервера - ошибка при использовании перевода

      app/
├── approach
│   └── page.tsx
├── layout.tsx
├── loading.tsx
└── page.tsx

      import { use } from 'react'
import { useTranslation } from 'next-i18next' // I also tried 'react-i18next'

async function getApproachPage() {
  const res = await fetch(`${process.env.BASE_URL}/page/approach`, {
    cache: 'no-store', // SSR getServerSideProps
  })

  return res.json()
}

const ApproachPage = () => {
  const { t } = useTranslation() // Getting an Error here : (

  const data = use(getApproachPage()) // TODO: implement res data in page after setting up translations

  return (
    <h1>{t('approach.title')}</h1>
  )
}

export default ApproachPage

Проблема на стороне клиента - не удается найти файлы translation.json

Вот как я делаю конфиг в версии v12 и ниже (ссылка)

Одна из вещей, которую я не могу понять, это как это сделать в версии 13.

      export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'home'])),
    }, 
  }
}

Answer 1

Ладно, наконец-то я понял, как сделать установку, которая действительно работает.

Я смог понять, как это сделать, благодаря этому невероятно подробному руководству. Я передам это здесь, кому еще это нужно

https://locize.com/blog/next-13-app-dir-i18n/

Answer 2

Попробуйте добавить «использовать клиент» в начало файла, вы не можете использовать состояние на стороне клиента в компонентах сервера.