Aprenda Creating a Root Layout

Deslize para mostrar o menu

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.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 13

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Seção 1. Capítulo 13