初めに
Webアプリ開発では近年Next.jsがトレンドのようなので自己学習のためにチュートリアルをやってみます。基本的には翻訳した内容となるのでご了承ください。
JavaScriptやReactの前提知識が必要となるため、Reactが初めての方はこちらの記事で理解を深めておくことをお勧めします。
Next.js公式のReactチュートリアルをやってみる
チュートリアルの内容
Next.jsのチュートリアルでは簡易版財務ダッシュボードアプリをフルスタックで作ることができ、ダッシュボードは以下の機能を持ちます。
- 公開ホームページ
- ログインページ
- 認証で保護されたダッシュボードページ
- ユーザーによる請求書の追加、編集、削除機能
また、このダッシュボードアプリではデータベースも使用します。
| 機能 | 内容 |
|---|---|
| スタイリング | Next.jsでアプリケーションをコーディングする様々な方法 |
| 最適化 | 画像、リンク、フォントの最適化する方法 |
| ルーティング | ファイルシステムのルーティングを使用して、ネストされたレイアウトとページを作成する方法 |
| データフェッチ | Vercelでデータベースをセットアップする方法とフェッチと配信のベストプラクティス |
| 検索とページネーション | URL Search Paramsを使用した検索とページネーションの実装方法 |
| データの変異 | React Server Actionsを使用してデータを変異させ、Next.jsキャッシュを再検証する方法 |
| エラー処理 | 一般的なエラーと404 not found エラーの処理方法 |
| フォーム検証とアクセシビリティ | サーバーサイドでのフォーム検証の方法とアクセシビリティ向上のヒント |
| 認証 | NextAuth.jsとミドルウェアを使用してアプリケーションに認証を追加する方法 |
| メタデータ | メタデータを追加し、ソーシャル共有のためにアプリケーションを準備する方法 |
プロジェクトの作成
パッケージマネージャーの選定
npmやyarnよりもpnpmのほうが高速で効率的なので、Next.jsはpnpmをお勧めしているようです。未インストールの方は公式に習ってpnpmをグローバルでインストールして使用しましょう。
npm install -g pnpmNext.jsアプリの作成
アプリを作成するディレクトリでターミナルを開いて以下のコマンドを入力しましょう。Next.jsアプリケーションをセットアップするcreate-next-appを使用します。--exampleフラグにはNext.js公式のスターターサンプルを指定しています。
npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpmプロジェクトの内容確認
Next.jsのスターターサンプルを使用してセットアップを行ったため、すでに様々なコードが書かれています。今回の目的は『アプリケーションの開発』ではなく『学習』なので、学習に集中できるようにコードを用意したようです。
それでは用意されたnextjs-dashboardフォルダの中身を確認していきましょう。
フォルダ構造
| フォルダ・ファイル等 | 内容 |
|---|---|
| /app | すべてのルート、コンポーネント、ロジックが含まれていて、基本的にはこの中で作業することになります。 |
| /app/lib | 再利用可能なユーティリティ関数やデータフェッチ関数等、アプリケーションで使用される関数が含まれています。 |
| /app/ui | カード、テーブル、フォームなど、アプリケーションのすべてのUIコンポーネントが含まれています。今回はスタイル設定済み。 |
| /public | 画像など、アプリケーションのすべての静的アセットが含まれています。 |
| Config Files | next.config.js等の設定ファイル。create-next-appを使用してプロジェクトを開始するときに作成される。今回は事前に設定されているため修正不要です。 |
プレースホルダー・データ
UIを構築する際はプレースホルダー・データがあると便利な模様。データベースやAPIがまだ利用できない場合は以下の方法で用意することが可能です。
- JSON形式もしくはJavaScript オブジェクトとして使用する
- mockAPIのようなサードパーティ・サービスを使用する
スターターサンプルではapp/lib/placeholder-data.tsにデータが用意されています。このファイル内の各JavaScriptオブジェクトはデータベースのテーブルを表しています。
データベースのセットアップの章では、このデータを使用してデータベースのシードを行います。
TypeScript
ファイルの拡張子が.jsや.jsxではなく、.tsや.tsxであることに気が付いたと思います。ほとんどのプロジェクトではJavaScriptではなくTypeScriptで書かれているため、このチュートリアルでもTypeScriptを使用しています。
基本的にはJavaScriptと似ていますが、静的型付け言語であるのが特徴です。/app/lib/definitions.tsファイルを見てみましょう。
export type Invoice = {
id: string;
customer_id: string;
amount: number;
date: string;
status: 'pending' | 'paid';
};静的型付け言語を使用したことのある方はわかると思いますが、stringは文字を表す『文字列』、numberは文字通り『数値』を表しています。statusプロパティが特殊で|で区切られていますが、これはユニオン型と呼ばれます。
これはstatusプロパティには"pending"もしくは"paid"のどちらかしか指定できないように絞り込むことができます。今回は両方文字列なのでstringの絞り込みですが、異なる型を指定することも可能です。
このようにTypeScriptを使用することで、コンポーネントやデータベースに間違ったデータ形式を渡さないように防ぐことができます。JavaScriptだと請求書の金額を表す数値型のamountに文字列を渡すということが起こりえるのです。
ORM
Next.jsのチュートリアルではデータ型を手動で宣言していますが、型の安全性を高めるために、データベーススキーマに基づいて型を自動生成するPrismaやDrizzleを使用することを推奨しているようです。
開発者用サーバーの起動
コードの確認が終わったところで、pnpm iを実行し、パッケージのインストールを行いましょう。
その後、pnpm devを実行して開発者用サーバーを起動します。
開発者用サーバーのポート番号は3000となっているため、ブラウザでhttp://localhost:3000にアクセスしてホームページを確認してみましょう。
以下の内容と右矢印が表示されているページが表示されれば準備完了です。
Welcome to Acme. This is the example for the Next.js Learn Course, brought to you by Vercel.
Log in次の記事
Next.jsのチュートリアルをやってみる【CSS編】