Vercel/NeonをNextjsで使ってみた。

Nextjsの勉強のために気軽に使えるデータベースを探したところNeonを発見。
備忘録的にまとめます。

Nenoとは、サーバレスで設計されたPostgreベースのデータベースサービスです。
無料範囲でも色々と試せます。

●Vercelで使う方法
Vercelのアカウントを作成する。（GitHub連携）
「Storage」メニューから「Create Database」を選択

Marketplace Database Providersから
「Neon」（Serverless Postgres）を選択して、「Continue」
Region：Singapore（シンガポール）でいいと思う。（データを保持する国を選択することになるので企業で開発する場合は輸出管理などを検討必要がある）
Installation　Plans：Free　「Continue」
DataBse Name：任意の名前でOK。「Create」

一瞬で環境が構築されるので、Open in Neonをクリックしよう。別タブでコンソールが開くはずです。

Project Dashboadの「Connect」で「Connection-String」を確認できます。

例えば、React/Nextjsの場合、ルートフォルダに「.env.local」ファイルを作成して、下記のように接続情報を記載する事で接続可能になります。

 ATABASE_URL="Connection-String" 

コンソールに戻って、左ナビゲーションの「SQL Editor」からSQLを実行できます。

試しにテーブルを作成してみます。
●テーブル作成

CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP NOT NULL
);

下図のようにSQL文を選択して、「RUN」をクリック。

●データの登録

INSERT INTO events (title, start, end) VALUES
('会議', '2025-04-15 10:00:00', '2025-04-15 11:00:00'),
('ランチミーティング', '2025-04-16 12:00:00', '2025-04-16 13:00:00');

●データの確認

SELECT * FROM events;

「events」というテーブル名でを作成してみました。

試しに、このテーブルからイベント情報を取ってきて、画面に表示させてみます。

●nextjsのプロジェクトにnpm install pgでPostgresSQL用のライブラリ「pg」をインストールします。

npm install pg

※まだプロジェクトを作成していない場合はVSCodeで任意のフォルダを開き

npx create-next-app@latest

で作成します。一旦試したいだけならプロンプトの選択は全て「No」に。

次にpages/apiフォルダ（なければ作成）にevents.jsを作成します。

import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false, // Neon用に必要な設定
  },
});

export default async function handler(req, res) {
  try {
    const result = await pool.query('SELECT * FROM events');
    const events = result.rows.map(row => ({
      id: row.id,
      title: row.title,
      start_time: row.start_time,
      end_time: row.end_time,
    }));
    res.status(200).json(events);
  } catch (error) {
    console.error('DB取得エラー:', error);
    res.status(500).json({ message: '内部サーバーエラー' });
  }
}

最後にフロントエンド側で作成した/api/eventsをfetchしてデータを取得します。
例えば、index.jsに下記を記述。

import { useEffect, useState } from 'react';　//追加

export default function Home() {

//追加
  useEffect(() => {
    fetch('/api/events')
      .then(res => res.json())
      .then(data => console.log('取得成功', data))
      .catch(err => console.error('イベント取得エラー:', err));
  }, []);
//追加ここまで

  return (
...省略（変更なし）
)

yarn devで起動して、ブラウザの開発者ツールを立ち上げます。(windows PCの場合はCnrl+Shift+I）
console.logにテーブルから取得したデータが確認できると思います。

以上です。
少しでもご参考になれば幸いです。

バージョン情報

    "next": "15.3.0",
    "pg": "^8.14.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"