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