Can we skip parent layout in a nested page in app dir?

mayank_tamrkar

Mayank Tamrkar

Posted on June 2, 2024

Can we skip parent layout in a nested page in app dir?

Yes, you can skip the parent layout for specific nested pages in the app directory of a Next.js 13 application by using a grouping folder structure. This approach allows you to selectively apply different layouts to different parts of your application.

Image description

Grouping Folder Structure
A grouping folder is a special folder in the app directory that allows you to organize your pages and layouts without affecting the URL structure. By using parentheses () to create these folders, you can group pages and layouts together and control which layout each page uses.

Example Folder Structure
Here is an example folder structure that demonstrates how to skip the parent layout using a grouping folder:

Root Layout (app/layout.tsx): This is the main layout that applies to most pages in your application. It might include a navigation bar, footer, or any other common elements.

Dashboard Layout (app/(withNavbar)/dashboard/layout.tsx): This layout applies to all pages within the dashboard directory. It might include elements specific to the dashboard section, such as a sidebar.

Login Page Without Navbar (app/(withoutNavbar)/login/page.tsx): This page does not use the root layout because it is placed inside the (withoutNavbar) grouping folder. This allows you to skip the parent layout and apply a different layout or no layout at all.

Why Use Grouping Folders?
Grouping folders are useful for organizing your application and selectively applying layouts. By using a structure like (withoutNavbar), you can ensure that specific pages (like the login page) do not inherit the root layout, which might contain elements like the navigation bar that you want to exclude.

Summary
By leveraging grouping folders in the app directory of a Next.js 13 application, you can effectively control which layouts are applied to specific nested pages. This approach allows you to skip the parent layout for certain pages, providing more flexibility in how you structure and design your application.

💖 💪 🙅 🚩
mayank_tamrkar
Mayank Tamrkar

Posted on June 2, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related