How to Set Up Localization in Next.js App Router Using next-intl

Problem You want your application to support multiple languages (internationalization), allowing users to view content in their preferred language. This guide shows how to implement localization in a Next.js App Router project using the next-intl library. Step 1: Install the Library Prerequisites Make sure you have Node.js and npm installed on your system. A Nextjs app with app router initialized. Installation Run the following command in the terminal: npm install next-intl Step 2: Configure Localization Routing Create a folder at the root of your project named i18n, then add a file called routing.ts. This file defines the supported locales and the default language. i18n/routing.ts import {defineRouting} from 'next-intl/routing'; export const routing = defineRouting({ // A list of all locales that are supported locales: ['fr', 'en'], // Used when no locale matches defaultLocale: 'fr' }); Step 3: Create Translation Files At the root of your project, create a folder named messages. Insid