Header Rendering twice although it is only once
Answered
Marble gall posted this in #help-forum
Marble gallOP
So I have a Header component which is being called in my layout.tsx, and when I go to /, it shows twice the header, I don't know why, because it's only once in the layout. Can someone tell me why this happens and how to fix it, please?
layout.tsx
(The Header is just some HTML and 4 <Link> tags)
layout.tsx
import Header from '@/components/Header'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang='es'>
<body
className={`${font.className} flex min-h-screen flex-col items-center bg-slate-200`}
>
<Header />
{children}
</body>
</html>
)
}(The Header is just some HTML and 4 <Link> tags)
6 Replies
@Marble gall So I have a Header component which is being called in my layout.tsx, and when I go to /, it shows twice the header, I don't know why, because it's only once in the layout. Can someone tell me why this happens and how to fix it, please?
layout.tsx
tsx
import Header from '@/components/Header'
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang='es'>
<body
className={`${font.className} flex min-h-screen flex-col items-center bg-slate-200`}
>
<Header />
{children}
</body>
</html>
)
}
(The Header is just some HTML and 4 <Link> tags)
probably you imported this layout and use in in pages, like
import Layout from "./layout";
function Page() {
return (
<Layout>
<div>...</div>
</Layout>
);
}in that case dont do that
Answer
nextjs already handles layout handling for you
@joulev probably you imported this layout and use in in pages, like
tsx
import Layout from "./layout";
function Page() {
return (
<Layout>
<div>...</div>
</Layout>
);
}
Marble gallOP
yep, I tried that and that was what caused my problem
Thanks a lot
Should I mark this question as solved?