What I am trying to achieve
I have a header that I need to change based on specific urls
The issue
rootlayout doesn't allow me to conditionally render
import "./globals.css";
import localFont from "@next/font/local";
import Header from "./components/Header";
import HeaderDark from "./components/HeaderDark";
import Footer from "./components/Footer";
import { usePathname } from "next/navigation";
const darkHeaderUrls = ["talentica", "esign", "mickeytots"];
const trap = localFont({
src: [
{
path: "../../public/fonts/Trap-Light 300.otf",
weight: "300",
},
{
path: "../../public/fonts/Trap-Regular 400.otf",
weight: "400",
},
{
path: "../../public/fonts/Trap-Medium 500.otf",
weight: "500",
},
{
path: "../../public/fonts/Trap-SemiBold 600.otf",
weight: "600",
},
{
path: "../../public/fonts/Trap-Bold 700.otf",
weight: "700",
},
{
path: "../../public/fonts/Trap-ExtraBold 800.otf",
weight: "800",
},
{
path: "../../public/fonts/Trap-Black 900.otf",
weight: "900",
},
],
variable: "--font-trap",
});
export default function RootLayout({ children }) {
// const pathname = usePathname();
return (
<html lang="en">
<head>
<title>The Design Trip</title>
<meta name="description" content="One stop design solutions" />
</head>
<body className={`${trap.variable} font-sans`}>
{/* {darkHeaderUrls.some((url) => pathname.includes(url)) ? (
<HeaderDark />
) : ( */}
<Header />
{/* )} */}
{children}
<Footer />
</body>
</html>
);
}
The commented code is what I tried to do. If I do this, next.js outputs an error saying that it can't be run on the server and i need to use the 'use client' flag, but on doing that I am not very sure this is the right way of doing it What is the correct way to solve this problem?
Concept
next.js layout and template According to this, I need to create a template if I wish to use hooks
