next-export-i18n v2.3.5: localStorage and an internal link component

Announcement: next-export-i18n v2.3.5 3.x.x with support for Next.js' app directory is available at npm!

Version 3.x.x exclusively supports Next.js' app directory architecture. The 2.x.x branch continues to support the page directory, please.

next-export-i18n v2.3.5: localStorage and an internal link component

Today, we released version 2.3.5 of next-export-i18n, the most popular i18n module for Next.js, which is fully compatible with next export.

The new version has two main additions: local storage support and a new internal link component.

The default method to store the selected language is the search parameter, next-export-i18n, which adds the language to the URL as ?lang=. With Version 2.3.5, you can set the configuration option languageDataStore to either query or localStorage. The latter changes the behaviour, instead using the browser's local storage to keep your URLs cleaner.

When using next-export-i18n with the default query store, it is vital to remember that all internal links require the language parameter. Otherwise, the exported application falls back to the default language. We've added a custom component to simplify that.

Using the new <LinkWithLocale> component, you no longer need to add the query manually. Previously, your code would have looked similar to this listing:

import {useLanguageQuery} from 'next-export-i18n';

export default function Page({ }) {
  const [query] = useLanguageQuery();
  return (
    <Link href={{ pathname: "path", query: query }}>
      Link to path
    </Link>
  );
}

You can use the failsafe, streamlined new component:

import {LinkWithLocale} from 'next-export-i18n';

export default function Page({ }) {
  return (
    < LinkWithLocale href="path">
      Link to path
    </Link>
  );
}

Install next-export-i18n with $ npm i next-export-i18n or get next-export-i18n v2.3.5 from npm.js.

About next-export-i18n

This npm module provides a simple solution for the Internationalization (i18n) of projects using next export.

Next.js already has support for internationalized (i18n) routing out-of-the-box. You can provide a list of default and domain-specific locales, and Next.js automatically handles the routing. It streamlines the touring and locale parsing for nearly all existing l18n library solutions available for Next.js, such as react-intl, react-i18next, lingui, rosetta, next-intl.

Unfortunately, Next.js i18n-routing does not support next export.
This means that none of the i18n-libraries (utilising the built-in i18n-routing) can support fully static sites generated with next export.

next-export-i18n provides a simple solution for Internationalization (i18n) when you want to generate a genuinely static website with next export.

Read the Introduction to next-export-i18n - next.js: i18n with static sites for more details.

Sample implementation

You can also take a look at the example implementation next-export-i18n-example.vercel.app and its source code at github: https://github.com/martinkr/next-export-i18n-example.

Links

• next-export-i18n npm module
• next.js: i18n with static sites (Introduction)
• Example implementation: https://next-export-i18n-example.vercel.app
• GitHub for the npm module: https://github.com/martinkr/next-export-i18n
• GitHub for the example: https://github.com/martinkr/next-export-i18n-example

Follow me on Twitter: @martinkr and consider to buy me a coffee

Photo by Jerry Zhang on Unsplash