【06】Next.js app routerのチュートリアルやってみる(DBのセットアップ)

はじめに

Next.js app routerのチュートリアルの第６章のアウトプットします。

前の記事

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

【02】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8

【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74

【04】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/62f9beccbfe36eaf7f90

【05】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/8b71b1d1df7c9435a9c9

第６章 データベースのセットアップ

この章では下記を学習しました。

• プロジェクトをGitHubにプッシュする
• vercelにプロジェクトをデプロイする
• Postgresデータベースをセットアップする
• データベースに初期データを入れる

今回やったことは私が前に記事を書いたことがあったので、この記事には書きません。

見たい方は下記のリンクからお願いします。

知らなかったこと

上の記事では触れていないことがいくつかあったので書きます。

Vercel Postgres SDK

npm i @vercel/postgres

このコマンドで、Vercel Postgres SDKというものをインストールできるそうです。

具体的な使い方は次回以降出てくると思います。

データベースをシードする

データベースにおける初期データのことをシード(種)というらしいです。

長いので割愛していますが、下記のようにJavaScriptファイルにSQLを記述することでシードデータを作ります。

seed.js

const { db } = require('@vercel/postgres');
const {
  invoices,
  customers,
  revenue,
  users,
} = require('../app/lib/placeholder-data.js');
const bcrypt = require('bcrypt');

async function seedUsers(client) {
  try {
    await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
    // Create the "users" table if it doesn't exist
    const createTable = await client.sql`
      CREATE TABLE IF NOT EXISTS users (
        id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
        name VARCHAR(255) NOT NULL,
        email TEXT NOT NULL UNIQUE,
        password TEXT NOT NULL
      );
    `;

    // ...
    

そして、作成したシードデータを挿入するために、下記のようにpackage.jsonを書き換えて、

npm run seedでシードデータの挿入が完了です。

package.json

"scripts": {
  "build": "next build",
  "dev": "next dev",
  "start": "next start",
+ "seed": "node -r dotenv/config ./scripts/seed.js"
},

おわりに

次はデータフェッチです。

次の記事