Suggest an editImprove this articleRefine the answer for “How does layout differ from a regular React component?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)A layout in Next.js is also a React component, but with **special rules and capabilities** that make it part of the routing and rendering system. The differences are not in syntax, but in **context and behavior**. **Key point:** a layout is responsible for **structure, navigation, SEO, and performance**, while regular components handle local UI tasks.Shown above the full answer for quick recall.Answer (EN)ImageA layout in Next.js is also a React component, but with **special rules and capabilities** that make it part of the routing and rendering system. The differences are not in syntax, but in **context and behavior**. Let's break down the key differences. --- ## 1. Role and purpose **A regular React component** - Just a piece of UI - Used wherever it's plugged in - Knows nothing about routes **A layout in Next.js** - Defines the structure of pages - Tied to a route's folder - Automatically wraps all nested pages So a layout is a **component + an infrastructural role**. --- ## 2. How it is connected **A React component** ```tsx <Header /> <Footer /> ``` You decide yourself where and how to use it. **A layout** ```txt app/dashboard/layout.tsx ``` It's connected **automatically** to all pages in that folder and below, with no explicit import. --- ## 3. Behavior during navigation **A regular component** - Re-renders along with the page - Loses state on navigation **A layout** - Persists during navigation - Doesn't unmount while the route stays in the same branch This gives you: - preserved UI state - fast transitions - a more "native" application feel --- ## 4. Relation to routing **A React component** - Doesn't depend on the URL - Can be used anywhere **A layout** - Tightly tied to the file structure - Inherited by nested routes - Can be nested and hierarchical File structure = interface structure. --- ## 5. Working with the HTML document Only a layout can directly return: ```tsx <html> <body>{children}</body> </html> ``` A regular React component shouldn't do this; it works inside an already-existing DOM tree. --- ## 6. Metadata and SEO **A layout** - Can set metadata - The metadata is inherited by pages - Suited for SEO at the section level **A regular component** - Doesn't take part in the metadata system - Doesn't affect `<head>` directly --- ## 7. Component type by default **A layout** - A Server Component by default - Can work with cookies, headers, the DB - Client hooks only with `"use client"` **A React component** - In plain React, always client-side - In Next.js it can be client or server, but without a layout's special rules --- ## Summary table | | Layout | Regular React component | | --- | --- | --- | | Role | Page structure | UI element | | Connection | Automatic | Manual | | Tied to routes | Yes | No | | Persists on navigation | Yes | No | | Controls `<html>` and `<body>` | Yes | No | | Metadata and SEO | Yes | No | | Server Component by default | Yes | Depends | --- ### Short conclusion A layout is not just a React component, but **part of Next.js's architecture**. It is responsible for **structure, navigation, SEO, and performance**, while regular components handle local UI tasks.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.