こんにちは、Tochiです。 今日のちょっとした学びをアウトプットしていきます。
LayoutとTemplate
Next.jsには複数ページで共有されるUIを定義するファイルが存在します。
それがlayout.jsとtemplate.jsです。この二つはよく似ていていて、よく混同しがちなので改めて整理したいと思います。
ずばり違いはなんだ？
公式ドキュメントを読んでみます。
A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.
This means that when a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved, and effects are re-synchronized.
layout.jsとtemplate.jsの違いはずばり「状態を保持するかどうか」という点にあります。
どう使い分けていくべきか？
私が思うに、一般的にはlayout.jsを使っていれば大抵は大丈夫なのではないかと思います。
しかし、例えばページビューのログ記録やアニメーション発火なのが毎回必要ということであればtemplate.jsを使わざるを得ません。（つまり、useEffectやuseStateを使う場合はtemplate.jsである必要がある）
まとめ
こういう小さな発見が業務では大きな差になるので（と信じて） これからもちょっとずつ学びをアウトプットしていきます！！
