Development

How to Add next-intl Internationalization to Next.js 15: Step-by-Step Guide

Step-by-step tutorial on integrating next-intl for internationalization in a Next.js 15 project.

By Mohamed DjoudirJune 07, 20257 min read
Share:
How to Add next-intl Internationalization to Next.js 15: Step-by-Step Guide
#Next.js#next-intl#i18n#Internationalization#React

Internationalization (i18n) is essential for modern web apps. With Next.js 15, the recommended way to add i18n is using next-intl. In this guide, you'll learn how to set up next-intl in a Next.js 15 project with a working, real-world approach.

🚀 Looking for a Next.js Template with next-intl Already Integrated?

Next.js Financial Dashboard Template

If you want to skip the setup and start with a production-ready template that already includes next-intl internationalization, check out our Next.js Financial Dashboard Template.

🎯 This premium template comes with:

  • next-intl already configured and ready to use
  • ✅ Dark/Light theme switching
  • ✅ Redux Toolkit state management
  • ✅ Modern financial dashboard UI
  • ✅ Email authentication
  • ✅ Responsive design
  • ✅ TypeScript support

Perfect for fintech applications, banking dashboards, and financial management systems.

View Demo | Get Template


1. Install next-intl

First, install the package:

Loading code block...

2. Configure Routing

Create a routing config to define your supported locales. In Aniq-UI, this is done in src/i18n/routing.ts:

Loading code block...

3. Add Navigation Helpers

Set up navigation helpers in src/i18n/navigation.ts:

Loading code block...

4. Load Messages on the Server

Configure message loading in src/i18n/request.ts:

Loading code block...

5. Provide Messages to Your App

Wrap your pages with NextIntlClientProvider. For example, in src/app/[locale]/about/layout.tsx:

Loading code block...

6. Organize Your Message Files

Store your translation files in src/messages/, e.g.:

Loading code block...

Each file contains translations for a namespace, e.g.:

Loading code block...

7. Use Translations in Components

Use the useTranslations hook from next-intl:

Loading code block...

8. Add a Language Switcher

Here is the full code for the src/components/LanguageSelector/index.tsx component used in Aniq-UI:

Loading code block...

9. Test Your Setup

Start your dev server and visit /en/about, /fr/about, etc. You should see the correct translations and be able to switch languages.

Conclusion

With next-intl, adding internationalization to Next.js 15 is straightforward and powerful. For a full working example, explore the Aniq-UI repository.


References:

Found this article helpful?

Share:
world map

Global User Community

Join thousands of developers worldwide who trust Aniq-UI for their projects. Our templates are being used across the globe to create stunning web experiences.

Contact Us

Need custom work or reskin? Get in touch with us

Aniq-uiAniq-uiAniq-ui