チャプター1

はじめに

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

パッケージマネージャーとしては、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

プロジェクトを探索してみましょう。

フォルダー構造

プロジェクトには以下のフォルダー構造があることに気づくでしょう。

Folder structure of the dashboard project, showing the main folders and files: app, public, and config files.

/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 で記述されているためです。現代の 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 で起動します。動作しているか確認しましょう。

ブラウザで https://:3000 を開きます。ホームページは、意図的にスタイルが適用されていないこのようになります。

Unstyled page with the title 'Acme', a description, and login link.