Lære Creating a Root Layout

Stryg for at vise menuen

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 alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 13

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Sektion 1. Kapitel 13