Check out the live demo here. Ensure to scroll down and click on a link in the header.
In my project, I have two files named layout.tsx: one in the src directory and another in the (public) directory with a sticky <Header /> component. The expected behavior is for the page to scroll to the top when a route changes using a <Link>.
However, what actually happens is that the page scrolls to the top except for the height of the Header. Even after adding scrollRestoration: true in next.config.js, the issue persists. It's also present in the latest canary release.
Moreover, I keep encountering a Hydration error when refreshing the page multiple times. I'm unsure if these issues are connected.
Before submitting an issue on GitHub, I would like assistance in determining if my layout structure is incorrect or if I am misusing the new layout feature.
Your help in identifying the root cause of these problems would be greatly appreciated, as it's been quite frustrating for me.
├──(public)
│ ├── page.tsx
│ └── layout.tsx
└── layout.tsx (root layout)
// src/layout.tsx
import "assets/styles/globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>{children}</body>
</html>
);
}
// src/(public)/header.tsx
import Link from "next/link";
const Header = () => {
return (
<div className="bg-gray-200 h-12 sticky top-0 z-50">
<div className="flex flex-row mx-auto max-w-7xl h-full space-x-4 items-center ">
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</div>
</div>
);
};
export default Header;
// src/(public)/layout.tsx
import Header from "./header";
export default function PublicLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
<main className="py-16">{children}</main>
</>
);
}
// I've tried <main className="py-16"><Header />{children}</main> but the issue persisted