Skip to main content

PagesAndLayouts

Next.jsのApp Routerでは特定のファイル名で`default exportvすることで各ページで固有のUIを作成したり、各ページで共通のレイアウトを作成することができる。

Pages​

これはDefining Routesの方でもでてきたpage.tsxのことを指す。

以下の例を用いて解説すると、URLが/のルートの場合はapp/page.tsxでルートに固有のUI（99%トップページですが）を作ることができます。

また、app/dashboard/page.tsxではURLが/dashboardのときのページのUIを作成することになる。

app/
|-- page.tsx
|-- dashboard/
|   |-- page.tsx
|   |-- settings/
|       |-- page.tsx

Layouts​

次にLayoutsだが、これはページで共通のUIを作成するために用いる。

app/
|-- page.tsx
|-- dashboard/
|   |-- page.tsx
|   |-- layout.tsx
|   |-- settings/
|       |-- page.tsx
|       |-- layout.tsx

上記の場合、URLが/dashboardのときには共通のUIとしてlayout.tsxの内容が表示されることになる。
また、layout.tsxは一度ルーティングによりナビゲートされると、状態を保持する仕様になっているので再レンダリングされないという特徴がある。

layout.tsxは以下のようにpropsとしてchildrenを受け取ることができるので、page.tsxの内容をchildrenとして表示することがでる。

layout.tsx
import React, { ReactNode } from 'react'

const DashboardLayout = ({ children }: Readonly<{ children: ReactNode }>) => {
  return (
    <div>
      <div>DashboardLayout</div>
      <div>{children}</div>
    </div>
  )
}

export default DashboardLayout

上記のルーティングの例では、ルーティングがネストされており、dashboard/以下ではlayoutが2つある。このようにlayoutがネストされると、子ルート（この場合は、settings配下）では、共通のレイアウトが積み上げられるUIになる。

Template​

Next.jsにはもう一つ共通UIを作成するTempalteがある。

app/
|-- page.tsx
|-- dashboard/
|   |-- page.tsx
|   |-- template.tsx
|   |-- settings/
|       |-- page.tsx
|       |-- template.tsx

templateはlayoutの逆で、状態が保持されず、ルートにナビゲートするたびにコンポーネントが再レンダリングされる。

つまり、ページにナビゲートされるたびに、必ず実行したい機能があるなどのケースで有用である。