javascript - How to manage multiple navbars in a Next.js 15 app with the new app folder structure? - Stack Overflow

I recently started on NextJS and I'm bit confused. I’m working on a Next.js 15 project using the app folder structure (without a src directory). I requires two distinct navigation bars:

Public Navbar - Visible on the landing page (/) and login/signup pages. Authenticated Navbar - Displayed only after the user logs in (e.g., on a dashboard page).

How can I achieve this? Should I handle the logic in the layout.tsx file or create separate layouts for public and authenticated routes? Any code examples or best practices would be helpful.

I’ve attached a diagram for reference here.

I recently started on NextJS and I'm bit confused. I’m working on a Next.js 15 project using the app folder structure (without a src directory). I requires two distinct navigation bars:

Public Navbar - Visible on the landing page (/) and login/signup pages. Authenticated Navbar - Displayed only after the user logs in (e.g., on a dashboard page).

How can I achieve this? Should I handle the logic in the layout.tsx file or create separate layouts for public and authenticated routes? Any code examples or best practices would be helpful.

I’ve attached a diagram for reference here.

• javascript
• reactjs
• next.js
• frontend
• next.js13

Share Improve this question Follow edited Feb 3 at 16:01 Shivani asked Feb 3 at 13:12 ShivaniShivani 11311 silver badge99 bronze badges 3

• Typically you would use a React Context to share the login context globally, then within your NavBar component, you can use const { isLoggedIn } = useAuthContext(); or whatever you name your context to conditionally render different content. Here's an example using Auth0 github.com/auth0-samples/auth0-nextjs-samples/blob/main/… – gunwin Commented Feb 3 at 16:55
• @gunwin yeah that I l know but basically I wanted to have 2 seperate nevs. Because they are completely different designs and hence it would be idea if the layout is completely different for both navbar – Shivani Commented Feb 3 at 17:55
• Create a Layout, LoggedInLayout and AnonLayout component, in the Layout, use the context to decide whether to show LoggedInLayout or AnonLayout. – gunwin Commented Feb 5 at 22:53

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Seems a very simple change can fix this. Dependeing on your global state just use the existence of auth token to check if the user is logged it in the layout file.

If token exists, show logged in users' nav else show default nav

To show different layouts depending on an arbitrary state or context, you can create a Layout component such as:

Layout.tsx

import React from "react";
import { useAuth } from "../hooks/useAuth";
import AnonLayout from "./AnonLayout";
import AuthLayout from "./AuthLayout";

const Layout = ({ children }) => {
  const { isAuthenticated } = useAuth();

  return isAuthenticated ? <AuthLayout>{children}</AuthLayout> : <AnonLayout>{children}</AnonLayout>;
};

export default Layout;

Then in your main page, you wrap your content with <Layout>.