React Academy · レッスン

App Routerのファイル規約

app/ directoryとpage.tsx、layout.tsx、loading.tsx、error.tsx filesの役割を理解します。

「App Routerのファイル規約」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

app/ ディレクトリ

Next.js App Router では app/ ディレクトリを使用します。フォルダーが URL セグメントを定義し、フォルダー内の特殊ファイルが各セグメントの動作を定義します。

page.tsx — ルート UI

page.tsx は、URL セグメントに対してレンダーされる React コンポーネントをエクスポートします。page.tsx がない場合、そのルートには一般公開でアクセスできません。

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — 永続シェル

layout.tsxは子ルートをラップします。ナビゲーションをまたいで維持されるため、子ルートが変わっても状態はリセットされません。

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — 即時ローディングUI

loading.tsxは、ページの非同期データを読み込んでいる間、すぐにレンダリングされます。ページを自動的にSuspense境界でラップします。

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — エラー境界

error.tsxは、そのセグメント用のReactエラー境界です。エラーと、再試行するためのreset関数を受け取ります。

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — 404 UI

サーバーコンポーネントからnotFound()が呼び出されたとき、または一致するルートがないときに、not-found.tsxがレンダリングされます。

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — 再マウントされるレイアウト

template.tsxはlayout.tsxに似ていますが、ナビゲーションのたびに新しいインスタンスを作成します。そのため、状態がリセットされ、エフェクトが再実行されます。アニメーションや分析に使用します。

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — APIルート

route.ts（route.tsxではありません）は、HTTPメソッドのハンドラー（GET、POSTなど）をエクスポートし、app/ディレクトリ内にAPIエンドポイントを作成します。

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Edgeミドルウェア

プロジェクトルートにあるmiddleware.tsは、Edgeで一致するすべてのリクエストより前に実行されます。認証チェック、リダイレクト、ヘッダーの書き換えなどに使用します。

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

コロケーション

ルートではないファイル（コンポーネント、ユーティリティ、テスト）をapp/フォルダ内にコロケーションできます。特別な規約に従った名前（page、layoutなど）のファイルだけが、ルートセグメントとして扱われます。

ネストしたレイアウト

各フォルダには独自のlayout.tsxを配置できます。ネストしたレイアウトは、そのセグメントの子要素だけをラップし、上位にある親レイアウトと組み合わされます。

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

確認問題

ページの非同期データの読み込み中に、自動的なSuspenseフォールバックを提供するApp Routerのファイルはどれですか？

まとめ

App Routerでは、特別なファイルを使用します。page.tsx（ルートUI）、layout.tsx（永続シェル）、loading.tsx（Suspenseフォールバック）、error.tsx（エラー境界）、not-found.tsx（404）、route.ts（API）、middleware.ts（Edgeロジック）です。

よくある質問

「App Routerのファイル規約」レッスンは無料ですか？

はい。「App Routerのファイル規約」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「App Routerのファイル規約」で何を学びますか？

app/ directoryとpage.tsx、layout.tsx、loading.tsx、error.tsx filesの役割を理解します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「App Routerのファイル規約」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

App Routerのファイル規約
Next.jsのServer ComponentsとClient Components
Dynamic RoutesとRoute Groups
Metadata APIとApp RouterのSEO

← React Academyに戻る