Lära Creating a Root Layout

Svep för att visa menyn

Now that you understand what layouts are, let’s create the most important one — the root layout.

The root layout is the top-level layout in your application. It wraps every page and defines the global structure of your app.

In Next.js, the root layout is required and is defined in the app/layout.tsx file.

Example - Root Layout Structure

app/
  layout.tsx
  page.tsx

The layout.tsx file controls the overall structure of your application.

Basic Root Layout

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>My App</header>
        <main>{children}</main>
        <footer>Footer</footer>
      </body>
    </html>
  );
}

<html> and <body> are required in the root layout;
children represents the current page content;
All pages will be rendered inside this layout;
Shared elements like header and footer are defined here.

What Happens in Practice

If your page looks like this:

export default function Page() {
  return <h1>Home</h1>;
}

It will be rendered inside the layout:

<header>My App</header>
<h1>Home</h1>
<footer>Footer</footer>

Why Root Layout Is Important

It defines the global structure of your app;
It ensures consistency across all pages;
It is the place for shared UI and global elements;
It is required for every Next.js app.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 13

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Avsnitt 1. Kapitel 13