Search code examples
next.jsroutestranslationi18nextrect

i18nest translation work just on the root of my Next app

when im at the root of my next app: http://localhost:3000/en, with i18next translations, the later work fine. However, when i browze to another url the translations dont work anymore like this link: http://localhost:3000/en/survey

module.exports = {
  i18n: {
    // all the locales supported in the application
    locales: ['fr', 'en', 'ar'],
    // the default locale to be used when visiting
    // a non-localized route (e.g. `/about`)
    defaultLocale: 'fr',
  },
};

when im at the dashboard the transanlations work fine. however. when i brows to a different page they dont apply

Solution

  • Make sure on each page you have getServerSideProps or getStaticProps function on every page, and also the useTranslation imported from next-i18next...

    and compare it with this example: https://github.com/i18next/next-i18next/blob/master/examples/simple/pages/second-page.tsx