NextJSframework~30 mins

Layout vs template difference in NextJS - Hands-On Comparison

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Understanding Layout vs Template in Next.js

📖 Scenario: You are building a simple website with Next.js. You want to understand how to use layouts and templates to organize your pages. Layouts help you keep common parts like headers and footers consistent. Templates help you create page structures that can change content but keep the same style.

🎯 Goal: Build a Next.js app with a RootLayout that wraps all pages and a DashboardTemplate that structures dashboard pages. See how layouts and templates differ in usage and structure.

📋 What You'll Learn

Create a RootLayout component with a header and footer

Create a DashboardTemplate component with a sidebar and main content area

Use the RootLayout to wrap the entire app

Use the DashboardTemplate inside a dashboard page

💡 Why This Matters

🌍 Real World

Web developers use layouts and templates in Next.js to build websites with consistent structure and reusable page designs.

💼 Career

Understanding layouts and templates is essential for building scalable Next.js applications and working in teams on professional web projects.

Progress0 / 4 steps

Create the RootLayout component

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 "Site Header", and a <footer> containing the text "Site Footer". The component should accept a children prop and render it inside the <body> between header and footer.

NextJS

// Create RootLayout component in app/layout.tsx
// Include , ,  with "Site Header",  with "Site Footer"
// Render children between header and footer

Need a hint?

Remember to wrap children between header and footer inside the body tag.

Add a configuration variable for sidebar items

Create a file app/dashboard/template.tsx. Inside it, create a constant array called sidebarItems with these exact strings: 'Home', 'Profile', 'Settings'. This will be used to show sidebar links in the dashboard template.

NextJS

// Create sidebarItems array with 'Home', 'Profile', 'Settings'

Need a hint?

Use a constant array with the exact names for sidebar items.

Create the DashboardTemplate component using sidebarItems

In app/dashboard/template.tsx, create a React functional component called DashboardTemplate that accepts a children prop. It should render a <div> with two sections: a <nav> listing each item from sidebarItems inside <li> elements within a <ul>, and a <main> that renders the children. Use .map() to create the list items. Make sure to add a key prop to each <li>.

NextJS

export const sidebarItems = ['Home', 'Profile', 'Settings'];

// Create DashboardTemplate component that renders sidebarItems in  and children in

Need a hint?

Use sidebarItems.map(item => <li key={item}>{item}</li>) to list sidebar items.

Use DashboardTemplate inside a dashboard page

Create a file app/dashboard/page.tsx with a React functional component called DashboardPage that is the default export. Inside it, return the DashboardTemplate component wrapping a <p> with the text "Welcome to the dashboard". Import DashboardTemplate from ./template. This shows how templates are used inside pages.

NextJS

// Create DashboardPage component in app/dashboard/page.tsx
// Import DashboardTemplate from './template'
// Use DashboardTemplate to wrap a  with "Welcome to the dashboard"

Need a hint?

Import DashboardTemplate and use it to wrap the paragraph inside DashboardPage.