How to Internationalise your Next.js app

Next.js offers robust support for internationalisation through its built-in i18n routing. This feature is designed to work well with i18n libraries, among which next-intl stands out as it covers a range of functionalities, including interpolation, pluralisation, and handling arrays. It is fully compatible with the Pages Router of Next.js (up to version 12) and the App Router introduced in version 13, which includes support for React server components. Setting Up next-intl To integrate next-intl into a Next.js project: Install the library using npm or yarn. Organise your project structure by creating a [locale] dynamic segment within the /app directory. Store localised messages in JSON files, structured to reflect the content hierarchy, making it easier to manage translations. Managing Localised Content with Hygraph Hygraph serves as a headless CMS that supports content localisation. By integrating Hygraph with your Next.js application, you can manage and retrieve localised content efficiently, utilise Graphql queries to fetch content based on the user's locale. You can also extend Hygraph with a Translation Management System to streamline the translation workflow. We are not including the code part in the blog; If you are interested, you can check the Hygraph guide for this here.

Apr 21, 2025 - 14:30

How to Internationalise your Next.js app

Next.js offers robust support for internationalisation through its built-in i18n routing. This feature is designed to work well with i18n libraries, among which next-intl stands out as it covers a range of functionalities, including interpolation, pluralisation, and handling arrays.

It is fully compatible with the Pages Router of Next.js (up to version 12) and the App Router introduced in version 13, which includes support for React server components.

Setting Up next-intl

To integrate next-intl into a Next.js project:

Install the library using npm or yarn.
Organise your project structure by creating a [locale] dynamic segment within the /app directory.
Store localised messages in JSON files, structured to reflect the content hierarchy, making it easier to manage translations.

Managing Localised Content with Hygraph

Hygraph serves as a headless CMS that supports content localisation. By integrating Hygraph with your Next.js application, you can manage and retrieve localised content efficiently, utilise Graphql queries to fetch content based on the user's locale. You can also extend Hygraph with a Translation Management System to streamline the translation workflow.

We are not including the code part in the blog; If you are interested, you can check the Hygraph guide for this here.