ゼロから学ぶ React, Next.js⑧【Learn Next.js】Introduction & Chapter1

【Introduction】Learn Next.js

Next.jsアプリケーションルーターコースへようこそ！このインタラクティブな無料コースでは、フルスタックWebアプリケーションを構築しながら、Next.jsの主な機能を学ぶことができます。

構築するアプリケーション

このコースでは、次のような機能を持つ簡略化された財務ダッシュボードを構築します：

• 公開ホームページ
• ログインページ
• 認証で保護されたダッシュボードページ
• ユーザーが請求書を追加、編集、削除できる機能

ダッシュボードには付随するデータベースも用意し、後の章でセットアップします。

コースの最後には、フルスタックのNext.jsアプリケーションを構築するために必要な基本スキルが身につきます。

概要

このコースで学ぶ機能の概要は以下の通りです：

• スタイリング：Next.jsでアプリケーションをスタイリングするさまざまな方法。
• 最適化：画像、リンク、フォントを最適化する方法。
• ルーティング：ファイルシステムルーティングを使用してネストされたレイアウトとページを作成する方法。
• データフェッチ：Vercelでデータベースをセットアップし、フェッチとストリーミングのベストプラクティス。
• 検索とページネーション：URLの検索パラメーターを使用して検索とページネーションを実装する方法。
• データの変更：React Server Actionsを使用してデータを変更し、Next.jsキャッシュを再検証する方法。
• エラー処理：一般的なエラーと404Not Foundエラーの処理方法。
• フォームの検証とアクセシビリティ：サーバーサイドでのフォーム検証とアクセシビリティを向上させるためのヒント。
• 認証：NextAuth.jsとミドルウェアを使用してアプリケーションに認証を追加する方法。
• メタデータ：メタデータを追加し、アプリケーションをソーシャルシェアリングに対応させる方法。

前提知識

このコースでは、ReactとJavaScriptの基本的な理解があることを前提としています。Reactが初めての方は、まずReact Foundationsコースを受講して、コンポーネント、prop、ステート、フック、サーバーコンポーネント、サスペンスなどのReactの基礎を学ぶことをお勧めします。

システム要件

このコースを始める前に、システムが以下の要件を満たしていることを確認してください：

• Node.js 18.17.0以降がインストールされていること。こちらからダウンロード。
• オペレーティングシステム：macOS、Windows（WSLを含む）、Linux。

また、GitHubアカウントとVercelアカウントも必要です。

コミュニティに参加しよう

このコースについての質問やフィードバックがある場合は、DiscordやGitHubでコミュニティに質問することができます。

【Chapter1】はじめに

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

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

Terminal

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

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

メモ：--exampleフラグ

--exampleフラグを使用することでNext.js のサンプル集や任意の公開 GitHub リポジトリを使用してアプリケーションを開始できます^[1]。

プロジェクトの探索

一からコードを書くチュートリアルとは異なり、このコースのコードの多くは既に書かれています。これは、既存のコードベースで作業することが多い実際の開発環境を反映しています。

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

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

Terminal

cd nextjs-dashboard

では、プロジェクトを探索しましょう。

フォルダ構造

プロジェクトには以下のようなフォルダ構造があることがわかります：

ダッシュボードプロジェクトのフォルダ構造は、主なフォルダとファイル（app、public、configファイル）を示しています。

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

これらのフォルダを自由に探索してください。コードが何をしているのかすべてを理解できなくても心配しないでください。

プレースホルダーデータ

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

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

このプロジェクトでは、app/lib/placeholder-data.jsにいくつかのプレースホルダーデータを用意しました。ファイル内の各JavaScriptオブジェクトは、データベースのテーブルを表しています。例えば、invoicesテーブルは以下のようになります：

/app/lib/placeholder-data.js

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ファイルを見てみましょう。ここでは、データベースから返されるタイプを手動で定義しています。例えば、invoicesテーブルには以下のようなタイプがあります：

/app/lib/definitions.ts

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

TypeScriptを使用することで、コンポーネントやデータベースに誤ったデータ形式（例えば、請求書の金額に数値の代わりに文字列を渡すなど）を誤って渡さないようにすることができます。

TypeScript開発者の方へ：

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

---

開発サーバーの実行

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

Terminal

npm i

続いて、npm run devを実行して開発サーバーを起動します。

Terminal

npm run dev

npm run devは、ポート3000でNext.js開発サーバーを起動します。うまく動作しているか確認しましょう。ブラウザでhttp://localhost:3000を開きます。ホームページは次のようになっているはずです：

---

次の章

https://zenn.dev/gunjo/articles/b1569f8d5ec5bf

脚注

1. Create Next App を使う理由