Nested Layouts in NextJS

As you know, the main site layout is located in the file /app/layout.jsx within the /app folder.

However, if desired, you can create your own layouts in nested folders. In this case, the page content will first be inserted into the nested layout, and then the resulting result will be inserted into the main layout.

Let's try it in practice. Let our main layout have the following form:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Let's create another, nested layout for all content from the /users folder:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <>
      <div className="info">
        message for all users
      </div>
      <div className="content">
        {children}
      </div>
    </>
  );
}

As you can see, in this layout we do not specify the main page tags, as they are already present in our main site layout.

Let's also create a content file to display the user:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

After these manipulations, our file structure will look like this:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

Now, if you go to the corresponding URL, NextJS will put everything together and in the browser we will get the following final HTML code:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>