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 na