ページの全体に適用する_appと_documentが変わった

Nextjs13で新しくなったapp routeの共有のレイアウト設定で_app,_documentの代わりにtemplate,layoutを使う

Nextjs14で_appを使うために

Next.jsのappルートにした場合_appが使えなくなり、代わりにtemplateとlayoutになった。そのため、共有のレイアウト、ページ全体に反映させたい場合はtemplateまたは、layoutを使うことで解決する。

templateとlayoutの違い

ページ全体に適用させるtemplateとlayoutの違いは再レンダリングするか、しないかの違いがある。ページ移行時、layoutは再レンダリングせず。templateは再レンダリングされる。
そのため、パフォーマンスを考慮するならlayoutを使う方がよい。

使い方

両方とも使い方がほとんど一緒です。
とりあえずファイル名を間違えない、childrenを記入する2点を気を付ければ大丈夫です。

layout.tsx

import './globals.css'
export default function Layoutdesu({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="jp">
      <body>
        <p>Layout.tsxがインポートされている</p>
        {children}
      </body>
    </html>
  )
}

template.tsx

"use client";
import { SessionProvider } from "next-auth/react"
export default function Template({ children, session }: { children: React.ReactNode, session: any }) {
  return (
    <div>
      <SessionProvider session={session}>
        <p>TEMPLATEがインポートされている</p>
        {children}
      </SessionProvider>
    </div>
  )
}

結果以下の通りlayout.tsx,TEMPLATEが表示されている

とりあえずlayout,templateは以下のようにchildrenを記入すればなんとかなります。

export default function Tenpure({children}) {
  return (
    <>
    {children}
    </>
  )}

layoutを使う場面

layoutは静的な場面、useeffectとかstate(状態)を使用しない時にこのlayoutを使う。
各プロジェクトで状況が異なるので何とも言えないが、参考までに例として

共有ヘッターや、フッター
ナビゲーション

上記のようなcss,htmlだけで完結する静的画面で使われる。

templateを使う場面

反対にtemplateは再レンダリングが必要な場合使う。
例として

ページネーション
目次
ナビゲーション
アニメーション付加
他sateを使う場合

ページを移行した際、変化が必要な場合はこのtemplateを使う。
react開発の際、○○Providerというものを使う場合もこのtemplateに記入する必要がある。 CookiesProvider,SessionProvider,QueryClientProvider等

共有のテンプレートから除く

layout,templateは基本的にディレクトリー内のすべてのページに適応されます。
が、サブフォルダー、ディレクトリーであるが共有のテンプレートから除きたい場合はかっこで囲むことで解決します。
以下のようにすることでルート(/)はmainのテンプレートを sub(/sub)ページ以下はtest内のテンプレートで表示されます。

├app
  ├(main)
     ├layout.tsx
     ├page.tsx
     └template.tsx
  ├(test)
     ├sub
       └page.tsx
     ├layout.tsx
     └template.tsx

├next.config.js
├package.json
├public
├node_modules

どちらを使うべきか？

開発時は、とりあえずtemplateを使ってみる。
layoutを使ってみると、動かない、なんかエラーが出てしまってもtemplateを使えばすんなり解決することがあります。
そのため、最初はとりあえずtemplateを使って開発し、ブラシュアップ時に、なるべくlayoutに移行する方が良いと思います。