next-learn-ja

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

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

このコマンドはcreate-next-appをしようします。CLI：コマンドラインインターフェイスはNext.jsアプリをセットアップしてくれます。上記のコマンド内ではこのコースの為にstarter exampleと共に`--example`フラグも使用しています。

プロジェクト内確認

スクラッチでコーディングするようなチュートリアルではありません。こちらのコースのほとんどコードは既に記述されています。これは実際の開発現場をよく反映しています。既存のコードがある状態から働くような感じです。

ゴールはNext.jsのメイン機能を学ぶことに集中することです。全てのアプリケーションコードを書くことなく。

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

cd nextjs-dashboard

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

フォルダー構造

プロジェクトは次のフォルダ構造なことに気づきます：

/app: アプリへの全てのルーティング・コンポーネント・ロジックを含みます。これはここから主に働くことになります。
/app/lib: アプリで使用される関数が含まれます。再利用可能な便利な関数やデータ取得の関数の様な。
/app/ui: アプリの全てのUIコンポーネントが含まれます。カード・テーブル・フォームの様な。時間を節約するために、これらのコンポーネントは事前にスタイリングされます。
public: 画像のような全ての静的なアセットが含まれます。
Config Files: アプリrootにnext.config.jsの様な設定ファイルに気づくはずです。これらの殆どのファイルはcreate-next-appを使用して新しいプロジェクトを始める際に事前設定されて作成されます。このコースを修正する必要はありません。

気軽にこれらのフォルダーを探索できます。すべてのコードがしている事をまだ理解していない場合でも心配しないでください。

仮のデータ

UI構築の際にいくつか仮のデータがあると便利です。もしデータベースやAPIがまだ利用可能でない場合：

JSON形式もしくはJavaScriptオブジェクト内で仮データを使う
mock APIの様なサードパーティサービスを使用する

このプロジェクトの為にapp/lib/placeholder-data.ts内でいくつかの仮データを提供されています。各ファイル内のJavaScript objectはデータベースのテーブルで表されます。たとえば請求書テーブルの場合：


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を使うことによってコンポーネントもしくはデータベースに対して誤ったデータを間違って渡さない事を確実にすることができます。請求金額に対してnumber型の代わりにstring型を渡すような。

もしTypeScriptを使う機会がある開発者なら：

私たちは手作業でデータ型を定義していますが、より良い型安全にするにはPrismaもしくはDrizzleをオススメします。
Next.jsはプロジェクトでTypeScriptを使用している場合それを検出します。そして必要なパッケージと設定を自動インストールします。更にTypeScript pluginも型安全と自動補完をサポートする為に同梱しています。

開発サーバーの実行

pnpm i でパッケージのインストールを実行します。

pnpm dev にて開発サーバーを立ち上げます。

pnpm dev はNext.jsサーバーをport: 3000上で立てます。動いているか確認してみましょう。

http://localhost:3000/をブラウザで開きます。この様なホームページを確認できるはずです。意図的にスタイリングはしていません。