When I added a loading page inside my home directory I got these errors:
1-Error: Hydration failed because the initial UI does not match what was rendered on the server.
2-Error: There was an error while hydrating this Suspense boundary. Switched to client rendering.
Loading file code :
export default function Loading() {
return <h2 className="global">Loading...</h2>;
}
Folder structure :
── src
└── app
├── [locale]
└── home
├── page.tsx
├── layout.tsx
└── loading.tsx
layout.tsx:
type Props = {
children: ReactNode;
params: { locale: string };
};
async function getMessages(locale: string) {
try {
return (await import(`../../../dictionaries/${locale}.json`)).default;
} catch (error) {
console.log(error);
}
}
export async function generateStaticParams() {
return ['en', 'ar'].map((locale) => ({ locale }));
}
export default async function RootLayout({ children, params: { locale } }: Props) {
const messages = await getMessages(locale);
const lang = locale === 'ar' ? 'ar' : 'en'
return (
<html lang={lang}>
<head>
//head InFO
</head>
<NextIntlClientProvider locale={locale ? locale : 'en'} messages={messages}>
<body>
<div className={`main-wrapper-content`}>
{children}
</div>
</body>
</NextIntlClientProvider>
</html>
);
}
page.tsx:
export default function HomePage() {
return (
<section>
<div className={style.headerStyle}>
<NavBar />
<Hero />
</div>
<About />
<WhyChooseUs />
< Services/>
<BlogsComponentHome />
<LatestNews />
<Team />
<Testimonial />
<Booking />
<FooterMain />
</section>
)
}