From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Understanding global layout

Understanding global layout - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Understanding global layout

“

In the app folder, you can see that there is a page.js file where we have made changes and tried a few things. Now let's talk about another important file, layout.js in detail. This file can have .js, .jsx or .tsx extension like any other page file. Let me open the file. And here you can see it has metadata and also has a component defined named root layout with children passed as parameter. In fact, rest of the components, the subsequent components are passed as children to this layout JS. The layout file residing in the app folder really is the root layout. And a project must have at least one layout file. All the pages and layouts are rendered inside this root layouts as a child. So when the application is loaded, the page.js of the app is rendered as a child of layout.js. Later if you click on products, then the page.js of products route is rendered inside this layout. Let's practically see. I will add an h3 inside the layout.js saying this is a global layout. Let's save this and…

Contents