Summary  
This chapter explains how to configure and connect a PostgreSQL database to your project by setting environment variables and installing the required dependency.  

General domain of usage  
Web application backends

このプロジェクトでは、Postgres データベースを使用します。Vercel でのセットアップ方法を確認します。

## 手順
1. 「Continue to Dashboard」をクリック;
2. ヘッダータブから「Storage」を選択;
3. 「Postgres (Serverless SQL)」を作成;
4. 利用規約に同意;
5. データベース名を入力し、「Create and Continue」をクリック;
6. 「Connect」ボタンをクリック。

データベースを作成し接続した後、作業するためにデータベースをセットアップし、データを投入する必要があります。

## 手順
1. ".env.local" タブにアクセス;
2. 必要なすべてのデータが揃っていることを確認:
   - `POSTGRES_URL`;
   - `POSTGRES_PRISMA_URL`;
   - `POSTGRES_URL_NON_POOLING`;
   - `POSTGRES_USER`;
   - `POSTGRES_HOST`;
   - `POSTGRES_PASSWORD`;
   - `POSTGRES_DATABASE`.
3. すべてのデータをコピーし、プロジェクトに移動;
4. プロジェクトルートにある `.env.example` ファイルを見つけ、`.env` にリネーム;
5. Vercel からコピーしたデータを貼り付け;
6. 最後に、ターミナルを開き `npm i @vercel/postgres` を実行して Vercel Postgres をインストール。

最後のステップは、データベースにデータを投入することです。次の章でこの作業に注目します。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

プロジェクトデータベースの設定

手順

手順

実践例