Next.js13のLayoutsについて

はじめに

Next.js13では、従来の/pages（Pages Router）を使ったルーティングの他に、/app（App Router）を使ったルーティングが可能となり、
App Routerでは、

・React Server Components
・Nested Routes & Layouts
・Streaming & Suspense

などの機能がリリースされました。
そんな魅力的な機能が多く搭載された中、ここではLayoutsについてご紹介したいと思います。

対象読者

・JavaScriptとWeb開発の基礎に理解がある方
・ReactやNext.jsを用いたアプリケーション開発の経験者

必要な前提知識

本題のLayoutsを紹介する前に、前提として知っておくべきことを簡単にご紹介します。

・ファイルの規則
・コンポーネント階層

ファイルの規則

Next.js13では、appディレクトリ配下で特定の動作を行うユーザーインターフェース （UI ）を作成するための、特別なファイル群を提供するようになりました。

引用元：https://nextjs.org/docs/app/building-your-application/routing#file-conventions

例えば、page.jsファイルを用いることで、ルートセグメントを一般公開することができます。つまり、ページとしてアクセスすることが可能になります。

以下の画像のように、app/dashboard/analytics のURLパスは、対応するpage.jsファイルを持っていないため、一般にはアクセスできません。
このフォルダは、コンポーネント、スタイルシート、画像、またはその他の配置されたファイルを保存するために使用できます。
appディレクトリ配下では、従来のような書き方の【pages/posts/[id].jsx】では、ページとしてアクセスができなくなり、【app/posts/[id]/page.jsx】とする必要があります。

引用元：https://nextjs.org/docs/app/building-your-application/routing/defining-routes

このpage.jsファイルように、Next.js13では意味を持ったファイルがいくつか用意されました。

コンポーネント階層

appディレクトリ配下の特別なファイルで定義されたReactコンポーネントは、特定の階層でレンダリングされます。
以下の画像は、ツリーの構造が特別なファイルとどのような関係があるのかを表しています。

引用元：https://nextjs.org/docs/app/building-your-application/routing

また以下の画像のように、ネストされたルートでは、セグメントのコンポーネントは、親セグメントのコンポーネントの中にネストされていきます。

引用元：https://nextjs.org/docs/app/building-your-application/routing

本題

さて、いよいよここから本題のLayoutsについてご紹介します。

Layoutsとは

Layoutは複数のページで共有されるUIです。
画面遷移の際に、Layoutは状態を保持し、再レンダリングはしません。

引用元：https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

Layoutは、前述した特別なファイルのひとつであるlayout.jsファイルから、Reactコンポーネントをエクスポートすることで定義することができます。
このコンポーネントは、子ページを格納するためのchildren propを受け取らなければなりません。
例えば、以下のように定義します。

export default function DashboardLayout({ children }) {
  return (
    <section>
      {/* ヘッダーやサイドバーのような、共有UIをここに書く */}
      <nav></nav>
      {children}
    </section>
  )
}

また、このLayoutはネストすることも可能になります。

引用元：https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

例えば、以下のX（Twitter）のようなUIです。
/home ・ /message ・ /profile などのページで共通しているUI①と、
プロフィールページ内にある /profile/tweet ・ /profile/reply  ・ /profile/media  ・ /profile/likes  ページで共通しているUI②をそれぞれlayout.jsファイルに定儀し、レイアウトをネストさせていくことが簡単に行えます。

さいごに

Layoutsは、Pages Routerで実装していた頃よりかなり簡潔に書くことができるようになりました！
このLayoutsのように、凄まじいスピードで進化していくNext.jsに、
私は今後のアップデートにも期待を膨らませています！