Lernen Creating a Root Layout

Swipe um das Menü anzuzeigen

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.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 13

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Abschnitt 1. Kapitel 13