How Layout Management works in Next.js App Router: Shared and Stand-Alone Approaches

Reza Baharvand — Tue, 23 Jul 2024 17:10:20 +0000

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.

You can connect with me on my personal website or see my work on Blue Boost and Authority Roadmap.

Forem: Reza Baharvand

How Layout Management works in Next.js App Router: Shared and Stand-Alone Approaches