EC用公式アカウント
Next.js初心者向け｜App Routerとは？基本的な使い方をわかりやすく解説
Next.jsには、WebサイトのページやURLを管理するための仕組みとして「Router」があります。
Routerには、従来から使われている「Pages Router」と、Next.js 13で導入された「App Router」の2種類があります。
現在のNext.jsでは、App Routerを使った開発が主流となっています。
今回は、「App Router」について、ご紹介します。
App Routerとは
App Routerは、Next.jsでページやレイアウトを管理するための仕組みです。
appフォルダの中にページやレイアウトなどのファイルを配置して、Webサイトを構築していきます。
基本的なファイル構成は、下記のようになります。
app/
├── page.tsx
├── layout.tsx
├── about/
│ └── page.tsx
└── contact/
└── page.tsxファイルごとにそれぞれ役割が決まっています。
| ファイル | 役割 |
|---|---|
| page.tsx | ページ |
| layout.tsx | 共通レイアウト |
| loading.tsx | ローディング表示 |
| error.tsx | エラー表示 |
| not-found.tsx | 404ページ |
page.tsxとは
page.tsxは、そのURLで表示するページを定義するファイルです。
構成例
app/
├── page.tsx
├── about/
│ └── page.tsx
└── contact/
└── page.tsxapp/page.tsx … トップページ
app/about/page.tsx … aboutページ
app/contact/page.tsx … contactページ
appフォルダ内のディレクトリ構成がURLのパスに対応し、page.tsxを配置することで、そのURLのページとして表示されます。
layout.tsxとは
複数のページで共通して使うレイアウトを定義するファイルです。
page.tsxの内容をchildrenとして受け取り、共通して表示したい要素を配置できます。
page.tsxがページごとのコンテンツを定義するのに対して、layout.tsxではページ全体の構造を定義できます。
// layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>
{ children }
</body>
</html>
);
}
RootLayoutの引数のchildrenは、page.tsxの中身が渡ってきます。
フォルダごとに設定できる
App Routerでは、フォルダごとにlayout.tsxなどのファイルを配置できます。
配置したファイルは、そのフォルダ以下のページに適用されるため、一部のページだけレイアウトを変更することも可能です。
例えば、管理画面だけ専用のレイアウトにしたい場合は、以下のような構成にできます。
app/
├── layout.tsx
├── page.tsx
└── admin/
├── layout.tsx
├── page.tsx
└── users/
└── page.tsxapp/layout.tsx … サイト全体に適用されるレイアウト
app/admin/layout.tsx … 「/admin」「/admin/users」のページに適用されるレイアウト
このように、フォルダごとにレイアウトを設定できるのもApp Routerの特徴です。
まとめ
App Routerは、Next.jsでページやレイアウトを管理するための仕組みです。
フォルダやファイルに役割が決まっているため、構成が分かりやすく、ページを管理しやすいのが特徴です。
まずは、appフォルダを中心にページを作っていくという基本を覚えておきましょう。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
