Zenn
📚

【6章】Next.jsのチュートリアルをやってみた

2025/01/06に公開
Next.js
tech

これは Next.js の公式チュートリアルの6. Setting Up Your Databaseにやってみたメモです

前章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-05/

Next.js の公式チュートリアルの該当ページ

https://nextjs.org/learn/dashboard-app/setting-up-your-database

学ぶこと

  1. GitHub への push
  2. Vercelhe のサインアップ、Vercel と GitHub の連携
  3. PostgreDB と自分のアプリの接続
  4. 初期データを DB にシード

GitHub リポジトリの作成と Vercel へのデプロイ

↓ の記事をご参考ください

https://zenn.dev/kuuki/articles/nextjs-vercel-deploy/

PostgreDB の作成

↓ の記事の「Vercel で PostgreDB をセットアップ」をご覧ください

https://zenn.dev/kuuki/articles/nextjs-use-prisma-postgresql-deploy-to-vercel/#toc3

.env.example を .env へリネームして、PostgreDB の情報(POSTGRES から始まる変数)を埋めます。

最後に Vercel Postgres SDK が使えるように下記コマンドを実行します

npm i @vercel/postgres

データベースのシード

初期データを DB に入れていきます。
/scripts/seed.jsをというファイルを実行して invoices, customers, user, revenue テーブルの作成とそれらにデータを投入します。
各テーブルに投入するデータは、/app/lib/placeholder-data.jsから読み込んでいます

/scripts/seed.jsを実行するコマンドを /package.jsonに追加します。

/package.json
{
  "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 コマンドを実行して初期データを投入しましょう！

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 だけでなく、CREATE や INSERT、DELETE も実行できます

試しに ↓ の SELECT 文を実行してみましょう

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

黒い部分に SQL を張り付けて、「Run Query」をクリックすると下に実行結果が表示されます

次章のメモ

https://zenn.dev/kuuki/articles/nextjs-tutorial-07/

Discussion