I am using Internationalization (i18n) in Server Components. My layout component is like this
import LanguageSwitcher from '@/components/common/LanguageSwitcher';
import { Inter } from 'next/font/google';
import { notFound } from 'next/navigation';
import React from 'react';
import { I18nProvider, SSRProvider, useLocale } from 'react-aria';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: { locale: string };
}) {
const { locale, direction } = useLocale();
// Show a 404 error if the user requests an unknown locale
if (params.locale !== locale) {
notFound();
}
return (
<SSRProvider>
<I18nProvider locale={locale}>
<html lang={locale} dir={direction}>
<body className={inter.className}>
<h1>Merhaba</h1>
<LanguageSwitcher />
{children}
</body>
</html>
</I18nProvider>
</SSRProvider>
);
}
But I am getting an error. Am I doing something wrong? Version "next": "13.4.4",
React aria server-side rendering
