Solving Next.js i18n Support Incompatibility with “next export”

Understanding the Error

When working with internationalization (i18n) in Next.js and trying to statically export your site using next export, you may encounter the error message ‘i18n support is not compatible with next export‘. This issue arises because Next.js’s i18n routing requires a Next.js server or serverless function to handle the locale detection and routing at runtime, which isn’t available when exporting the project as static HTML.

Migrating to SSG or SSR

The primary way to resolve this error is to migrate from using next export for static HTML generation to using either Static Site Generation (SSG) with getStaticProps or Server-Side Rendering (SSR) with getServerSideProps. Both approaches are compatible with Next.js’s i18n capabilities and do not require you to serve static HTML files, thus avoiding the error entirely.

Using Rewrites as an Alternative

Another approach to avoid the error is to configure rewrites in your next.config.js to emulate the behavior of i18n routing. This method involves generating the pages for each locale and then adding rewrite rules to serve the correct page based on the requested language. Keep in mind that this approach is a manual workaround and may not be suitable for complex applications with extensive i18n needs.

To apply this method, first, generate individual directories for your locales with duplicated HTML files, and then add the rewrites configuration in your next.config.js:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:lang(en|es|fr)/:path*',
        destination: '/:path*',
        locale: false
      }
    ];
  },
};

This rewrite rule will match any path with a locale prefix (like /en/about) and serve the corresponding non-prefixed page (like /about), assuming you have already generated the pages for each locale manually.

Implementing SSG with i18n in Next.js

If you choose to go with SSG and use Next.js 11 or newer version, you can ensure i18n support by using the getStaticPaths function together with getStaticProps. Here’s a simple example of a page that is statically generated for multiple locales:

import { useRouter } from 'next/router';

export const getStaticPaths = () => {
  const paths = [
    { params: { slug: 'example-page' }, locale: 'en' },
    { params: { slug: 'example-page' }, locale: 'es' },
    // Add more locales and pages as needed
  ];

  return { paths, fallback: false };
};

export const getStaticProps = ({ params, locale }) => {
  // Fetch data related to the locale and slug
  const data = fetchDataBasedOnLocale(params.slug, locale);

  return {
    props: {
      data,
    },
  };
};

const Page = ({ data }) => {
  const router = useRouter();

  return <div>
    <h1>Localized Page for {router.locale}</h1>
    <p>{data.content}</p>
  </div>;
};

export default Page;

In this code snippet, getStaticPaths defines the available paths for SSG taking into account the supported locales. It enables the generation of locale-specific versions for your page. The getStaticProps fetches the necessary data based on the provided locale, ensuring that each generated page has the correct localized content.

After replacing the usage of next export with either SSG or SSR methods and adjusting the configuration and code accordingly, you should no longer see the error related to i18n support incompatibility.