App Router: はじめに | Next.js

新しいプロジェクトの作成

パッケージマネージャーには、npmやyarnよりも高速で効率的なpnpmの使用を推奨します。pnpmがインストールされていない場合は、次のコマンドでグローバルにインストールできます:

Terminal

npm install -g pnpm

Next.jsアプリを作成するには、ターミナルを開き、プロジェクトを保存したいフォルダにcdコマンドで移動して、次のコマンドを実行します:

Terminal

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

このコマンドは、Next.jsアプリケーションをセットアップするためのコマンドラインインターフェース（CLI）ツールであるcreate-next-appを使用しています。上記のコマンドでは、このコース用のスターター例と共に--exampleフラグも使用しています。

プロジェクトの探索

ゼロからコードを書くチュートリアルとは異なり、このコースのコードの大部分は既に作成されています。これは、既存のコードベースで作業する可能性が高い実際の開発環境をより反映しています。

私たちの目標は、アプリケーションコードの「すべて」を書く必要なく、Next.jsの主要な機能に集中して学習できるようにすることです。

インストール後、コードエディタでプロジェクトを開き、nextjs-dashboardに移動します。

Terminal

cd nextjs-dashboard

少し時間を取ってプロジェクトを探索してみましょう。

フォルダ構造

プロジェクトには次のようなフォルダ構造があります:

/app: アプリケーションのすべてのルート、コンポーネント、ロジックが含まれており、主にここで作業します。
/app/lib: 再利用可能なユーティリティ関数やデータ取得関数など、アプリケーションで使用される関数が含まれています。
/app/ui: カード、テーブル、フォームなど、アプリケーションのすべてのUIコンポーネントが含まれています。時間節約のため、これらのコンポーネントは事前にスタイル設定されています。
/public: 画像などのアプリケーションの静的アセットがすべて含まれています。
設定ファイル: アプリケーションのルートにはnext.config.tsなどの設定ファイルもあります。これらのファイルのほとんどは、create-next-appを使用して新しいプロジェクトを開始すると作成され、事前設定されます。このコースではこれらのファイルを変更する必要はありません。

これらのフォルダを自由に探索してください。まだコードのすべてを理解できなくても心配ありません。

プレースホルダーデータ

ユーザーインターフェースを構築する際、プレースホルダーデータがあると便利です。データベースやAPIがまだ利用できない場合:

JSON形式またはJavaScriptオブジェクトとしてプレースホルダーデータを使用できます。
mockAPIなどのサードパーティサービスを使用できます。

このプロジェクトでは、app/lib/placeholder-data.tsにプレースホルダーデータを提供しています。ファイル内の各JavaScriptオブジェクトは、データベース内のテーブルを表します。例えば、請求書テーブルの場合:

/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',
  },
  // ...
];

データベースの設定の章では、このデータを使用してデータベースをシード（初期データで投入）します。

TypeScript

ほとんどのファイルに.tsまたは.tsxの接尾辞が付いていることにも気付くでしょう。これはプロジェクトがTypeScriptで書かれているためです。私たちは現代のWeb環境を反映したコースを作成したいと考えました。

TypeScriptを知らなくても大丈夫です - 必要な時にはTypeScriptのコードスニペットを提供します。

今のところ、/app/lib/definitions.tsファイルを見てください。ここでは、データベースから返される型を手動で定義しています。例えば、請求書テーブルには次のような型があります:

/app/lib/definitions.ts

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // TypeScriptでは、これは文字列ユニオン型と呼ばれます。
  // "status"プロパティは'pending'または'paid'のいずれかの文字列のみを取ることができます。
  status: 'pending' | 'paid';
};

TypeScriptを使用することで、請求書のamountにnumberの代わりにstringを渡すなど、コンポーネントやデータベースに誤ったデータ形式を渡すことを防ぐことができます。

TypeScript開発者の方へ:

データ型を手動で宣言していますが、より安全な型付けのためには、データベーススキーマに基づいて型を自動生成するPrismaやDrizzleをお勧めします。

Next.jsはプロジェクトがTypeScriptを使用しているかどうかを検出し、必要なパッケージと設定を自動的にインストールします。Next.jsには、オートコンプリートと型安全性を支援するTypeScriptプラグインも付属しています。

開発サーバーの実行

プロジェクトのパッケージをインストールするにはpnpm iを実行します。

Terminal

pnpm i

続いてpnpm devで開発サーバーを起動します。

Terminal

pnpm dev

pnpm devはNext.js開発サーバーをポート3000で起動します。動作確認をしてみましょう。

ブラウザでhttp://localhost:3000を開きます。ホームページは意図的にスタイルが適用されていない次のような表示になるはずです:

はじめに

新しいプロジェクトの作成

プロジェクトの探索

フォルダ構造

プレースホルダーデータ

TypeScript

開発サーバーの実行

On this page