NextJSframework~30 mins

Metadata in layouts in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Metadata in layouts

📖 Scenario: You are building a simple Next.js website with a consistent layout. You want to add metadata like the page title and description that applies to all pages using a layout component.

🎯 Goal: Create a Next.js layout component that defines metadata for the entire site using the metadata export. This metadata should include a title and description. Then use this layout in your app.

📋 What You'll Learn

Create a layout component file named layout.js in the app directory

Add a metadata export object with title and description properties

Use the children prop to render nested page content inside the layout

Export the layout component as default

💡 Why This Matters

🌍 Real World

Websites often need consistent metadata for SEO and social sharing. Using layouts to define metadata helps keep it organized and reusable.

💼 Career

Understanding Next.js layouts and metadata is important for frontend developers working on modern React-based web applications.

Progress0 / 4 steps

Create the layout component file

Create a file named layout.js inside the app directory. Inside it, define a React functional component named RootLayout that accepts a children prop and returns a html element with a body containing the children. Export this component as default.

NextJS

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

Need a hint?

Remember to wrap the children inside <html> and <body> tags and set the language attribute.

Add metadata export with title and description

In the layout.js file, add an exported constant named metadata that is an object with two properties: title set to 'My Next.js Site' and description set to 'A simple Next.js app with metadata in layout.'.

NextJS

export const metadata = {
  // Your code here
}

export default function RootLayout({ children }) {
  return (
    
      {children}
    
  )
}

Need a hint?

Use export const metadata = { title: '...', description: '...' } syntax at the top of the file.

Use the layout in the app directory

Ensure the layout.js file is inside the app directory so Next.js uses it as the root layout for all pages. Confirm the file exports the RootLayout component as default and the metadata object is exported.

NextJS

// Confirm the file is named layout.js inside app directory
// Confirm exports are correct
// Your code here

Need a hint?

Make sure the file is named exactly layout.js inside the app folder and exports both metadata and RootLayout.

Add a simple page to test the layout

Create a file named page.js inside the app directory. Export a default React functional component named HomePage that returns a <main> element with the text 'Welcome to My Next.js Site'. This page will use the layout and metadata you created.

NextJS

// Create page.js inside app directory
// Export default function HomePage returning Welcome to My Next.js Site
// Your code here

Need a hint?

Remember to export the page component as default and return the <main> element with the exact text.