The Default Layout in NextJS

In the previous lesson, we found out that we should have a common site layout into which the content, title, and meta description of the page are inserted. NextJS already has a file with a common site layout by default. It is located in the file app/layout.jsx.

After installation, the layout file already contains some code. This code, however, contains a lot of unnecessary things. Let's create a minimal site layout that is easy to understand. To do this, open the layout file, delete everything from it, and paste the following:

app/layout.jsxexport const metadata = {
  title: 'Test site',
  description: 'This is my page description.',
};

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}