Next.js Discord

Discord Forum

Router error

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <main> in <div>.

6 Replies

American black bearOP
idk
Northern Wheatear
Can you share the code of that page
@Northern Wheatear Can you share the code of that page
American black bearOP
import "@radix-ui/themes/styles.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Theme, ThemePanel } from "@radix-ui/themes";
import classnames from "classnames";

const inter = Inter({
  weight: "600",
  subsets: ["latin"],
  variable: "--font-inter",
});

export const metadata: Metadata = {
  title: "The moon",
  description: "Generated by create next app",
};

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning={true} lang="en">
      <body
        suppressHydrationWarning={true}
        className={classnames({
          [inter.variable]: true,
        })}
      >
        <Theme
          appearance="dark"
          accentColor="gold"
          grayColor="slate"
          radius="large"
        >
          <main className="p-5">{children}</main>
        </Theme>
      </body>
    </html>
  );
}
Northern Wheatear
I'm not exactly sure what the problem is... Can you pass the className directly and check it out?
Like this...
<body
        suppressHydrationWarning={true}
        className={inter.variable}
      >
And remove the classnames import also