Install Next-intl App route in Next JS
Devvv2 min read
Step install and setting
Install Next-intl
Create file and setting “App Router setup without i18n routing”
Install Next-intl
Go to website : https://next-intl.dev/
Install with npm in project npm install next-intl
Create file and setting “App Router setup without i18n routing”
Create the following file structure:
├── messages
│ ├── en.json
│ └── ...
├── next.config.ts
└── src
├── i18n
│ └── request.ts
└── app
├── layout.tsx
└── page.tsx
Create folder “message” in root path and create file en.json in folder “message“
{
"HomePage": {
"title": "Hello world!"
}
}
Edit file next.config.ts
import {NextConfig} from 'next';
import createNextIntlPlugin from 'next-intl/plugin';
const nextConfig: NextConfig = {};
const withNextIntl = createNextIntlPlugin();
export default withNextIntl(nextConfig);
Create folder “i18n“ in folder “src“ and create file request.ts in folder “i18n”
import {getRequestConfig} from 'next-intl/server';
export default getRequestConfig(async () => {
const locale = 'en';
return {
locale,
messages: (await import(`../../messages/${locale}.json`)).default
};
});
Open file “layout.tsx” and as detailed below
import {NextIntlClientProvider} from 'next-intl';
import {getLocale} from 'next-intl/server';
export default async function RootLayout({
children
}: {
children: React.ReactNode;
}) {
const locale = await getLocale();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider>{children}</NextIntlClientProvider>
</body>
</html>
);
}
Use none async
"use client"
import {useTranslations} from 'next-intl';
export default function HomePage() {
const t = useTranslations('HomePage');
return <h1>{t('title')}</h1>;
}
Use with async
import {getTranslations} from 'next-intl/server';
export default async function HomePage() {
const t = await getTranslations('HomePage');
return <h1>{t('title')}</h1>;
}
View more document : https://next-intl.dev/docs/getting-started
0
Subscribe to my newsletter
Read articles from Devvv directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by