Next.js Discord

Discord Forum

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
I am new to learning next.js and I am following the tutorials from https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages
I got this error (attached screenshot) immediately after I created layout.tsx file and added its content following the tutorials. I have been searching the error for 2 days and I couldn't solve it. I am stuck, I am following the tutorials exactly without any changes from my side and I can't debug the error.

What is the life cycle of a page in next.js? and how to separate server side code from frontend code?

6 Replies

Short-eared Owl
Assuming that the guide is correct, it'd be really helpful if you posted the bits of relevant code, as it's likely a typo, or mistake on your end somewhere.
Brown bearOP
RootLayout

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={${inter.className} antialiased} suppressHydrationWarning>{children}</body>
</html>
);
}
DashboardLayout


import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav/>
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}
dasshbaord page


export default function Page() {
return (
<p>Dashboard Page</p>
);
}
I didn't write any code, I copy-paste from the guide 😢
Spotted Rail
Hey I completed this guide few months back, here's my github repo if it works for u:
https://github.com/parth-develops/nextjs-dashboard