I am using NextJS 14. When I installed everything for multi language from next-intl and I check from offical website but system is giving couple hydration errors!
- created i18n.ts
- updated next.config.mjs
- created middleware.ts
- created [locale] folder and created layout.tsx and page.tsx inside the [locale] folder
all codes are below:
i18n.ts
import {notFound} from 'next/navigation';
import {getRequestConfig} from 'next-intl/server';
// Can be imported from a shared config
const locales = ['en', 'nl', 'de', 'tr'];
export default getRequestConfig(async ({locale}) => {
// Validate that the incoming `locale` parameter is valid
if (!locales.includes(locale as any)) notFound();
return {
messages: (await import(`./languages/${locale}.json`)).default
};
});
next.config.mjs
import createNextIntlPlugin from 'next-intl/plugin';
const withNextIntl = createNextIntlPlugin();
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: [
"avatars.githubusercontent.com",
"lh3.googleusercontent.com",
"res.cloudinary.com",
"images.unsplash.com"
]
}
};
export default withNextIntl(nextConfig);
middleware.ts
import createMiddleware from 'next-intl/middleware';
export default createMiddleware({
// A list of all locales that are supported
locales: ['en', 'nl', 'de', 'tr'],
// Used when no locale matches
defaultLocale: 'en'
});
export const config = {
// Match only internationalized pathnames
matcher: ['/', '/(en|nl|de|tr)/:path*']
};
layout.tsx
import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';
export default async function LocaleLayout({children, params: {locale}}: {
children: React.ReactNode;
params: {locale: string};
}) {
// Providing all messages to the client
// side is the easiest way to get started
const messages = await getMessages();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}
page.tsx
import {useTranslations} from 'next-intl';
export default function Index() {
const t = useTranslations('home_page');
return (
<h1>{t('slider_title')}</h1>
);
}
I checked a lot of different website and questions and answers but I couldn't find any correct answer. But I don't now what I need to do?
14.2to see better hydration diff and replace the last screen shot