jot

When I was exploring Next.js Blog Starter Kit, I thought to myself, nice and neat, exactly what I wanted! As you can see, I used much of its styles in the blog I eventually built. But one thing did not occur to me—that I need very different layout setups.

It wasn’t until I made my custom not-found page that its approach of wrapping everything in one layout began to feel off. At this point, I already made a back to top button with progress indicator and a theme switcher. Why would I want them in a not-found page?

This lead to a simplified root layout, a […not_found] directory and a not-found.tsx, and then a home layout and so much more. In the end, my root layout reduced to:

TYPESCRIPT

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en" suppressHydrationWarning>
        <head>
        <meta
                name="msapplication-config"
                content="/favicon/browserconfig.xml"
            />
        </head>
        <body className="min-h-screen flex flex-col">
        <ThemeProvider attribute="class">
            <ProgressProviders>
            <div className="w-full px-2 lg:px-4 flex-grow">
                {children}
            </div>
            <Footer/>
            </ProgressProviders>
        </ThemeProvider>
        </body>
        </html>
    );
}

I would be a happy person had I followed this streamlined approach first off.

In recent Next.js versions, the App Router, which built on React Server Components, uses a file-based routing system. The root layout applies to all routes by default. Namely, it wraps everything. To organize routes without affecting the URL structure, we might utilize Route Groups. In my case, I just need more variations across a few pages, I found it more efficient to use a basic and straightforward root layout with a few dedicated nested layouts and pages.

So this is another note for my own future reference: planning the layouts with thorough consideration is as crucial as properly breaking the UI into a component hierarchy.

That and hours of struggling with an inconsistent drawer across different pages, a few awkward attempts at a sticky footer… I’ve learned my lesson.

jot

Blog Starter 102: Never underestimate the importance of a root layout