Next.jsのルーティングについて

Next.jsのルーティングについて

Next.jsでは、特定のファイルを作成すると自動でルーティングされ、フォルダ階層がそのままパスになるようです。

例えば、app配下に追加すると、「/」のURLでアクセスできるようになり、app/userフォルダに追加すると「/user」のURLでアクセスできるようになる感じです。

公式HPによると、下記が自動ルーティングされるファイルの一覧です。

layout .js .jsx .tsx レイアウト
page .js .jsx .tsx ページ
loading .js .jsx .tsx UIの読み込み
not-found .js .jsx .tsx 見つからないUI
error .js .jsx .tsx エラーUI
global-error .js .jsx .tsx グローバルエラーUI
route .js .ts APIエンドポイント
template .js .jsx .tsx 再レンダリングされたレイアウト
default .js .jsx .tsx 並列ルートフォールバックページ

その中でも、layoutについて調べたので共有します。

layoutについて

layoutはヘッダーやフッターなど、ページで共通の処理を書きます。

app配下にlayoutを配置するとルートレイアウトというものになり、すべてのpage又はネストされているlayoutに適用されるようです。
なので、全ページ共通の処理はルートレイアウトに記載し、各ページ固有の部分は「app/フォルダ名」の中に配置していく形になると思います。

仕組みとしては、Propsでchildrenとしてページコンポーネントを受け取り、

{children}

などでbodyの中に記載することができます。

注意点として、titleやmetaなどの情報は、headタグに直接記載するのではなく、APIを使って記載するのが推奨されているようです。
export const metadata: Metadata = {
title: 'Next.js',
}