これはNext.jsの公式チュートリアルの6. Setting Up Your Database に関するメモです
前章のメモ
Next.jsの公式チュートリアルの該当ページ
学ぶこと
- GitHubへのpush
- Vercelheのサインアップ、VercelとGitHubの連携
- PostgreDBと自分のアプリの接続
- 初期データをDBにシード
GitHubリポジトリの作成とVercelへのデプロイ
↓の記事をご参考ください
PostgreDBの作成
↓の記事の「VercelでPostgreDBをセットアップ」をご覧ください
.env.example を .env へリネームして、PostgreDBの情報を埋めます。
POSTGRESから始まる変数を埋めてください。
最後に Vercel Postgres SDK が使えるように下記コマンドを実行します
|
1 |
npm i @vercel/postgres |
データベースのシード
初期データをDBに入れていきます。
/scripts/seed.js をというファイルを実行してinvoices, customers, user, revenueテーブルの作成とそれらにデータを投入します。
各テーブルに投入するデータは、/app/lib/placeholder-data.js から読み込んでいます
/scripts/seed.js を実行するコマンドを/package.json に追加します。
|
1 2 3 4 5 6 7 8 9 10 |
{ "private": true, "scripts": { "build": "next build", "dev": "next dev", "prettier": "prettier --write --ignore-unknown .", "prettier:check": "prettier --check --ignore-unknown .", "start": "next start", "seed": "node -r dotenv/config ./scripts/seed.js" }, |
npm run seed コマンドを実行して初期データを投入しましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
nextjs-dashboard$ npm run seed > seed > node -r dotenv/config ./scripts/seed.js Created "users" table Seeded 1 users Created "customers" table Seeded 10 customers Created "invoices" table Seeded 15 invoices Created "revenue" table Seeded 12 revenue |
データベース内を検索
Vercelの画面に戻り、作成したDBのサードバーからDataをクリックします
Choose a table をクリックすると、invoices, customers, user, revenueがあります。
各テーブルを選択すると、保存されているデータを確認できます。
例えば、customersを選択すると↓のような感じです。
クエリの実行
Queryのタブを選択すると、DBにクエリを実行できます。
試しに↓のSELECT文を実行してみましょう
|
1 2 3 4 |
SELECT invoices.amount, customers.name FROM invoices JOIN customers ON invoices.customer_id = customers.id WHERE invoices.amount = 666; |
黒い部分にSQLを張り付けて、「Run Query」をクリックすると下に実行結果が表示されます
次章のメモ
コメント