Overview
This article provides a simple guide for those considering implementing multilingual support with Next.js.
If you're planning to implement multilingual support with Next.js or are thinking of upgrading to version 13 or higher in the future, I hope this article will be helpful.
By the way, the version of Next.js used in this article is 14.2.7.
Let's Get Started!
First, to enable multilingual support in Next.js, install the i18next
and next-i18n-router
packages:
yarn add i18next next-i18n-router
Next, create an i18n
folder under the src
directory, and add the following files.
In the config.ts
file below, the default language is set to English (en
).
i18n/config.ts
import i18n, { InitOptions } from "i18next";
import { en } from "./langs/en";
import { ja } from "./langs/ja";
export const initI18n = () => {
i18n.init(i18nextInitOptions, (err) => {
if (err) {
console.error("i18next failed to initialize", err);
}
});
return i18n;
};
export const i18nConfig = {
locales: ["en", "ja"],
defaultLocale: "en",
};
export const i18nextInitOptions: InitOptions = {
lng: "en",
fallbackLng: "en",
resources: {
en,
ja,
},
};
i18n/langs/en.ts
export const en = {
translation: {
hello: "Hello",
},
};
i18n/langs/ja.ts
export const ja = {
translation: {
hello: "こんにちは",
},
};
またsrcフォルダの下にmiddleware.tsファイルも作成します。
src/middleware.ts
import { i18nConfig } from "@/i18n/config";
import { i18nRouter } from "next-i18n-router";
import { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
return i18nRouter(request, i18nConfig);
}
// only applies this middleware to files in the app directory
export const config = {
matcher: "/((?!api|static|.*\\..*|_next).*)",
};
With this, you’re all set to implement multilingual support for English and Japanese.
Let’s Create the UI!
Next, we’ll move on to the UI. The folder structure for the App Router should look like this:
src/app/[lang]/page.tsx
import { initI18n } from "@/i18n/config";
import { t } from "i18next";
const i18n = initI18n();
export default function Page({
params: { lang },
}: {
params: {
lang: string;
};
}) {
i18n.changeLanguage(lang);
const hello = t("hello");
console.log(hello);
return (
<body>
<h1>{hello}</h1>
</body>
);
}
Once the above structure is created, start your Next.js application. However, when navigating to http://localhost:3000
, your browser’s language settings will determine the redirection. If your browser is set to Japanese, you’ll be automatically redirected to http://localhost:3000/ja
. If you want to switch to English, simply navigate to http://localhost:3000/en
.
Below are the screenshots for both the Japanese and English versions of the page.


With this implementation, you’ve successfully achieved multilingual support in a simple way!
There are other packages available for multilingual support, but if you’re looking for a straightforward and easy-to-manage setup, this approach seems to be a better choice.