Multiple root layouts with route groups in NextJS - Mini Project: Build & Apply

Multiple Root Layouts with Route Groups in Next.js

📖 Scenario: You are building a website with two main sections: a public blog and a private dashboard. Each section needs its own root layout to have different headers and footers.Using Next.js App Router, you will organize your routes with route groups and create multiple root layouts to keep the code clean and maintainable.

🎯 Goal: Create two separate root layouts for the blog and dashboard sections using route groups in Next.js. The blog layout will have a header with "Blog Header" and the dashboard layout will have a header with "Dashboard Header". Each layout will wrap its respective pages.

📋 What You'll Learn

Create a route group for the blog section with its own root layout

Create a route group for the dashboard section with its own root layout

Each root layout must include a header with the exact text: "Blog Header" or "Dashboard Header"

Create a page inside each route group that displays the exact text: "Welcome to the Blog" and "Welcome to the Dashboard" respectively

Use Next.js App Router conventions with functional components and React 18+

💡 Why This Matters

🌍 Real World

Many websites have different sections with unique layouts, such as public pages and user dashboards. Using multiple root layouts with route groups helps keep code organized and layouts consistent.

💼 Career

Understanding Next.js route groups and multiple root layouts is important for building scalable, maintainable web apps. This skill is valuable for frontend developers working with modern React frameworks.

1

Set up the blog route group with root layout

Create a folder named (blog) inside the app directory. Inside (blog), create a file named layout.tsx. In this file, write a React functional component called BlogLayout that returns a html element with a body containing a header with the text Blog Header. Export this component as default.

NextJS

// Your code here

Need a hint?

Remember to export the layout component as default and include {children} inside the body to render nested pages.

2

Add a blog page inside the blog route group

Inside the (blog) folder, create a file named page.tsx. Write a React functional component called BlogPage that returns a main element with the text Welcome to the Blog. Export this component as default.

NextJS

// Your code here

Need a hint?

Make sure the page component is exported as default and returns the correct text inside a main tag.

3

Set up the dashboard route group with root layout

Create a folder named (dashboard) inside the app directory. Inside (dashboard), create a file named layout.tsx. Write a React functional component called DashboardLayout that returns a html element with a body containing a header with the text Dashboard Header. Export this component as default.

NextJS

// Your code here

Need a hint?

Remember to export the dashboard layout as default and include {children} inside the body.

4

Add a dashboard page inside the dashboard route group

Inside the (dashboard) folder, create a file named page.tsx. Write a React functional component called DashboardPage that returns a main element with the text Welcome to the Dashboard. Export this component as default.

NextJS

// Your code here

Need a hint?

Make sure the dashboard page component is exported as default and returns the correct text inside a main tag.