NextJSframework~30 mins

Nested layouts in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Nested layouts

📖 Scenario: You are building a simple website with a main layout and a nested dashboard layout inside it. The main layout has a header and footer. The dashboard layout adds a sidebar. You want to organize your pages so that the dashboard pages use both layouts automatically.

🎯 Goal: Create nested layouts in Next.js using the App Router. The main layout wraps all pages with a header and footer. The dashboard layout wraps dashboard pages with a sidebar inside the main layout.

📋 What You'll Learn

Create a main layout component with a header and footer

Create a dashboard layout component with a sidebar

Nest the dashboard layout inside the main layout

Create a dashboard page that uses the nested layouts

💡 Why This Matters

🌍 Real World

Nested layouts help organize complex websites by reusing common page parts like headers, footers, and sidebars.

💼 Career

Understanding nested layouts is important for building scalable React and Next.js applications used in professional web development.

Progress0 / 4 steps

Create the main layout

Create a file app/layout.tsx with a React functional component called RootLayout. It should return an HTML structure with <html>, <body>, a <header> containing the text "Main Header", and a <footer> containing the text "Main Footer". Use children as a prop to render nested content inside the <body> between the header and footer.

NextJS

// Your code here

Need a hint?

Remember to create a React functional component named RootLayout that returns the HTML structure with header, children, and footer.

Create the dashboard layout

Inside the app/dashboard folder, create a file layout.tsx with a React functional component called DashboardLayout. It should accept children as a prop and return a <div> with a <nav> containing the text "Sidebar" and a <main> containing the children. This layout will be nested inside the main layout.

NextJS

import React from 'react';

// Your code here

Need a hint?

Create a React functional component named DashboardLayout that returns a div with a nav and main containing children.

Create a dashboard page

Inside the app/dashboard folder, create a file page.tsx with a React functional component called DashboardPage. It should return a <section> with the text "Welcome to the Dashboard".

NextJS

// Your code here

Need a hint?

Create a React functional component named DashboardPage that returns a section with the welcome text.

Complete nested layout usage

Verify that the DashboardPage is wrapped by DashboardLayout, which is nested inside the RootLayout. This happens automatically in Next.js App Router by placing layout.tsx files in app and app/dashboard. No extra code is needed here. Just ensure the files are correctly placed and exported.

NextJS

// No code needed here, just verify file structure and exports

Need a hint?

Make sure all three components are exported correctly and placed in the right folders for Next.js to nest layouts automatically.