1

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.

Abdullah
  • 21
  • 2
  • You can have a client layout without all the application being client: https://stackoverflow.com/questions/75801266/does-a-client-layout-make-everything-client-if-so-how-to-add-client-interactiv. – Youssouf Oumar Jun 19 '23 at 11:36
  • Thank you, That basically solves my problem and I also now know why my site had SEO. – Abdullah Jun 19 '23 at 11:46

0 Answers0