【Everyday Next.js】6. Routing Detail

Routing

ページごとに page.tsx が必要

例えば、以下のようなディレクトリ構造だと、

app
├ layout.tsx
└ page.tsx
　 ├ about
　 │ └ page.tsx
　 └ user
　 　 ├ page.tsx
　 　 └ post
　 　 　 └ page.tsx

app/page.tsx -> /
app/about/page.tsx -> /about
app/user/page.tsx -> /user
app/user/post/page.tsx -> /user/post

となる。

Pages Router のように、

app/index.tsx
app/about.tsx

のようなファイルを作っても対象にならないので注意。

Root Layout は必須

app ディレクトリ直下のlayout.tsxは必須。

そして、以下のファイルのように、<html>タグと<body>タグを含む必要がある。

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

この Root Layout は、Pages Router の\app.tsx や\document.tsx にあたるもののようだ。

Rayout と Template

Rayout も Template も、どちらもページをラップするものである。

２つの違いは、「画面遷移したときに再レンダリングが行われるかどうか」。

Rayout は再レンダリングが行われず、Template は再レンダリングが行われる。

使い分け基準は以下の技術記事がわかりやすい。

zenn.dev

`<head>`の編集

タイトルやメタデータなどの<head>要素は、layout.tsx や page.tsx で metadata オブジェクトや generateMetadata 関数をエクスポートすることで定義できる。

// app/page.tsx
import {Metadata} from 'next';

export const metadata: Metadata = {
  title: 'Next.js',
};

export default function Page() {
  return '...';
}