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