NextJSframework~30 mins

Root layout (required) in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Create a Root Layout in Next.js

📖 Scenario: You are building a simple website using Next.js. You want to create a root layout that wraps all pages with a consistent header and footer.

🎯 Goal: Build a root layout component in Next.js that includes a <header> with a site title, a <main> area for page content, and a <footer> with copyright text.

📋 What You'll Learn

Create a root layout component named RootLayout in app/layout.tsx

Use semantic HTML elements: <html>, <body>, <header>, <main>, and <footer>

Include a <header> with the text My Next.js Site

Render the children inside the <main> element

Export the RootLayout as the default export

💡 Why This Matters

🌍 Real World

Root layouts in Next.js provide a consistent structure and styling for all pages in a website or app.

💼 Career

Understanding root layouts is essential for building scalable Next.js applications and working with the App Router.

Progress0 / 4 steps

Create the RootLayout component with HTML structure

Create a React functional component called RootLayout in app/layout.tsx. Inside it, return an <html lang="en"> element containing a <body> element. Do not add any children or content yet.

NextJS

export default function RootLayout() {
  return (
    
      
        {/* Your code here */}
      
    
  )
}

Need a hint?

Start by creating a function named RootLayout that returns the basic HTML structure with lang="en" on the <html> tag.

Add header and footer elements inside the body

Inside the <body> element of RootLayout, add a <header> element with the text My Next.js Site and a <footer> element with the text © 2024 My Next.js Site. Do not add the main content area yet.

NextJS

export default function RootLayout() {
  return (
    
      
        {/* Add header and footer here */}
      
    
  )
}

Need a hint?

Place the <header> and <footer> inside the <body> tags with the exact text.

Add a main element to render children

Add a <main> element between the <header> and <footer> inside the <body>. Render the children prop inside this <main> element. Add children as a parameter to the RootLayout function.

NextJS

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        My Next.js Site
        {/* Render children inside main here */}
        © 2024 My Next.js Site
      
    
  )
}

Need a hint?

Remember to accept children as a parameter and place it inside a <main> element between header and footer.

Export RootLayout as default export

Ensure the RootLayout component is exported as the default export from app/layout.tsx. The full component should include the html, body, header, main with children, and footer elements.

NextJS

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        My Next.js Site
        {children}
        © 2024 My Next.js Site
      
    
  )
}

// Make sure this is the default export
// Your code here

Need a hint?

The component should already be exported as default. Just verify the export statement is correct.