I used React pretty extensively before but I am very new to Next.js and the layout logic doesn’t make much sense to me. From what I understand if layout.js is under /app that means that layout applies to the entire application which is exactly what I want. Now, I want to have a header and a footer. Footer should stick to the bottom of the page and header should stick to the top and not be hidden when I scroll. I was able to achieve that by putting my components in page.js but once I started using routing I realized that’s not the right spot for them and according to the docs they should be in layout.js instead:
import { Inter } from "next/font/google";
import "./globals.css";
import FooterComponent from "@/app/components/footer/footer.component";
import HeaderComponent from "@/app/components/header/header.component";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Solute Art Studio",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HeaderComponent/>
<main>{children}</main>
<FooterComponent/>
</body>
</html>
);
}
Once I moved them there I broke header’s stickiness, it disappears when I scroll now. And the footer is still at the bottom but even if there is nothing in between the header and the footer I have to scroll to it. I feel like I broke some CSS after I moved these components to layout.js. What am I doing wrong? I am using tailwind. Header: <Disclosure as="nav" className="bg-white shadow sticky top-0">.... Footer: <footer className="bg-white sticky top-[100vh]">...