Question 189137 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    You must use a different layout to your login and register pages.

    Here is the Docs https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#nesting-layouts

    But in resume you only need to create your file in the same context folder:

    app/
| layout.js
| login.js
| register.js
| dashboard/
| | layout.js
| | index.js

    This way the pages login and register will use the same layout, and any other page inside dashboard/ have the same layout.

    Login or Signup to reply.
  2. 0

    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

    1. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search