はじめに

新しいプロジェクトを作成する

パッケージマネージャーとしてpnpmを使用することをお勧めします。これは、npmやyarnよりも高速で効率的です。pnpmがインストールされていない場合は、以下のコマンドを実行してグローバルにインストールできます。

npm install -g pnpm

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

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に移動します。

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オブジェクトは、データベース内のテーブルを表しています。例えば、請求書テーブルの場合：

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で書かれているためです。私たちは現代のウェブ状況を反映したコースを作成したかったのです。

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

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

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // In TypeScript, this is called a string union type.
  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
  status: 'pending' | 'paid';
};

TypeScriptを使用することで、コンポーネントやデータベースに誤ったデータ形式を渡すことを防ぐことができます。例えば、請求書のamountにnumberの代わりにstringを渡してしまうような間違いを防げます。

TypeScript開発者の場合

• データ型は手動で宣言していますが、より良い型安全性のために、データベーススキーマに基づいて型を自動生成するPrismaまたはDrizzleをお勧めします。
• Next.jsはプロジェクトがTypeScriptを使用しているかどうかを検出し、必要なパッケージと設定を自動的にインストールします。また、Next.jsには、コードエディター用のTypeScriptプラグインも付属しており、オートコンプリートと型安全性をサポートします。

開発サーバーの実行

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

pnpm i

その後、開発サーバーを起動するためにpnpm devを実行します。

pnpm dev

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

ブラウザでhttps://:3000を開いてください。ホームぺージは意図的にスタイルが適用されていませんが、このように表示されるはずです。