Support for internationalization (i18n) does not work with next export in NextJS 10, as it is not compatible with

Question

Support for internationalization (i18n) does not work with next export in NextJS 10, as it is not compatible with

NextJS Export Not Compatible with i18n Support

i18n Feature Cannot Be Used for Deployment in NextJS

Running NextJS 10 has been a great choice for me as it allows for Server-Side Rendering (SSR) and utilization of the i18n feature. Internationalized Routing is a new feature in NextJS 10 that has its own dedicated page.

However, when attempting to deploy, I encountered this error: i18n support is not compatible with next export. This issue is not addressed on the Internationalized Routing page.

Code Implementation

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 have created translation files that work based on conditions from the next router. Note: PT and EN are JSON files containing text content.

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 
}

Using this function in my project:

{traducao().homeText.button_text}

It works well, detecting browser language and switching accordingly. I am using the following deployment script:

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

Reproduction Steps

Navigate to 'next.config.js'
Create the i18n export
Generate a Translate file that can detect browser language
Import JSON files containing your site's text content
Implement translations where needed
Attempt deployment

Expected Outcome

The deployment should proceed smoothly without any issues.

Screenshots

System Details

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

javascript deployment internationalization next.js i18next

Answer 1

Answer №1

In my quest to find solutions on vercel's github, I stumbled upon an interesting alternative that eliminates the need for next-i18next or any other nextjs magic:

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

This solution simply involves basic i18n implementation using i18next, which bundles all locale data together with JS. While there are some tradeoffs involved, it does work well with SSG. There is room for further customization and enhancements based on this foundation. That's the approach I plan to take moving forward.

Answer 2

In my quest to find solutions on vercel's github, I stumbled upon an interesting alternative that eliminates the need for next-i18next or any other nextjs magic:

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

This solution simply involves basic i18n implementation using i18next, which bundles all locale data together with JS. While there are some tradeoffs involved, it does work well with SSG. There is room for further customization and enhancements based on this foundation. That's the approach I plan to take moving forward.

Answer 3

Answer №2

If you want to bypass the i18n feature of next.js and handle language detection on your own, there is an alternative approach. You can create a custom language detector using the next-language-detector module as outlined in this blog post. Here's an example:

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

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

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

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

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

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

  return <></>
};

export const CustomRedirectHandler = () => {
  useCustomRedirect()
  return <></>
}

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

For a detailed guide and more code examples, refer to these resources:

Official Guide
Code Examples

Answer 4

If you want to bypass the i18n feature of next.js and handle language detection on your own, there is an alternative approach. You can create a custom language detector using the next-language-detector module as outlined in this blog post. Here's an example:

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

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

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

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

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

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

  return <></>
};

export const CustomRedirectHandler = () => {
  useCustomRedirect()
  return <></>
}

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

For a detailed guide and more code examples, refer to these resources:

Official Guide
Code Examples

Answer 5

Answer №3

Next.js i18n implementation does not support the use of export.

It's important to note that Internationalized Routing is not compatible with next export because next export does not make use of the Next.js routing layer. However, Hybrid Next.js applications that do not utilize next export are fully compatible.

Visit Next.js documentation

Answer 6

Next.js i18n implementation does not support the use of export.

It's important to note that Internationalized Routing is not compatible with next export because next export does not make use of the Next.js routing layer. However, Hybrid Next.js applications that do not utilize next export are fully compatible.

Visit Next.js documentation

Answer 7

Answer №4

Greetings! Below is my solution using 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";
};
// Define key-value pairs for supported languages.
i18n.translations = {
  en,
  fr,
};
// Set the initial locale for the 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>)

Answer 8

Greetings! Below is my solution using 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";
};
// Define key-value pairs for supported languages.
i18n.translations = {
  en,
  fr,
};
// Set the initial locale for the 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>)

Support for internationalization (i18n) does not work with next export in NextJS 10, as it is not compatible with

NextJS Export Not Compatible with i18n Support

i18n Feature Cannot Be Used for Deployment in NextJS

Code Implementation

Reproduction Steps

Expected Outcome

Screenshots

System Details

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Comparing the Surprising Performance Discrepancy Between Safari's Private and Regular

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

The changes made by this.students.splice(index, 1) are not reflecting in the Angular UI

The argument for the e2e test is invalid because it must be a string value

Timing of Bindings in AngularJS

Refresh the webpage after a mobile device is awakened from sleep mode

Error message stating that there is an issue with the `this.extButton` variable being null when attempting to manually adjust the toolbar settings for

Using Material-UI version 1, pass the outer index to the MenuItem component when clicked

acquire information using ajax in conjunction with jquery

In production, NextJS struggles to acknowledge dynamically added static assets

The module cannot be located: Unable to find '../typings' in '/vercel/path0/pages'

Storing, Transmitting, and Fetching information using AngularJS

Javascript lags behind in utilizing Regex compared to PHP

Linking functions as needed

How can we efficiently retrieve data for both page content and title with a single call using generateMetadata in Next.js (App Router)?

Using JSON parsing to dynamically create classes with preloaded background images

Issue with THREEJS: Unable to load jpg file as material map when assigning it to an object

Manually browse through images in photoswipe by clicking on them to move to the previous or next ones

Finding parent elements using parentElementArrayFinder

Insert to the beginning of an array using VueJs