Quick I18N set up for NextJS Application
この記事の目次
1. Prepare a NextJS Application
First, ensure you have already set up a NextJS application. If you don’t have one yet, you can quickly create a new NextJS app by running:
npx create-next-app@latest my-nextjs-app cd my-nextjs-app
2. Using next-intl library
For this tutorial, we’ll use the next-intl library. The next-intl library is a powerful tool that simplifies the process of internationalizing your NextJS app. This library also supports multiple languages, with your app code becoming simpler instead of more complex like other libraries
The next-intl library was trusted by the Next.js community and gives you all the parts you need to implement the i18n in the most convenient way.
Add the library using the command:
yarn add next-intl
3. Non-App-Router setup (the simplest way)
From Next.js 13, the App Router along with support for React Server Components was introduced and announced as a stable version. Thus, from this version, we’ll use the /app folder structure instead of the old /pages folder structure.
This library supported both ways of implementation, but the creators recommend using the new Page Router method to prevent the potential vulnerability.
In this article, we’ll use the new method without i18n routing with this overall structure:
├── messages (1) │ ├── en.json │ └── ... ├── next.config.mjs (2) └── src ├── i18n.ts (3) └── app ├── layout.tsx (4) └── page.tsx (5)
4. Language setup
Messages can be provided locally or loaded from a remote data source, the simplest option is to add JSON files in your project based on locales, for example: en.json, jp.json,…
⬇️ NextJS config
We’ll create an alias to provide your i18n configuration inside the next.config.js file
const createNextIntlPlugin = require('next-intl/plugin');
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = withNextIntl(nextConfig);
⬇️ Set up inside the layout.tsx
By using the library’s hooks, we could easily tell our application that we are using the NextIntl provider and set up the language for our body content
import {NextIntlClientProvider} from 'next-intl';
import {getLocale, getMessages} from 'next-intl/server';
export default async function RootLayout({children}: {children: React.ReactNode}) {
const locale = await getLocale();
const messages = await getMessages();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}
5. Using the I18N contents inside Components
Finally, to utilize the translations in your components, we use the useTranslations hook provided by next-intl. Here’s an example component:
import {useTranslations} from 'next-intl';
export default function Index() {
const t = useTranslations('Index');
return <h1>{t('title')}</h1>;
}
6. Optional: Static rendering (for SEO)
Because in the non-app-router approach, the content being translations was not loaded at build time, it would be a huge limit if we want to improve the SEO in the current locale
⭐ For SEO benefits, you may want to statically render your pages. To achieve this, use getStaticProps to fetch the translations:
import { useTranslations } from 'next-intl';
export default function HomePage({ messages }) {
const t = useTranslations();
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('description')}</p>
</div>
);
}
export async function getStaticProps({ locale }) {
const messages = await import(`../messages/${locale}.json`);
return {
props: {
messages: messages.default
}
};
}.
So, we hope this guide will help you quickly set up internationalization in your NextJS application using next-intl. By following these steps, you can easily support multiple languages in your app without complicating your codebase.
関連記事
カテゴリー：
