next-export-i18n v2.3.5: localStorage and an internal link component
Tags: javascript, nextjs, react, i18
Published: 2023-12-12 16:29:08

_**Announcement: [next-export-i18n v2.3.5](https://github.com/martinkr/next-export-i18n/blob/main/README.md) `3.x.x` with support for Next.js' `app` directory is available at [npm](https://www.npmjs.com/package/next-export-i18n/v/3.0.0)!**_

**[Version `3.x.x`](https://www.npmjs.com/package/next-export-i18n/v/3.0.0) exclusively supports Next.js' `app` directory architecture. The [`2.x.x` branch](https://www.npmjs.com/package/next-export-i18n/v/2.3.5) continues to support the `page` directory, please.**

---

[next-export-i18n v2.3.5](https://github.com/martinkr/next-export-i18n/blob/main/README.md): localStorage and an internal link component

_Today, we released [version 2.3.5](https://github.com/martinkr/next-export-i18n/blob/main/README.md) 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:

```JS
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:
```JS
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`](https://www.npmjs.com/package/next-export-i18n) 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](https://nextjs.org/docs/advanced-features/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](https://dev.to/martinkr/next-js-i18n-with-static-sites-2644) for more details.

---

### Sample implementation 

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

---


## Links
- [`next-export-i18n` npm module](https://www.npmjs.com/package/next-export-i18n)
- [next.js: i18n with static sites (Introduction)](https://dev.to/martinkr/next-js-i18n-with-static-sites-2644)
- 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](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

--- 

Photo by [Jerry Zhang](https://unsplash.com/@z734923105?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText") on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

---