layout.js

The file layout.js, when created in a folder, is applied to all the route segments corresponding to the subfolders.

This can be useful if you wish to create a consistent UI sections (eg. header, footer, navagational menu, ads, etc.) across different URLs.

A root layout file must be present at the root of the project, ie. 'app/'. It must contain the <html> and <body> tags;

Layouts in Next.js allow updates on an individual page component only (without having to reload the layout entirely). This is called partial rendering.

Below, "app/dashboard/profile/page.tsx" gets part of its appearance from "app/dashboard/layout.tsx", which in turn, conitunues from "app/layout.tsx".