I'm building a website with Next.js and App Router and need to have three types of navigation Headers. (background=white, background=black, and one version where all nav items are hidden except for "Free Trial" and "Request Demo").
This is my current LocaleLayout
import { Inter } from "next/font/google";
import { notFound } from "next/navigation";
import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
import { ReactNode } from "react";
import Header from "@/src/components/header/Header";
import Footer from "@/src/components/footer/Footer";
import { locales } from "@/src/config";
import "../styles.css";
// ... other code
export default async function LocaleLayout({
children,
params: { locale },
headerBackground = true,
simpleHeader = false,
}: Props) {
// Validate that the incoming `locale` parameter is valid
if (!locales.includes(locale as any)) notFound();
// Enable static rendering
unstable_setRequestLocale(locale);
return (
<html lang={locale} className={`${inter.className} scroll-smooth`}>
<head>
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1"
/>
</head>
<body>
<Header /> // this Header I want to split into variants
<main className="pt-navigation-height mx-auto w-full max-w-[1274px] px-8 sm:px-[66px] lg:px-[125px]">
{children}
</main>
<Footer />
</body>
</html>
);
}
The only solution I found is using "Route Groups", i.e. I have to create a group for each Header type (header with black background, header with white background, header with just two CTA buttons). This gets messy pretty quickly and if I want to combine Header variants with Footer Variants, my folder and routes structure becomes pure chaos.
- (header variant 1)
-- (footer variant 1)
--- layout.tsx
-- (footer variant 2)
--- layout.tsx
- (header variant 2)
-- (footer variant 1)
--- layout.tsx
-- (footer variant 2)
--- layout.tsx
... and so on
Is there a more elegant way to achieve this or are Route Groups really the only way?
Thanks for your help.
PS: I wish there was something like this from the static site generator Hugo that simply let's me set a frontmatter parameter that targets a certain layout on a "per Page" level without having to nest everything in folders and subfolders https://gohugo.io/content-management/front-matter/#layout