How can I to hide nav and footer for my login and signup page in Next js 13

Question

I have login and Register page but the nav and the footer appears on all page. I dont know how to make the nav and footer not to appear in the login and register page. In Next 12, i usually used the getLayout function but in next 13 there is no component props in the layout page. How can i go about it?

Answer 1

In nextjs13 you have a layout.js file you can use but as per your use case you want different layout for login, register and a different one for other routes.

Steps to follow

1. Create route groups for the routes with navbar

• To group the routes create a folder inside app/ as (folderName). You can name your folder anything but don't remove parenthesis.
• Now create a dashboard folder inside app/(folderName) and inside that you can create page.jsx file
• To access this route you can visit localhost:3000/dashboard folder name inside parenthesis will be ignored.
• Create a new layout.js file inside app/(folderName)
• Inside the new layout.js you can add navbar which will be used by dashboard and all other routes inside the group.

For reference - https://nextjs.org/docs/app/building-your-application/routing/route-groups

2. For login and register

• You can use the app/layout.js for login and register as this layout.js is without navbar.

Note: In the above scenario for dashboard you will have content from the layout.js inside group but you will also have content from app/layout.js If you don't want that then delete layout.js from app/ and create a route group for login and register and a layout.js inside that route group separately for login and register. Check multiple root layout in above nextjs docs link