Adding Languages with Next-Intl Guide

v20260410

next-intl-add-language

This guide details the process of implementing internationalization (i18n) in a Next.js application using the next-intl library. It provides step-by-step instructions on adding new languages, covering translation updates, configuring routing, modifying middleware, and updating UI components to ensure complete multi-language support.

Next.js Internationalization Next-Intl JavaScript Web Development i18n

Get Skill

468 downloads

Overview

This is a guide to add a new language to a Next.js project using next-intl for internationalization,

For i18n, the application uses next-intl.
All translations are in the directory ./messages.
The UI component is src/components/language-toggle.tsx.
Routing and middleware configuration are handled in:
- src/i18n/routing.ts
- src/middleware.ts

When adding a new language:

Translate all the content of en.json to the new language. The goal is to have all the JSON entries in the new language for a complete translation.
Add the path in routing.ts and middleware.ts.
Add the language to language-toggle.tsx.

Info

Category Development

Name next-intl-add-language

Version v20260410

Size 750B

Source github/awesome-copilot

Updated At 2026-04-12