next-export-i18n v1.2.1: i18n with Next.js and Mustache
Tags: webdev, nextjs, react, javascript
Published: 2021-11-25 15:58:23

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](https://www.npmjs.com/package/next-export-i18n) from npm.js.

---

## New feature: Dynamic translations + Mustache

Starting with Version 1.2.1, you can now define [mustache](https://mustache.github.io/) templates in your `translation.json` and populate your translated string with dynamic content on the fly.

### translation.json
```json
{
	"myTemplate": "{{count}} times",
}
```

### Module.js
```javascript
	import { useTranslation} from 'next-export-i18n'
	const { t } = useTranslation();
	const key = 'myTemplate';
	let string = t(key, { count: 2 })) // string will be "2 times"
```

---

## 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](https://nextjs.org/docs/advanced-features/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`](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](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)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---