steep horizon
Hello there,
I'm quite new to NextJS and React in general. So please forgive my lacking knowledge. Sadly I couldn't find anything on this here or on the internet. Hence this post.
I'm playing around with NextJS and NextUI but for some reason, adding the NextUIProvider as a parent of the body in layout.tsx, causes a Hydration mismatch. If I comment out the <Provider> and its closing tag, the error no longer occurs. I'm aware, that this doesn't affect the functionality of the application, but it triggers me.
My layout.tsx looks like this
'use client';
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Providers } from './providers';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Test',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const bodyClasses = `${inter.className} dark text-foreground bg-background`;
return (
<html lang='en'>
<Providers>
<body className={bodyClasses}>{children}</body>
</Providers>
</html>
);
}
And the providers.tsx file has the following content
'use client';
import { NextUIProvider } from '@nextui-org/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <NextUIProvider>{children}</NextUIProvider>;
}
I pretty much just copy-pasted them from the documentation.
I hope this is sufficient information. Let me know if there's anything else you need to know.
Thanks in advance.
near agate