I need to generate a simple static website build for all the languagues defined in translations.json and I've decided to use Next.js with Page router. Let's say I have:
en: {
title: 'Hello World',
description: 'This is a description',
},
fr: {
title: 'Bonjour le monde',
description: 'Ceci est une description',
},
since it has to be a static build I've set this in next.config.ts:
const nextConfig: NextConfig = {
output: 'export',
but the problem is that I can't use i18n in the config:
Note that Internationalized Routing does not integrate with output: 'export' as it does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use output: 'export' are fully supported.
So far I was able to come only with this simple solution using ENV variables:
_document.tsx:
export default function Document() {
return (
<Html lang={process.env.LOCALE}>
...
index.tsx:
export const getStaticProps: GetStaticProps = async () => {
const finalLocale = process.env.LOCALE || 'en';
const translations = getTranslations(finalLocale);
return {
props: {
translations: localization[finalLocale],
},
};
}
export default function Home(props: InferGetStaticPropsType<typeof getStaticProps>) {
const { translations } = props;
return (
<>
<Head>
<title>{translations.title}</title>
...
package.json:
"build:en": "cross-env LOCALE=en next build"
"build:fr": "cross-env LOCALE=fr next build"
But this is generating every build to the same out folder. I could make some script to run all the builds and after each build copy the content of out folder t another directory.
But isn't there a better way to achieve this simple static build localization? I was hoping at least this would be possible:
"build:fr": "cross-env LOCALE=fr next build --outdir=out/fr"
but there is no such parameter.
What is the proper approach in this scenario?