Search code examples
next.jsnextjs14

next js 14 project structure

Help me find the answer!

I have a landing page and some other pages. In the first layout I add a header with navigation so that it appears on all pages.

The problem is that this header is not needed when going to site.com/panel/...

How can I organize the project structure so that this header is on the main page of site.com and site.com/about and so on, but not on the panel page?

enter image description here

Solution

  • I would leverage route groups: https://nextjs.org/docs/app/building-your-application/routing/route-groups

    so for your purposes, I would have the following structure.

    > app
|-> (landing)
  |-> layout.tsx
  |-> page.tsx
  |-> about/
  |-> login/
|->(application)
  |-> layout.tsx
  |-> panel/
|-> api/

    This will allow you to define a separate layout.tsx for screens within your application vs. layout for landing pages.