nextJs连接自己的PgSql数据库[简单版]

NextJs官方教程 第6章，设置数据库章节，不使用vercel，改用自己的数据库

【官方文档】Learn Next.js: Setting Up Your Database | Next.js

官方教程在第6章设置数据库时，使用了vercel数据库，同时使用了@vercel/postgres库，但是可能由于网络问题导致问题，其次 vercel 提供的数据库过小，所以考虑连接自己服务器的库。

安装PgSQL

首先在服务器安装，我使用docker compose，可参考docker hub调整配置

# Use postgres/example user/password credentials
version: '3.9'

services:
  db:
    image: postgres
    restart: always
    # set shared memory limit when using docker-compose
    shm_size: 128mb
    # or set shared memory limit when deploy via swarm stack
    #volumes:
    #  - type: tmpfs
    #    target: /dev/shm
    #    tmpfs:
    #      size: 134217728 # 128*2^20 bytes = 128Mb
    environment:
      POSTGRES_PASSWORD: Ywj@0715
      POSTGRES_DB: nextjs  
      POSTGRES_USER: ywj
    ports:  
      - "5432:5432"  
    volumes:  
      - ./data:/var/lib/postgresql/data  
      
  pgadmin:  
    image: dpage/pgadmin4
    container_name: pgadmin4 
    environment:
      PGADMIN_DEFAULT_EMAIL: "ywj@yangood.top"
      PGADMIN_DEFAULT_PASSWORD: "123456"
    ports:  
      - "3005:80"  
    depends_on:  
      - db

安装完后注意修改为本地可连接，修改pg_hba.conf令外部可访问。

安装pg库

回到nextjs项目，我们执行 pnpm i pg 安装pg库来连接自己的服务器。

编写sql方法

由于不能直接使用vercel的pg库，我们创建自己的方法 pg.ts，以下是简单仿写pg实现，减少代码改动。

注意 .env 环境变量中需设置以下内容

POSTGRES_USER="ywj"
POSTGRES_PASSWORD="ywjpwd"
POSTGRES_HOST="xxx.xxx.xxx.xxx"
PGSQL_PORT="5432"
POSTGRES_DATABASE="nextjs"

import { QueryResult } from "@vercel/postgres";
import { Pool } from "pg";

const pool = new Pool({
  user: process.env.POSTGRES_USER,
  password: process.env.POSTGRES_PASSWORD,
  host: process.env.POSTGRES_HOST,
  port: Number.parseInt(process.env.PGSQL_PORT as string),
  database: process.env.POSTGRES_DATABASE,
});

class MyPgClient {

  pool: Pool;

  constructor(pool: Pool) {
    this.pool = pool;
  }

  async sql<T extends QueryResultRow>(
    queryTemplate: TemplateStringsArray,
    ...values: (string | number | Date | null | undefined)[]
  ): Promise<QueryResult<T>> {

    const sqlString = queryTemplate.reduce(
      (acc, str, i) => acc + (i === 0 ? str : `$${i} ` + str),
      ''
    );

    try {
      const res: QueryResult<T> = await pool.query({ text: sqlString, values });
      return res as QueryResult<T>;
    } catch (error) {
      console.error('Error executing query:', error);
      throw error;
    }
  }
}

const client = new MyPgClient(pool);

async function sql<T extends QueryResultRow>(
  queryTemplate: TemplateStringsArray,
    ...values: (string | number | Date | null | undefined)[]
): Promise<QueryResult<T>> {
  return client.sql(queryTemplate, ...values)
}

export { pool, sql, client };

最后调整

替换 /app/seed/route.ts 中的代码

// import { db } from '@vercel/postgres';
import { client } from '@/app/scripts/pg';

替换 /app/lib/data.ts 中的代码

// import { sql } from '@vercel/postgres';
import { sql } from '@/app/scripts/pg';

完成！可以继续进行教程中的seed步骤。

效果图

以下是我执行seed后效果图，可以看到执行成功，且数据已经入库。

面板查询如图。

希望能给到初学者一些帮助。