メインコンテンツへスキップ
Nexify
ホーム
リファレンス
練習
学習管理
検索
▲
Next.js App Router 解説
Next.js 13+ の App Router を中心に、ルーティング・レンダリング・データ取得・Server Actionsなど9つの概念をコード例付きで解説します。
お気に入り
すべて
ルーティング (3)
レンダリング (1)
データ取得 (2)
コンポーネント (1)
設定・最適化 (2)
ルーティング
理解した
App Router ディレクトリ構造
Next.js 13以降の app/ ディレクトリ。フォルダ名がURLパスに対応し、特定のファイル名が特別な役割を持つ。
詳細・コード例を見る →
コンポーネント
理解した
Server Components vs Client Components
App RouterではデフォルトがServer Components。"use client"ディレクティブを追加するとClient Componentになる。
詳細・コード例を見る →
ルーティング
理解した
特別なファイル (Special Files)
App Routerで特定の意味を持つ予約済みファイル名。これらのファイルを配置することで自動的に特定の機能が有効になる。
詳細・コード例を見る →
ルーティング
理解した
動的ルーティング
[slug] のような動的セグメント、[...slug] のキャッチオール、[[...slug]] のオプショナルキャッチオールで柔軟なURLを定義できる。
詳細・コード例を見る →
データ取得
理解した
データ取得パターン
Server Componentsでは
async/await
で直接データ取得ができる。fetch
API
は自動的に
キャッシュ
され、revalidateで再検証間隔を設定できる。
詳細・コード例を見る →
設定・最適化
理解した
メタデータ (Metadata API)
layout.tsxやpage.tsxからmetadataオブジェクトをexportすることで、<head>内のタイトルやOGP等を
型
安全に設定できる。
詳細・コード例を見る →
レンダリング
理解した
レンダリング戦略 (SSG / SSR / ISR / CSR)
Next.jsはページごとに
レンダリング
戦略を選択できる。fetch optionsやgenerateStaticParamsの有無で自動判定される。
詳細・コード例を見る →
データ取得
理解した
Server Actions
サーバー側で実行される非同期関数をクライアントから直接呼べる仕組み。フォーム送信やミューテーション処理に使う。
詳細・コード例を見る →
設定・最適化
理解した
Middleware
リクエストが処理される前に実行される関数。認証チェック・リダイレクト・ヘッダー追加などに使う。
詳細・コード例を見る →