How to hide navbar header in login page in nextjs

by

How to Hide Navbar Header in Login Page in Next.js

In Next.js, you can hide the navbar header on the login page by conditionally rendering the header component based on the current page. Here’s an example of how you can achieve this:

1. Create a separate layout component for the login page (e.g., LoginLayout.js) without the navbar header.


  import React from "react";

  const LoginLayout = ({ children }) => {
    return (
      <div>
        {children}
      </div>
    );
  };

  export default LoginLayout;

2. Wrap your login page with the LoginLayout component.


  import React from "react";
  import LoginLayout from "../components/LoginLayout";

  const LoginPage = () => {
    return (
      <LoginLayout>
        <h1>Login Page</h1>
        <!-- Add your login form here -->
      </LoginLayout>
    );
  };

  export default LoginPage;

3. For other pages with the navbar header, use a different layout component that includes the navbar.

By separating the login page layout from the other pages, you can easily control whether or not the navbar header is shown on the login page. When rendering the login page, the LoginLayout component will be used instead of the default layout component, allowing you to hide the navbar header.

Leave a comment