Question 206624 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.js layout strange behavior

I have no idea of why that happens, i have a layout with my navbar, but when i refresh the page the navbar blink in the screen and fade away.

My app dir tree:

.
├── actions.tsx
├── api
│   └── test
│       └── route.ts
├── globals.css
├── layout.tsx
└── page.tsx

in layout.tsx:

import "./globals.css";
import { Inter } from "next/font/google";
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Blachere CRM",
  description: "Blachere CRM by Jonathan Lauxen Romano",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  type NavItem = {
    title: string;
    path: string;
  };

  const navigation: NavItem[] = [
    {
      title: "Home",
      path: "/",
    },
    {
      title: "Contacts",
      path: "/contacts",
    },
    {
      title: "Proposals",
      path: "/newProposal",
    },
  ];

  return (
    <html lang="en">
      <nav className="bg-blue-500 text-white h-12 flex items-center justify-center gap-12">
        {navigation.map((navItem) => (
          <Link key={navItem.title} href={navItem.path}>
            <div>{navItem.title}</div>
          </Link>
        ))}
      </nav>

      <body className={inter.className}>{children}</body>
    </html>
  );
}

and in page.tsx:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <text>test</text>
    </main>
  )
}

After the blink, I got the following errors:

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 <nav> in <html>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

I tried paste the same code on other page(contacts) and works well:

.
├── actions.tsx
├── api
│   └── teste
│       └── route.ts
├── contacts
│   ├── layout.tsx
│   └── page.tsx
├── globals.css
├── layout.tsx
└── page.tsx

so what i doing wrong? What can i do to fix that?

Tags:

2

Answers


  1. 0

    It seems like you are experiencing a hydration error in your Next.js application. This error occurs when the server-rendered HTML does not match the initial client-side render. This can happen for a variety of reasons, such as differences in data or state between the server and client, or differences in the rendering logic1.

    One common cause of this error is when the server and client have different versions of the same component or library2. Another cause could be that some components are being rendered differently on the server and client, for example, if you are using useEffect to update the state of a component after it has been mounted on the client3.

    To fix this issue, you should check your code to make sure that the server and client are rendering the same components with the same data and state. You can also check the console for warnings like Warning: Expected server HTML to contain a matching in and fix them4. If you are still having trouble, you may want to try debugging your code by adding console.log statements to see what is happening during server-side rendering and client-side hydration.

    Login or Signup to reply.
  2. 0

    I suggest a fix Html Code

    in layout.tsx

    <html lang="en">
  <body className={inter.className}>
    <nav className="bg-blue-500 text-white h-12 flex items-center justify-center gap-12">
      {navigation.map((navItem) => (
        <Link key={navItem.title} href={navItem.path}>
          <div>{navItem.title}</div>
        </Link>
      ))}
    </nav>
    {children}
  </body>
</html>

    Good Luck

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search