はじめに

無料でDBを使いたいと思い探した結果、Vercelで無料のpostgresができるとのことだったので、試してみた。

環境構築

Next.js の準備

npx create-next-app@latest

No / Yes の選択肢が出たらすべてOKで大丈夫
もしくはVercelのホームページからテンプレートから作成しても良い
自分はTSのみ選択肢を変えてYesにした(スクショは異なるが)。

npm run dev

http://localhost:3000/で確認することができる。

Github と Vercel を連携する

VercelとGihubが繋がっている状態なら、簡単に取り込むことができる。
もしくはVercelからテンプレートを作成することが、簡単にGithubに取り込むことも可能。

連携された状態のプロジェクト

Githubのデータに基づいて、Vercelでhostingされる。

postresを導入

プロジェクト → Storage → Connect Store ボタンをクリック

４つほどの選択肢があるが、今回はPostgresを選択

プロジェクト → Settings → Environment Variables

postgresへの接続はとても簡単で、.envの情報が自動で入力された状態にある。
local環境で同じくDBとつなぐためには、envデータをコピーし、ローカルでenv.localを作成し、移すのみ

env.local

POSTGRES_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_USER=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_DATABASE=

接続の確認

npm i @vercel/postgres
npm run dev

app/page.tsx



import { sql } from "@vercel/postgres";

export default async function Home() {

  const drop = await sql`
  drop table if exists  test;`

  const create = await sql`
  create table test(
    id serial primary key,
    name text
    );`

  const insert = await sql`
  insert into test(name) values('test good');
  `
  
  const { rows } = await sql`select * from test;`
  console.log(rows)

  return (
    <div>
      {rows.map((row) => (
        <div key={row.id}>
          {row.id} - {row.name}
        </div>
      ))}
    </div>
  );
}

terminal

[ { id: 1, name: 'test good' } ]

終わりに

サーバーレスでDBと連携しながら動かしていることがとにかくすごい。
hostingも簡単にできてしまうので、手軽に公開するためのweb siteとしてはとても使い勝手がよろしいと思われる。

[TS] Next.js + postgresの環境構築