With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component.
export default function RootLayout({ children }: { children: React.ReactNode }) {
const [darkMode, setDarkMode] = useState(true);
return (
<html lang="en">
<head />
<body className={inter.className}>
<div className={darkMode ? "dark" : ""}>
<main className="min-h-screen bg-white px-5 dark:bg-black absolute left-0 right-0 -z-50">
<FallingStar />
<Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
<div className="mx-auto max-w-3xl z-50 mb-10">
{children}
<Footer />
</div>
<AnalyticsWrapper />
</main>
</div>
</body>
</html>
);
}
In this code snippet, I simply add the dark class to my container div to enable dark mode. The dark mode switch happens in the navbar.
When working with Next.js 13, I used the "use client" keyword in layout.tsx to convert my entire layout into a client component. However, since I want dark mode to be on by default, turning the whole layout into a client component may not be ideal. Hence, I plan to change the site into a server-side component for later hydration to achieve the desired interactivity.