Zenn
🤖

App Router（Next.js）に関する基礎知識　ルーティングについて

2024/11/04に公開
Next.js
TypeScript
App Router
tech

Next.jsはver13から「App Router」が選択できるようになりました。（以前はPages Router）

この変化によって様々な事が変わっており、
私の様な初心者は頭がごっちゃになる事が多々あります😫

私の様な方々の助けになればと思い、App Routerを理解するための基礎知識をまとめようと思いました。

まずはアプリケーションのルーティングについてです！

Pageファイルについて

App Routerでは、「app」という特別なディレクトリに「page.tsx」というファイルを配置します。
app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。

例えばexpample.com　であれば、
ルートURL(expample.com)にアクセスすると、このpage.tsxの中身が反映されます。

📁app
 └📝page.tsx　← このファイルのこと
 └📝layout.tsx

このpageファイルの必要最低限な実装内容は
Reactコンポーネントを export default する事です。

// app/page.tsx
export default function Page() {
    
}

そのほかのルーティング

下記のapp/categories/page.tsxという配置だと、
URLは、expample.com/categories　に対応します。

📁app
| └📝page.tsx
| └📝layout.tsx
└📁categories　← このディレクトリのこと
    └📝page.tsx
  • 論理グループ
    ディレクトリ名を()で囲うと、ルーティングパスに影響されなくなります。
📁app
| └📝page.tsx
| └📝layout.tsx
└📁(authenticated)　← このディレクトリのこと
    └📁categories
        └📝page.tsx

上記は、expample.com/authenticated/categories　ではなく、
expample.com/categories　となります。

  • Dynamic Segment
    []で囲んだ部分は、[]のディレクトリ内にある「page.tsx」がprops.paramsを参照することで、パスパラメータを参照出来ます。
📁app
| └📝page.tsx
| └📝layout.tsx
└📁categories
  └📝page.tsx
  └📁[categoryName]　← このディレクトリのこと
      └📝page.tsx

props.paramsの値によって、
expample.com/categories/flower　や
expample.com/categories/animal　などの
[categoryName] の部分が動的に変わるURLが実現出来るようになります。

// app/categoires/[categoryName]/page.tsx
type Props = {
    params: { categoryName: string };
};
export default function Page({ params }: Props){
    return <div>Category: {params.categoryName}</div>;
}

Root Layoutファイルについて

「app」ディレクトリ直下に配置した「layout.tsx」ファイルは、
Root Layoutとして識別されます。
※Root Layoutとは,<html>や<body>を含む最上位のLayoutのこと

📁app
 └📝page.tsx
 └📝layout.tsx　← このファイルのこと

layout.tsxは、複数の画面に適用される共通レイアウト　になるのですが、

今回の「app」ディレクトリ直下に配置した「layout.tsx」ファイルは、
Root Layoutとなり、全ての画面に適用される共通レイアウト　になります。

// app/layout.tsx
export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 全ての画面に適用される共通レイアウト
  return (
    <div className={styles.container}>
      <Header />
      <div className={styles.content}>
        {children}
      </div>
      <Footer />
    </div>
  );
}

ネスト可能なレイアウト

App Routerでは、親Segment Layoutの中に子Segment Layoutがネストされ、
子は親の影響を受けます。
※「Segment」とは、/で区切られたURLの一部のこと(categoriesやphotosの部分)

📁app
| └📝page.tsx
| └📝layout.tsx　← Root Layoutで全ての画面に影響を与える
|
└📁categories
| └📝page.tsx
| └📝layout.tsx　← layout①
| └📁[categoryName]
|     └📝page.tsx　← ①の影響を受ける
|
└📁photos
  └📝layout.tsx　← layout②
  └📁[photoId]
      └📝page.tsx　← ②の影響を受ける

Discussion