Hi everyone I have a NextJS app ( main host ) inside a NX Project.
I have the need to translate the pages inside the app, and i'm using next-i18next
package installed.
I have several dynamic pages like:
pages
|- projects
| |- index.js
| |- [id]
| | | - index.js
|
| index.js
| _app.js
And locally everything works just fine, but when I deploy to Vercel the translations inside the dynamic pages don't work. I really don't understand why it's happening, one solution I've found was to transform all dynamic rendered pages into static ones, but this is not possible since new ids are generated during the usage of the application.
Packages I'm using:
"i18next": "^22.0.6",
"next": "13.0.0",
"next-i18next": "^13.0.0",
Code inside dynamic route:
export async function getServerSideProps({ locale }) {
return {
props: {
...(await ssrTranslations(locale, [
'projects',
'shared',
'newgateway-file',
'gatewaysummary',
])),
},
};
}
Next-i18next.config.js
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'it', 'de', 'es', 'fr', 'ja'],
},
defaultNs: 'shared',
fallbackLng: { default: ['en'] },
localePath: 'apps/host/public/locales'
};
Next.config.js
const { withNx } = require('@nrwl/next/plugins/with-nx');
const { i18n } = require('./next-i18next.config');
/**
* @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
*
**/
const nextConfig = {
nx: {
// Set this to true if you would like to to use SVGR
// See: https://github.com/gregberge/svgr
svgr: false,
},
reactStrictMode: true,
swcMinify: true,
i18n,
};
module.exports = withNx(nextConfig);