Deviopath › Next.js

Which Layouts Wrap a Page?

Medium · Routing

Layouts nest: a page is wrapped by the layout of every folder on the way from app/ down to the page's own folder. Route groups (name) are left out of the URL, but their layout.tsx **still wraps** the pages inside them.

A template file works like a layout, but it is re-created on every navigation instead of keeping its state. Inside one folder, the layout wraps the template.

Write layoutChain(files, pageFile) that returns the layout and template files that wrap pageFile, outermost first.

- Check each folder from app down to the folder that contains the page. In each folder, first add its layout file (if any), then its template file (if any).

- Only files that sit **directly** in one of those folders count. app/blog-archive/layout.tsx does not wrap a page in app/blog/.

- File extensions can be tsx, ts, jsx or js.

- The order of files does not matter.

Next: Pagination Links