Next.js Discord

Discord Forum

Hydration when merging class names?

Unanswered
Allegheny mound ant posted this in #help-forum
Open in Discord
Allegheny mound antOP
When running the following layout locally:

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={cn("bg-yellow-50", inter.className)}>{children}</body>
    </html>
  );
}


My console shows the error:

app-index.js:31 Warning: PropclassNamedid not match. Server: "__className_20951f" Client: "bg-yellow-50 __className_20951f"

How is this possible? When I change it to className={inter.ClassName} it does solve it.

But I'm not sure what causes the error, as cn() is working perfectly fine in other components?

3 Replies

fuma
Normally hydration shouldn't happen if it's a server component, is your root layout a client component?
@fuma Normally hydration shouldn't happen if it's a server component, is your root layout a client component?
Allegheny mound antOP
Hi, no it's not. I haven't specified "use client" anywhere yet.

It's almost a fresh Next.js project.
joulev
Your code looks fine. Can you reproduce it in a minimal project? If yes, send github link