Chapter 1: App Routerを始めよう

React コースで学んだ内容を土台に，Next.js の App Router プロジェクトを立ち上げるところから始めます。ここではスターターを用意した状態で，構成の読み解きに集中します。

この章で身につくこと

pnpm と create-next-app を使って App Router プロジェクトを初期化する
スタータープロジェクトのディレクトリ構成と役割を把握する
プレースホルダーデータや TypeScript 定義を読み解き，次章以降の準備を整える
開発サーバーを起動し，初期状態の画面を確認する

事前準備：pnpm のインストール

チームではパッケージマネージャーに pnpm を推奨しています。npm や yarn より高速で，モノレポとの相性も良いからです。まだ入っていない場合はグローバルにインストールしておきましょう。

Terminal

npm install -g pnpm

Step 1. プロジェクトを作成する

任意の作業ディレクトリで以下を実行し，チュートリアル用のスターターをクローンします。--example フラグで本教材向けのテンプレートを指定している点に注目しましょう。

Terminal

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

セットアップが完了したら，プロジェクトフォルダを VSCode などで開きます。

Terminal

cd nextjs-dashboard

実務でも既存のコードベースを読み解くケースが多いので，このコースでも“最初からすべてを書き切る”のではなく，スターターを読みながら必要な箇所を改良していきます。

Step 2. ディレクトリ構成を把握する

プロジェクトのルートには次のようなディレクトリとファイルが並んでいます。

（ダッシュボードプロジェクトの主要なフォルダ構成を示す図：app、public、設定ファイル）

/app：App Router の中枢。ルート構造・レイアウト・ページコンポーネントなど，これから触るファイルの大半がここにあります。
/app/lib：データ取得やユーティリティ関数などの共有ロジックを配置する場所です。
/app/ui：カードやテーブル，フォームなどの UI コンポーネント群。レイアウトやスタイルがあらかじめ用意されています。
/public：画像などの静的アセットが入ります。
設定ファイル：next.config.ts をはじめとする設定群。create-next-app が生成したまま利用します。

まずは自由にファイルを開いて，全体の雰囲気を掴んでみてください。現時点で細部まで理解できなくても問題ありません。

Step 3. プレースホルダーデータを確認する

UI を作る際，本番の API やデータベースがまだ準備できていないこともあります。そのときは プレースホルダーデータ を使って開発を先に進めるのが一般的です。

このスターターでは app/lib/placeholder-data.ts に各テーブルのダミーデータを定義しています。invoices テーブルの一部を見てみましょう。

/app/lib/placeholder-data.ts

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

後続の章では，このデータを使ってデータベースに初期値を流し込みます。アプリのどこで参照されるのか，ざっと辿っておくと進行がスムーズです。

Step 4. TypeScript 定義を読み解く

ほとんどのファイルが .ts / .tsx で終わっているのは，プロジェクト全体が TypeScript ベースだからです。型定義を用意しておくと，誤ったデータをコンポーネントへ渡したり，データベースへ書き込んだりするミスを防げます。

/app/lib/definitions.ts では，データベースから取得する値の型を手動で定義しています。

/app/lib/definitions.ts

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // TypeScriptでは「文字列リテラルの共用体型（union type）」と呼ばれます。
  // つまり、status プロパティは 'pending' または 'paid' のいずれかしか取れません。
  status: 'pending' | 'paid';
};

TypeScript に慣れている人は「Prisma や Drizzle のような ORM で自動生成する」選択肢も想像できるはずです。Next.js は TypeScript を自動検出して設定を補完してくれるため，学習時は細かなセットアップに悩まされません。

Step 5. 開発サーバーを起動する

依存パッケージをインストールし，開発サーバーを立ち上げます。

Terminal

pnpm i

Terminal

pnpm dev

pnpm dev を実行すると，Next.js の開発サーバーが http://localhost:3000 で起動します。ブラウザでアクセスすると，意図的にスタイルが最低限になっているトップページが表示されるはずです。

alt text

ここまで確認できたら準備完了です。次章以降で App Router のルーティングや UI を組み立てていきましょう。