TL;DR
App Router の app ディレクトリに置く特別なファイルの 1 つ。特定の URL Segment に置くと、その配下のすべての URL Segment に適用される共通の UI になる。
仕組み
Layout はネストする。app 直下に置いた Root Layout は、すべての Segment に適用される。たとえば次の構成を考える。
app/nested-layout/
├── layout.tsx
├── page.tsx
└── second
├── layout.tsx
├── page.tsx
└── third
├── fourth
│ └── page.tsx
├── layout.tsx
└── page.tsx/second にアクセスすると、second までのすべての layout.tsx と second/page.tsx が表示される。/second/third/fourth にアクセスすると、third までのすべての layout.tsx と fourth/page.tsx が表示される。
注意点
template.tsx と違い、Layout はページ遷移の間も状態を保持し、再レンダリングされない。
自分の理解
拡張子は .jsx（.js）でもよい。