next-i18next 如何在组件中使用？

Question

我已完成文档中的所有步骤。

为什么下面的代码不起作用？对于NextJs，除了每个页面文件夹之外，不能在任何页面上执行SSR。例如，如何使用导航栏的翻译？我找不到任何解决方案。 当我使用翻译时什么也没有发生，但是当我首先在服务器端然后使用翻译时它的工作。

"i18next": "^22.4.5", “下一个”：“13.0.6”， "next-i18next": "^13.0.1", “反应”：“18.2.0”，

这是作品

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

export const Footer = () => {
  const { t } = useTranslation('footer')

  return (
    <footer>
      <p>{t('description')}</p>
    </footer>
  )
}


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

这不是作品

import { useTranslation } from 'next-i18next'

export const Footer = () => {
  const { t } = useTranslation('footer')

  return (
    <footer>
      <p>{t('description')}</p>
    </footer>
  )
}

如果没有 ssg、ssr，我该如何完成这项工作

我搜索但找不到任何答案。

Answer 1

您必须使用 SSG 或 SSR 将 props 传递到页面，因为静态文件仅位于服务器上（公共文件夹内），而不位于动态文件所在的 src 文件夹中。这意味着您必须使用服务器端渲染将翻译添加到页面。

编辑：

 return {
    props: {
        ...(await serverSideTranslations(locale, ['common'])),
    }
}

Answer 2

我刚刚遇到了同样的问题 - 如果您更改语言环境、设置新的翻译命名空间、文件、更改配置等。请尝试删除 .next 目录并重新启动开发服务器。

这为我解决了这个问题。

您还可以设置：

reloadOnPrerender: true

在您的 next-18next.config.js 中 - 这将重新加载翻译。但如果您使用 SSR，请注意，因为它会影响生产中的性能！

Answer 3

您只需将道具传递到

<NavBar />

组件即可对其应用翻译。而现在要关注的问题是要传递什么道具，答案很简单。

您已经在页面中导出了

getServerSideProps

函数，它会返回一些内容，而它返回的是

props

组件中的

<Footer>

。将其传递给

<NavBar />

组件。

假设你在这里声明了一个组件：

export const Footer = (props) => {
  const { t } = useTranslation('footer')

  return (
    <footer>
      <p>{t('description')}</p>
      <NavBar navProps={props} />
    </footer>
  )
}

现在我们开始讨论

<NavBar />

组件：

export const NavBar = (props) => {
  const {navProps} = props
  const { t } = useTranslation('footer')
  return (
    <p>{t('123')}</p>
  )
}

确保您拥有正确的

footer.json

文件。