TL;DR
Next.js の App Router で、app ディレクトリ内に置く特別なファイルの 1 つ。置いた URL Segment 配下のすべての URL Segment に、共通の UI を適用する。
なぜ必要か
公式ドキュメントによると、ページ遷移のたびに useEffect を再同期したいときや、入力欄のような Client Component の状態を遷移ごとにリセットしたいときに使う。layout の中の Suspense 境界は最初の読み込みでしかフォールバックを出さないが、template の中ならページ遷移のたびに出す。
仕組み
layout.tsx と違い、ページ遷移の間で状態を保持しない。遷移するたびに再レンダリングされる。
公式ドキュメントによると、template には固有の key が与えられ、自分のセグメント（動的パラメータを含む）が変わると再マウントされる。それより深いセグメントの遷移では上位の template は再マウントされず、検索パラメータが変わっても再マウントされない。再マウントすると、中の Client Component の状態はリセットされ、useEffect は再同期され、DOM は作り直される。デフォルトでは Server Component である。
入れ子の位置は layout とその子の間である。同じセグメントの error.js、loading.js、not-found.js、page.js を包むが、layout.js は包まない。Next.js 13.0.0 で導入された。
例
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}注意点
拡張子は .tsx でなくてもよく、.jsx や .js でもよい。