Next.js Discord

Discord Forum

How to add a Navbar and Footer to certain pages of your Nextjs app with their states being acessible

Answered
Multiflora rose seed chalcid posted this in #help-forum
Open in Discord
Multiflora rose seed chalcidOP
So I am building an app and I have a route in my app, let's say the path is like this:
whatever
  |- preview
    |-product
      -[..product].js
    |-index.js

So I have the app set up like this, I am using the pages router.
I have a <StoreNavbar> component that I want to display across all pages of the preview path. <StoreNavbar> should be visible on the /preview/ path as well as /preview/product/[..product] path.
How do i do this?
I was thinking about using Context API to first create the StoreNavbar as a context component and use it, but I am not sure if it is the right choice for such a task.
or is React Portal is appropriate for this use case.
Any help would be appreciated as I am really struggling on deciding what to do!
Answered by Ray
View full answer

13 Replies

Ray
page router?
Multiflora rose seed chalcidOP
sorry src router
my bad
Ray
what is src router?
page or app?
Multiflora rose seed chalcidOP
Yes page router.
Ray
create a layout component and put StoreNavBar in it. then you can wrap the page you want to show the navbar
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern
you can create multiple layout too
for different page
Multiflora rose seed chalcidOP
I checked the documentation, but it says to wrap the entire _app.js( I am using Javascript) with that Layout.
Ray
you can just wrap the page
Ray
Answer
Multiflora rose seed chalcidOP
Ah I see. Thanks