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
Top comments (0)
Some comments have been hidden by the post's author - find out more