DEV Community

Cover image for next-export-i18n v1.2.1: i18n with Next.js and Mustache
Martin Krause
Martin Krause

Posted on • Edited on

2

next-export-i18n v1.2.1: i18n with Next.js and Mustache

Today I released version 1.2.1 of next-export-i18n, the i18n module for Next.js which is fully compatible with next export.


Install next-export-i18n with $ npm i next-export-i18n or visit next-export-i18n v1.2.1 from npm.js.


New feature: Dynamic translations + Mustache

Starting with Version 1.2.1, you can now define mustache templates in your translation.json and populate your translated string with dynamic content on the fly.

translation.json

{
    "myTemplate": "{{count}} times",
}
Enter fullscreen mode Exit fullscreen mode

Module.js

    import { useTranslation} from 'next-export-i18n'
    const { t } = useTranslation();
    const key = 'myTemplate';
    let string = t(key, { count: 2 })) // string will be "2 times"
Enter fullscreen mode Exit fullscreen mode

About next-export-i18n

This npm module provides a simple solution for 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 locales, a default as well as 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 supports next export.
This means that none of the i18n-libraries (which are utilizing the build in i18n-routing) is able to support fully static sites which are generated with next export.

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

Read the Introduction to next-export-i18n 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


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


Photo by Jerry Zhang on Unsplash


Subscribe to the weekly modern frontend development newsletter


AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay