yes it wrap your page in the children props

What if I delete that, add some custom file?

Is it agnostic in that respect, or does it have to be page?

you must have the root layout at root

I mean the page.tsx

https://nextjs.org/docs/app/api-reference/file-conventions
you need to follow the file conventions

or it won't work

Oh oky

you can have other file inside the app folder but nextjs will ignore them unless you put them into the code

So basically we kind of treat page.tsx as the body, and add other components into it

correct

and the layout.tsx persist over page change

so you can put eg navbar, sidebar in it

But I also read there's something called multi layout

Seems neat

yes a route group

So how do we specify which components are wrapped by the layout component? Like in case of multiple of layout components

we don't wrap the layout component. Instead we create multiple layout.tsx in different route group

So there has to be atleast one layout in the root dir app

yes

Or is it like each folder has to have only one layout?

or if you use multiple root layout
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts