Next.js 15 Tutorial - 16 - Multiple Root Layouts

Creating Multiple Root Layouts in Next.js

Introduction to the Project

• The speaker introduces a new project focused on building an app with routes for revenue customers, login, and registration.

• Emphasis is placed on creating a clean user interface with distinct headers and footers for different pages.

The Challenge of Layouts

• A challenge arises when adding headers and footers in the root layout file, as they would apply universally across all pages.

• The need for different layouts for various sections of the app is highlighted.

Utilizing Route Groups

• Introduction to route groups as a solution for applying layouts selectively without affecting URLs.

• Route groups help organize project structure while allowing flexibility in layout application.

Setting Up Route Groups

• Instructions are provided to create two route groups: one for marketing (revenue and customers) and another for authentication (login and register).

• Moving the root layout file into the marketing route group is essential; it must not remain in the app folder.

Creating Specific Layout Files

• A new layout file named "Au layout" is created specifically for login and registration, which only includes a footer.

• After moving the page.tsx file into the marketing route group, users can see that URLs remain unchanged while layouts differ based on page type.

Benefits of Multiple Layouts

• The implementation allows login and registration pages to have minimal design (only footer), while revenue and customer pages retain both header and footer.

• This approach demonstrates how route groups enhance code organization, maintainability, and provide flexibility in user interface design.

Conclusion