Hiding the Header in Next.js 14: A Targeted Approach
Next.js 14's new app directory introduces a streamlined approach to building web applications. However, sometimes you might need to customize how your layout behaves on specific pages. One common requirement is to hide the header on certain pages while maintaining it across the rest of your application.
This article will guide you through the process of selectively hiding your header from the root layout only on a designated page in your Next.js 14 application.
The Scenario
Let's imagine you have a simple Next.js 14 app directory structure with a root layout and a page named 'about' where you want to hide the header.
Project Structure:
app/
layout.js
page.js
about/
page.js
layout.js:
import { Metadata } from 'next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<Metadata title="My Website" />
</head>
<body>
<header>
<h1>My Website Header</h1>
</header>
<main>{children}</main>
</body>
</html>
);
}
about/page.js:
export default function AboutPage() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page.</p>
</div>
);
}
Currently, the header is displayed on all pages, including the 'about' page. To hide it specifically from 'about', we'll need to modify the layout behavior based on the current route.
Solution: Leveraging Route Context
Next.js provides a handy usePathname hook from the next/navigation module to access the current route within your components. This allows you to dynamically control the layout based on the page being accessed.
Modified layout.js:
import { Metadata } from 'next';
import { usePathname } from 'next/navigation';
export default function RootLayout({ children }) {
const pathname = usePathname();
return (
<html lang="en">
<head>
<Metadata title="My Website" />
</head>
<body>
{pathname !== '/about' && (
<header>
<h1>My Website Header</h1>
</header>
)}
<main>{children}</main>
</body>
</html>
);
}
In the updated layout, we use usePathname to get the current route. Then, conditionally rendering the header based on the route using pathname !== '/about'. This ensures the header only appears on pages other than 'about'.
Additional Insights and Best Practices
-
Route-Based Conditional Logic: This approach allows you to dynamically control the content and behavior of your layout based on specific routes, enhancing flexibility and user experience.
-
Component-Based Layout: You can further refine your layout by splitting it into multiple components and applying conditional logic within each component. This allows for a more modular and maintainable layout structure.
-
Alternative Methods: While the
usePathnameapproach is ideal for simple cases, for more complex routing scenarios, consider usinguseRouterfromnext/routerfor more granular control over your routing logic.
Conclusion
By leveraging Next.js's built-in routing capabilities, you can selectively hide your header from the root layout on specific pages while maintaining a consistent layout across the rest of your application. This provides a clean and efficient method for customizing your Next.js 14 app directory's layout behavior.
