はじめに

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

パッケージマネージャーには、npmやyarnよりも高速で効率的なpnpmを使用することをお勧めします。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.jsなどの設定ファイルもあることに気付くでしょう。これらのファイルのほとんどは、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で記述されているためです。最新のWeb環境を反映したコースを作成したかったのです。

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 で起動します。動作しているか確認してみましょう。

ブラウザで http://localhost:3000 を開いてください。ホームページは、意図的にスタイルが適用されていないため、このようになっているはずです。