Next.jsでVercel Postgesを使う〜Vercel Postgresの使い方〜

この記事を読んだ後に理解できること

Vercel Postgresの使用方法
Next.jsでVercel Postgresを使用する方法

前提

VercelにNext.jsプロジェクトが存在していることを前提としています。

リポジトリのインポートやVercelへの登録方法はこちらの記事で解説しています。

Vercel Postgresの概要についてはこちらの記事で解説しています。

Vercel Postgresの料金や制限についてはこちらの記事で解説しています。

Vercel Postgresの使用方法

必要パッケージのインストール

Vercelに登録済みのローカルリポジトリにVercel Postgresのパッケージをインストールします。

もし、ローカル上でVercelのパッケージをインストールしていない場合は、インストールしておくとこの後の作業が楽になります。

$ npm i @vercel/postgres
$ npm i -g vercel@latest

Vercel PostgresのDBを作成する

まずは、Vercelダッシュボードにログインしてください。

ログインしたらページ上部にあるstorageタブをクリックしてください。
（画像赤枠）

Postgresの右にあるCreateをクリックしてください。

表示されたモーダルでもPostgresを選択してContinueをクリックしてください。

Vercel Postgresを利用する上での注意点について同意します。

データベース名及びリージョンを設定して、Create & Continueをクリックしてください。
この時、functionやedgeのリージョンと同じもしくは近いリージョンを設定することでレイテンシーを低くすることができます。

選択肢の中に日本リージョンが存在していなかったため、シンガポールリージョンを選択しました。

自分のプロジェクトのfunctionのリージョンは、SettingsタブのFunctionsメニューで確認・変更することができます。

どの環境でDBのアクセスを許可するかや環境変数のプレフィックスを変更することができます。

VercelダッシュボードでのVercel PostgresのDB作成作業は以上です。

ローカルリポジトリでの作業

Vercel Postgres DBへの接続情報を取得する

vercelコマンドを使って、OAuth連携しているアカウントでVercelにログインします。

$ vercel login --github

ローカルリポジトリとVercelプロジェクトの紐付けができていない場合は、以下コマンドで紐付けを行います。

$ vercel link

あとはターミナル上の指示に従って、紐付けを行ってください。

紐付けが終わったら、以下コマンドでVercel Postgresで作成したDBに接続するための環境変数の情報を取得できます。

$ vercel env pull .env.development.local

※VercelダッシュボードからもDBの接続に必要な環境変数を確認することはできます。

Next.jsでテーブルの作成と情報の取得を行う

pages/apiディレクトリにtsファイルを作成します。
ファイル名はなんでも大丈夫です。
用途に合わせて命名してください。

今回は、公式ドキュメントに合わせて、pages/api/pets.tsを作成します。
（公式ドキュメントから引用）

// pages/api/pets.ts
import { db } from '@vercel/postgres';
import { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  const client = await db.connect();
 
  try {
    await client.sql`CREATE TABLE Pets ( Name varchar(255), Owner varchar(255) );`;
    const names = ['Fiona', 'Lucy'];
    await client.sql`INSERT INTO Pets (Name, Owner) VALUES (${names[0]}, ${names[1]});`;
  } catch (error) {
    return response.status(500).json({ error });
  }
 
  const pets = await client.sql`SELECT * FROM Pets;`;
  return response.status(200).json({ pets });
}

一見、sql文をハードコーディングしているように見えますが、@vercel/postgresを使うことでSQLインジェクションから防ぐことができます。

あとはローカルで/api/petsを実行すれば、テーブルの作成と作成したデータの取得を行うことができます。

Vercelダッシュボードでもテーブルが作成されていること及びデータが作成されていることを確認できます。

※参考

ホーム