I am puzzled by the unexpected behavior I'm experiencing. When I refresh the page, my navbar momentarily appears and then quickly fades away.
Here is the directory structure of my app:
.
├── 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>
)
}
Upon encountering the blinking issue, I received 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
Interestingly, when I pasted the same code onto another page (contacts), it worked perfectly:
.
├── actions.tsx
├── api
│ └── teste
│ └── route.ts
├── contacts
│ ├── layout.tsx
│ └── page.tsx
├── globals.css
├── layout.tsx
└── page.tsx
Can anyone provide insight into what might be causing this issue? How can I rectify it?