Next.js 13 Template と Layout の使い分け

Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayoutはネスト（入れ子）にして使用することも可能です。 Layoutの定義方法 appディレクトリ配下で layout.tsx ファイルを定義するとLayoutとして定義できます。 例えば、以下のようなLayoutを定義することができます。 // app/posts/layout.tsx export default function Layout({ children, }: { children: React.ReactNode; }) { retur

[makbai]

どうでも良いことなのでは?と思ったら、結構面白かった。

[efcl]

Next.jsのLayoutとTemplateｎ違いについて。 LayoutはStateを維持するが、LayoutはStateを維持せず毎回新しいインスタンスを作成する。

[jay-es]

Layout はページ遷移時に再レンダリングせず状態を維持する。Template はページ遷移ごとに再レンダリングを行う。ページごとのロギングやページ遷移アニメーションなどに適している