Next.js + i18n with Locanext

The nts package works with the Locanext web app to help you manage translations in your Next.js projects.

Key Features

- 🚀 Quick setup — create a Next.js project with internationalization ready to use.
- 🌐 Simple JSON editing — edit translation files in the web app.
- ⚡ Fast updates — download new translations with one command.
- ✍ Variables — typed variables to avoid errors.

---

Quick Start: New Project

1. Go to locanext.com and create a new project.
2. Add languages to the project (Your Project → Menu → Languages).
3. Create a Next.js project with translation support:
``

bash

   npx @locanext/nts create



   This uses the official

create-next-app@latest

, so your project follows Next.js best practices.  

   After running the command, you get a ready-to-use multilingual Next.js app.



---



Quick Start: Existing Project



1. Go to locanext.com and create a project. If you already have JSON files, you can create a project from them.

2. Install the nts package:

bash

   npm i @locanext/nts



3. Link your local project and create the config:

bash

   npx nts init



4. Download the latest translations:

bash

   npx nts update



By default, the CLI adds translations to the

/locales

 folder.



---



Update Translation Files



To get the newest translation JSON files from your project, run:

bash

npx nts update





---



Variables



1. On the website, use the

{{variable}} pattern. For example: Hi, {{name}}

.

2. In your Next.js project, use the

 function:

ts

   import { t } from "@locanext/nts";

   const greeting = t(dictionary.greeting, { name: "John" }); // typed variables



Typings are refreshed every time you run

npx nts update`.

---

How It Works

The system has two parts that work together:

- 🖥 Web app: locanext.com — manage your translation files with an easy interface for editing JSON, working as a team, and organizing content. You can add, remove, move, and change translations and keys with a few clicks.
- 🧰 nts tool — helps developers download the latest translation files and use them in a Next.js project.

---

For more details, visit locanext.com/docs