Lære Creating a Root Layout

Sveip for å vise menyen

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.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 13

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Seksjon 1. Kapittel 13