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

これはNext.jsの公式チュートリアルの6. Setting Up Your Database に関するメモです

前章のメモ

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

これはNext.jsの公式チュートリアルの5. Navigating Between Pages に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ ...

Next.jsの公式チュートリアルの該当ページ
学ぶこと
GitHubリポジトリの作成とVercelへのデプロイ
PostgreDBの作成
データベースのシード
データベース内を検索
クエリの実行

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

Learn Next.js: Setting Up Your Database | Next.js

Setup a database for your application and seed it with initial data.

学ぶこと

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

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

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

【Vercel】Next.jsアプリをデプロイしてみる

Next.jsで作ったアプリをVercelへデプロイしてみます。今回はVercelのコンソールを使用して構築していきます Terraformでの設定方法はこちら Vercelとは？？ ...

PostgreDBの作成

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

【Next.js】PrismaをつかったアプリをVercelにデプロイしてみる

Prismaを使ったNext.jsアプリケーションをVercelにデプロイしてみます。 DBもVercelのものを使用してデプロイに挑戦します！！デプロイするアプリケーション ↓の記事で作成したも...

.env.example を .env へリネームして、PostgreDBの情報を埋めます。

POSTGRESから始まる変数を埋めてください。

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

npm i @vercel/postgres

1	npm i @vercel/postgres

データベースのシード

初期データをDBに入れていきます。

/scripts/seed.js をというファイルを実行してinvoices, customers, user, revenueテーブルの作成とそれらにデータを投入します。

各テーブルに投入するデータは、/app/lib/placeholder-data.js から読み込んでいます

/scripts/seed.js を実行するコマンドを/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"
  },

{

"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

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;

SELECT invoices.amount, customers.name

FROM invoices

JOIN customers ON invoices.customer_id = customers.id

WHERE invoices.amount = 666;

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

次章のメモ

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

これはNext.jsの公式チュートリアルの7. Fetching Data に関するメモです前章のメモ Next.jsの公式チュートリアルの該当ページ学ぶこと ...