next-i18next How Can I Use in Components?

Question

I have completed all the steps on the documentation.

Why is the code below not working? For NextJs, SSR cannot be performed on any page except for each pages folder. For example, how do I use the translate for the NavBar? I Couldn't find any solutions. When I useTranslation nothing happen, but when i do first serverSide then useTranslation its work.

"i18next": "^22.4.5", "next": "13.0.6", "next-i18next": "^13.0.1", "react": "18.2.0",

THIS IS WORKS

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',
      ])),
    },
  }
}

THIS IS NOT WORKS

import { useTranslation } from 'next-i18next'

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

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

How can I do this work, without ssg,ssr

I search but ı couldn't any asnwer.

m4china · Answer 1 · 2022-12-15T20:41:35.343

0

You have to pass the props to the page with SSG or SSR because the static files are only on the server (inside the public folder) and not in the src folder where the dynamic files are located. This means you have to use server-side rendering to add the translations to the page.

EDIT:

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

edited Dec 15 '22 at 20:41

answered Dec 15 '22 at 20:04

m4china

230
3
9

I can't do SSR in Navbar ? I have a nextjs project. Navbar in layout component how can i put this to pages folder ? – next951595 Dec 15 '22 at 20:23
Yes you use the `serverSideTranslations` functions something like this `...(await serverSideTranslations(locale, ['common'])),` – m4china Dec 15 '22 at 20:39
1

I think you don't understand the issue, You can't serverSide components folder you can only Pages folder. – next951595 Dec 15 '22 at 22:08
If you add this to the page's getServerSideProps function, then you don't need to add it to the component folder. It should work. – jmecs Jun 12 '23 at 02:40

damycode · Answer 2 · 2023-03-24T10:27:11.190

0

I just had the same issue - if you change the locales, set up new translation namespaces, files, change config etc. try removing your .next directory and restart the dev server.

This sorted the issue for me.

You can also set:

reloadOnPrerender: true

in your next-18next.config.js - this will reload translations. But be mindful if you are using SSR as it can affect performance in production!

edited Mar 24 '23 at 10:27

answered Mar 14 '23 at 15:46

damycode

23
1
8

score 0 · Answer 3 · answered Aug 30 '23 at 06:00

You can just pass the props into the <NavBar /> component to apply translation to it. And now the question to be focused on is that what props to pass, the answer is simple.

You've exported your getServerSideProps function in your page, it returns something, and what it returns is the props in your <Footer> component. Pass it down to <NavBar /> component.

Suppose that you've declared a component here:

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

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

And now we get down to <NavBar /> component:

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

Make sure you have the correct footer.json file.

next-i18next How Can I Use in Components?

3 Answers3