Where to introduce the next component in the configuration item, and where to import the translation file 'Next-i18next' referenced by the component

[unfetteredman2020]

How to handle the translation files in Next-i18next when importing custom components into Navvar and Sidebar in page router?

[arno-fukuda]

One workaround is to handle it on the fly within the component:

import { useRouter } from "next/router"

const SignUpButton = () => {
  const router = useRouter()
  return (
    <a
      href="https://www.example.com/signup"
    >
      {router.locale === "ja-JP" ? "登録" : "SIGN UP"}
    </a>
  )
}

export default SignUpButton

[unfetteredman2020]

Thank you very much for your reply and providing examples. However, what I want to say is that the project has already used Next-i18next as an internationalization plugin. For example, I have a navbar component that uses the translation capabilities provided by Next-i18next. However, I want to use the same component in Nextra, but obviously it is not possible now because the next page router needs to import translation files in getServerSideProps, which cannot be used in mdx in Nextra

for example

import { useTranslation } from 'next-i18next';

function Navbar () {
 const { t } = useTranslation('home');

return <div>{t('hello')}</div>

}
 

export default Navbar

in theme.config.jsx

import Navbar from 'Navbar'

export default  {
    navbar : { 
          extraContent: <Navbar />
}

But it cannot be used in this way now because the translation file cannot be loaded. What I want to ask is how to add the translation file