I am currently working on an app using Next.js 14 and TypeScript. In my root layout, I have added a header and footer. However, on one of the pages I created, I need to hide the header and footer.
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/header/Header";
import Footer from "@/components/footer/Footer";
const inter = Inter({ subsets: ["latin"], weight: ["400", "600"] });
export const metadata: Metadata = {
title: "Premium Ibiza",
description: "Premium Ibiza VIP Concierge"
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Header />
{children}
<Footer />
</body>
</html>
);
}
This serves as my root layout for the app.
I've experimented with different approaches, such as creating a Layout component in the components folder to wrap the JSX of pages where the header and footer are needed. However, I'm questioning if this is the most optimal solution.
import Header from "../header/Header";
import Footer from "../footer/Footer";
export default function Layout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div>
{/* <Header /> */}
{children}
{/* <Footer /> */}
</div>
);
}