Given that I have a static site (https://abdullahraheel.tech/) with the sole interactive feature being the ability to toggle dark mode, I acknowledge that using useState
is not possible 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>
);
}
Given the code above I simply apply the dark class to my container div. The dark mode is toggled in the navbar.
In Next.js 13, I utilized the "use client" keyword in layout.tsx to transform my entire layout into a client component. However, considering my preference for the dark mode to be enabled by default, I now recognize that having the entire layout as a client component may not be the optimal approach. Therefore, I want to convert the site into a server-side component that can be hydrated later to achieve the desired interactivity.