Mastering Translation with i18n on a Next.js Project: Page router
by Wassim MESFIOUI
Translation capabilities are essential for any globalized web application. Today, we will explore how to enable translation with i18n on a Next.js project. This guide will provide all the elements you need to avoid getting stuck. Specifically, we will translate a title into French and English.
Installation
First, let's start with the installation. You can find the relevant package, next-i18next, which simplifies integrating i18n with Next.js.
Install the Package
Run the following command to install next-i18next:
npm i next-i18next
Common Setup
After installation, you need to create configuration files in your public folder to define translations (fr, en, de, es...).
Creating Translation Files
In your public folder, create two JSON files: common.json for both French and English translations.
common.json (French):
{
"title": "Mon titre"
}
common.json (English):
{
"title": "My title"
}
Configuring next-i18next
Next, set up the languages to be used in your project by creating next-i18next.config.js in your root directory.
next-i18next.config.js
Add the following content to next-i18next.config.js:
/** @type {import('next-i18next').UserConfig} */
module.exports = {
i18n: {
defaultLocale: "en",
locales: ["en", "fr"],
},
ns: ["common"],
defaultNS: "common",
};
Updating Next.js Configuration
Incorporate the i18n setup into your Next.js configuration by updating next.config.js.
next.config.js
Add the following to your next.config.js:
const { i18n } = require('./next-i18next.config');
module.exports = {
i18n,
};
Updating _app.js
To enable translation capabilities throughout your application, embed your app with appWithTranslation.
_app.js
Update your _app.js file as follows:
import "./globals.css";
import { appWithTranslation } from "next-i18next";
const App = ({ Component, pageProps }) => {
return <Component {...pageProps} />;
};
export default appWithTranslation(App);
Adding Static Props
Next, update your page router to include static props necessary for translations.
Page Router Update
Add the following to your page router:
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
export const getStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale, ["common"])),
},
};
};
Important Note
After setting up, restart your application to ensure the content is displayed in multiple languages.
Using Translation in Components
Finally, to fetch and display the translated content, use the useTranslation hook in your components.
Implementing useTranslation
In one of your components, set the useTranslation variable:
import { useTranslation } from "next-i18next";
const { t } = useTranslation("common");
<h1>{t("title")}</h1>
FAQs
How do I install the necessary package for i18n in a Next.js project? You can install next-i18next using the command: npm i next-i18next.
Where should I create the translation files? Create translation files in the public folder of your project. For example, common.json for each language you want to support.
What should I include in the next-i18next.config.js file? Include your language settings, namespaces, and default namespaces. This file is crucial for configuring i18n.
How do I update the Next.js configuration to support i18n? Update your next.config.js to include the i18n settings from next-i18next.config.js.
Why do I need to update the _app.js file? Updating _app.js with appWithTranslation ensures that translation capabilities are available throughout your application.
What is the role of getStaticProps in i18n? getStaticProps fetches the necessary translations for each locale, ensuring that your pages are pre-rendered with the correct language content.
By following these guidelines, you can efficiently enable and manage translations in your Next.js project using i18n.