i18n support is not compatible with next export. (SSR - NextJS 10)

Question

i18n support is not compatible with next export.

NextJS dont run the deploy with i18n

Im using nextJS 10, and the main reason that i choose next 10, is that i can do SSR and use the i18n. Internationalized Routing its a new next js 10 feature and have a page only to tha feature.

But when im gonna do a deploy, this error appears: i18n support is not compatible with next export. Theres nothing about this in internationalized routing page.

My code

next.config.js

const withImages = require('next-images')
const path = require('path')

module.exports = withImages({
    esModule: false,
    i18n: {
        locales: ['en-US', 'pt-BR', 'pt-PT', 'es-ES'],
        defaultLocale: 'pt-BR',
      },
});

I created a translate archive that make the condition with next router obs: PT and EN are JSON files with text

import * as pt from "./pt";
import * as en from './en';
import { useRouter } from "next/router"

export const traducao = () =>{
  let routes = useRouter();

  let translate;
 
    if (routes.locale == 'pt-PT' || routes.locale == 'pt-BR') {
      translate = pt.default;
    } else {
      translate = en.default;
    }
  
  return translate 
}

And the i just use in my project like a function:

{traducao().homeText.button_text}

Work well, recognizes the browser language and switch. Im using deploy script

npm run deploy
"deploy": "npm run clean && npm run build && next export -o dist/"

Steps to reproduce

1. Go to 'next.config,js'
2. create the i18n export
3. create a Translate file that recognizes the browser language
4. import JSONs files with your site text
5. Use where you want
6. Try to deploy

Expected behavior

Its just suppose to work fine and Deploy normal.

Screenshots

System information

• OS: Linux Ubuntu
• IDE: VSCode
• Version of Next.js: 10
• Version of Node.js: v15.3.0
• Deployment: next deploy

Answer 1

Digging through issues on vercel's github I found this alternative that doesn't use next-i18next or any other nextjs magic:

https://github.com/Xairoo/nextjs-i18n-static-page-starter

It's just basic i18n using i18next that bundles all locale together with JS, so there are obvious tradeoffs but at least it works with SSG. You can build upon that to come up with something more elaborate. That's what I will do.

Answer 2

There's an alternative, by not using the i18n feature of next.js completely and creating the i18n language detection yourself. An example that uses the next-language-detector module is described in this blog post and may look like this:

// languageDetector.js
import languageDetector from 'next-language-detector'
import i18nextConfig from '../next-i18next.config'

export default languageDetector({
  supportedLngs: i18nextConfig.i18n.locales,
  fallbackLng: i18nextConfig.i18n.defaultLocale
})

---

// redirect.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import languageDetector from './languageDetector'

export const useRedirect = (to) => {
  const router = useRouter()
  to = to || router.asPath

  // language detection
  useEffect(() => {
    const detectedLng = languageDetector.detect()
    if (to.startsWith('/' + detectedLng) && router.route === '/404') { // prevent endless loop
      router.replace('/' + detectedLng + router.route)
      return
    }

    languageDetector.cache(detectedLng)
    router.replace('/' + detectedLng + to)
  })

  return <></>
};

export const Redirect = () => {
  useRedirect()
  return <></>
}

// eslint-disable-next-line react/display-name
export const getRedirect = (to) => () => {
  useRedirect(to)
  return <></>
}

The complete guide and the example code can be found here:

• guide
• example

Answer 3

You can't use export with next.js i18n implementation.

Note that Internationalized Routing does not integrate with next export as next export does not leverage the Next.js routing layer. Hybrid Next.js applications that do not use next export are fully supported.

Next.js docs

Answer 4

Hello I show you my soluce with only i18n-js

// i18n.ts
import i18n from "i18n-js";

import en from "./en.json";
import fr from "./fr.json";

const localeEnable = ["fr", "en"];

const formatLocale = () => {
  const { language } = window.navigator;
  if (language.includes("en")) return "en";
  if (language.includes("fr")) return "fr";
  if (!localeEnable.includes(language)) return "en";

  return "en";
};
// Set the key-value pairs for the different languages you want to support.
i18n.translations = {
  en,
  fr,
};
// Set the locale once at the beginning of your app.
i18n.locale = "en";

const useTranslate = () => {
  return (t: string) => {
    if (typeof window !== "undefined") {
      i18n.locale = formatLocale();
    }
    return i18n.t(t);
  };
};

export default useTranslate;

// home.tsx
import useTranslate from "../locales/i18n";

const t = useTranslate();

return (<p>{t("idstring")}</p>)