-
|
This is my theme provider "use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}My layout import type { Metadata } from "next"
import "./globals.css"
import Header from "@/components/Header"
import { ThemeProvider } from "@/components/ThemeProvider"
import Footer from "@/components/Footer"
export const metadata: Metadata = {
title: "Bookmendator",
description: "Generated by create next app",
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Header />
{children}
<Footer />
</ThemeProvider>
</body>
</html>
)
}I have this error:
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
add this for the html tag in the root layout |
Beta Was this translation helpful? Give feedback.
-
|
It works! thanks |
Beta Was this translation helpful? Give feedback.
-
|
Is this really the right solution to just ignore it? |
Beta Was this translation helpful? Give feedback.
-
|
I don't think the solution it's to suppress the Warning |
Beta Was this translation helpful? Give feedback.
-
|
As we know code first run on server side which don't have our system preference. Nextjs only know our system preference when code is run in client. So we need to make dark mode and light mode code client side render for this you can create new component ClientRender and wrap for video reference => youtube video reference //src\components\ClientRender.tsx
'use client';
import React, { ReactNode, useEffect, useState } from 'react';
export const RenderMounted = ({ children }: { children: ReactNode }) => {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return <>{children}</>;
}; <ClientRender>
<ThemeProvider
attribute='class'
defaultTheme='light'
// enableSystem
// disableTransitionOnChange
>
<ObserverProvider>{children}</ObserverProvider>
</ThemeProvider>
</ClientRender>After this code will only run on client when client have proper knowledge of system preference of user removing hydration error. |
Beta Was this translation helpful? Give feedback.
-
|
Hey! 👋 I noticed something in your example that might be worth clarifying. In the file named |
Beta Was this translation helpful? Give feedback.
add this for the html tag in the root layout
<html lang="en" suppressHydrationWarning>. This should fix it.