How can I render different pages on a mainframe components without having multiple pages directory?
Answered
2323 posted this in #help-forum
2323OP
I am trying to create a webpage that will have.
1. Sidebar
2. Navbar
3. Footer
4. Mainframe
Where Sidebar,Navbar,Footer will always show, and when a menu is selected from the Sidebar it will renders the components of the selected menu on the mainframe.
By far, what i did is created all Sidebar, Navbar and Footer. And thinking if I should include these components on different pages and render those pages when selected or should I just render it on single page and just re-render the mainframe when a menu is selected. Advises are very welcome.
1. Sidebar
2. Navbar
3. Footer
4. Mainframe
Where Sidebar,Navbar,Footer will always show, and when a menu is selected from the Sidebar it will renders the components of the selected menu on the mainframe.
By far, what i did is created all Sidebar, Navbar and Footer. And thinking if I should include these components on different pages and render those pages when selected or should I just render it on single page and just re-render the mainframe when a menu is selected. Advises are very welcome.
Answered by B33fb0n3
you can take a look at the middleware here: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
Configure the matcher to match for your protected routes and check the auth inside your middleware
Configure the matcher to match for your protected routes and check the auth inside your middleware
7 Replies
B33fb0n3
when you are using the app dir, you can use a layout. Inside the layout you "layout" the components (nav, footer, sidebar, main (is children) ) and each component render his own stuff @2323
2323OP
should i create another page.js, layout.js for the mainframe, i forgot to mention that the first page is login page which means the root layout and page.js will exclude all the common components eg. the navbar,sidebar and footer.
B33fb0n3
yea, you should build one page for login/register stuff (without the layout) and one route group for all the pages that you want to render with the layout. You can protect your route then via a middleware
2323OP
what do you mean by this? "You can protect your route then via a middleware" im kind of beginner. any source i can look up to?
B33fb0n3
you can take a look at the middleware here: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
Configure the matcher to match for your protected routes and check the auth inside your middleware
Configure the matcher to match for your protected routes and check the auth inside your middleware
Answer
2323OP
@B33fb0n3 thanks!
B33fb0n3