Recently, I migrated to Next.js's new App Router and explored using a different
layout for ad landing pages. Unlike the rest of my application, these pages
needed unique navigation. With Next.js, you can now name directories with
parentheses ()
which won't affect the routing. This approach isn't my
preferred method for managing layouts, but it does help in keeping the
application folders well-organized.
For example, I can have separate folders for my dashboard, app, website, blog, and landing pages, enhancing overall structure. Since I use MDX and need specific compilation settings, ensuring that functions correctly reference these new directories was crucial.
Project Structure:
./src/app
├── (lp)
│ ├── layout.tsx -> Layout for all landing pages
│ └── special-offer
│ └── page.tsx -> Special Offer page
├── (website)
│ ├── about
│ │ └── page.tsx -> About page
│ ├── layout.tsx -> Layout for all website pages
│ └── page.tsx -> Homepage
├── favicon.ico
├── globals.css
└── layout.tsx
How It Works:
- The
layout.tsx
in the root is globally shared. - The
layout.tsx
under(website)
affects only pages in that folder. - The
layout.tsx
under(lp)
is exclusive to pages in that landing page folder.
This setup lets each section of the application maintain its thematic consistency while still sharing some global components.