AWS Amplify doesn't show i18n translation on dynamic page in Nextjs (page directory)

Question

I am trying to use the next-i18next package in a Nextjs project. In my dynamic pages like: /blogs/[id] section, i18n can't translate the page and only shows its key on the server, but it works fine locally.

this is my code for translation in next-i18next:

export async function getServerSideProps(context) { const { locale, params: { id }} = context; return { props: {...(await serverSideTranslations(locale))}}}

On the server it only shows JSON keys and I can't see any translation. (Just for dynamic pages)

I guess this problem is due to the use of amplify and we need to have some configuration for it.

Answer 1

There might be an issue related to resolving the message/local files, as mentioned in the README of next-i18next itself:

Some serverless PaaS may not be able to locate the path of your translations and require additional configuration.

Try adding the absolute path of locales by using path.resolve, e.g:

next-i18next.config.js:

const path = require('path');

module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'cs'],
      localePath: path.resolve('./public/locales')
    },
  };