i18n support is not compatible with next export

[caribou-code]

I just spent a couple of days upgrading a SSG website to Next.js 10 to take advantage of the new built-in i18n feature. All works great during local development. When I come to build and then export it, I get the following error:

i18n support is not compatible with next export

I'm a little confused by this. There's nothing about this in the docs for internationalised routing or static HTML export.

The i18n features (like current locale) are available in the context parameter of getStaticProps and getStaticPaths. I can't understand why that would be the case if SSG is not supported by this feature.

Is anyone able to help shed any light on this?

[kachkaev]

See answer in #18318 (comment)

[caribou-code]

The link referenced in that comment says Support the hybrid server-side rendering and static generation use case. Does that not mean static generation would be supported or am I misinterpreting this?

I think I'm also a little confused because i18n support is one of the biggest features of Next.js 10 and Vercel seem to really be pushing SSG as the way forward, so I don't know why a big new feature like this wouldn't support the suggested static export method (and why the static lifecycle methods seem to already support it). Is there any additional information available?

Also, if it really isn't currently supported, is there either a work around or timeline for a new release with SSG support for i18n?

[caribou-code]

@kachkaev in fact, reading the RFC more, it includes SSG examples and I don't see any mention of that functionality not being released, so I can only come to the conclusion that this is either a bug or a very unclear and poorly documented piece of functionality.

[Vadorequest]

@caribou-code You're confused.

The link referenced in that comment says Support the hybrid server-side rendering and static generation use case. Does that not mean static generation would be supported or am I misinterpreting this?

SSR and SSG are supported.
Next export is not.

export doesn't mean SSG. The export mode generates static pages, but next also supports SSG with a non-exported mode, which is what people do when they deploy to Vercel. (like, I do)

If you want to get support for I18n paths, in your situation, you can either:

• Configure i18n paths on whatever serves your content (AWS CloudFront, etc.)
• Not use export, and deploy your next build on Vercel (or another provider)

The later is what I've been doing for more than a year and it works very well.
I also built my own i18n routing feature prior to the official release (around 6 months ago), and I plan on migrating it to the official feature once one particular breaking change is dealt with.

You can find all relevant documentation and examples for what I mentioned above at https://github.com/UnlyEd/next-right-now.

• Demo: https://nrn-v2-mst-aptd-at-lcz-sty-c1.vercel.app/
• NRN General Documentation: https://unlyed.github.io/next-right-now/

[lucasReghiniM]

@caribou-code You're confused.

The link referenced in that comment says Support the hybrid server-side rendering and static generation use case. Does that not mean static generation would be supported or am I misinterpreting this?

SSR and SSG are supported.
Next export is not.

export doesn't mean SSG. The export mode generates static pages, but next also supports SSG with a non-exported mode, which is what people do when they deploy to Vercel. (like, I do)

If you want to get support for I18n paths, in your situation, you can either:

• Configure i18n paths on whatever serves your content (AWS CloudFront, etc.)
• Not use export, and deploy your next build on Vercel (or another provider)

The later is what I've been doing for more than a year and it works very well.
I also built my own i18n routing feature prior to the official release (around 6 months ago), and I plan on migrating it to the official feature once one particular breaking change is dealt with.

You can find all relevant documentation and examples for what I mentioned above at https://github.com/UnlyEd/next-right-now.

• Demo: https://nrn-v2-mst-aptd-at-lcz-sty-c1.vercel.app/
• NRN General Documentation: https://unlyed.github.io/next-right-now/

Hey, what i could do in my case?

• i18n support is not compatible with next export. (SSR - NextJS 10) #20616
• https://stackoverflow.com/questions/65513435/i18n-support-is-not-compatible-with-next-export-ssr-nextjs-10

[Vadorequest]

I'm not sure, I don't use Next export feature.

I think there is something out there that might help you, but I don't remember what/where. Tried to look around quickly but found nothing useful. I suggest asking on the discord! 😄

https://discord.gg/3mEhy8Pbzt

[mukarramali]

Faced the same situation today. A major setback in the release dates. I wish I wasn't given this idea that nextjs gives complete static support. That single note in i18n documentation section should be in the main introduction of the repo. So new users can make judgment before hand.

[robbycarter]

What did you do to resolve your issue. I am facing the same problem

[ssurana2]

It such a big bummer with i18n support and static site generation. Did you find any work around @mukarramali?

[lucasReghiniM]

its insane how a big lib like next just did this...
So basicall, we are not able to use next ssr with i18n

[mukarramali]

@ssurana2 sorry for insanely late reply.
I ended up documenting it in https://medium.com/schmiedeone/i18n-routes-in-static-sites-using-nextjs-b6a547477bb1

[adrai]

@ssurana2 sorry for insanely late reply.

I ended up documenting it in https://medium.com/schmiedeone/i18n-routes-in-static-sites-using-nextjs-b6a547477bb1

interesting... this is my solution: https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd

[Lucsy3012]

Got the same problem earlier this year, made me quit my project for weeks. Should have used Nuxt.js to build the page, honestly. Can't understand why you shouldn't allow to use next export with i18n by design...

[adrai]

fyi: I created 2 examples as a workaround:
a simpler example: https://github.com/adrai/next-i18next-static-example
a bit more example: https://github.com/adrai/next-static-i18n-test
with a new language-detector module: https://github.com/adrai/next-language-detector/tree/main/example

[Rao-Zhi]

This problem also occurs when I deploy on fleek. Have any friends met this problem and solved it

[adrai]

Did you already had a look at this approach? https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd

[caribou-code]

@adrai This is the approach I'm using and It works well. Just seems insane that we have to completely bypass the standard Next.js approach to localisation if we want to use another standard Next.js feature (SSG). Major architectural oversight in my opinion since these are 2 core features of the package.

[L1lith]

I ended up dropping Next.js and switching to Gatsby for this specific reason. I think integrated support would be a lot more reasonable than trying to find hacky workarounds

[poohia]

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>)

[cyntler]

A while ago I created something like this to solve this problem: https://github.com/cyntler/next-locales.
You can try to use it. @poohia @L1lith