Next.js连接自定义PostgreSQL数据库的完整指南

Next.js连接自定义PostgreSQL数据库的完整指南

引用

CSDN

1.

https://blog.csdn.net/weixin_45314519/article/details/143135887

Next.js官方教程在第6章讲解数据库设置时，使用了Vercel的数据库和@vercel/postgres库。然而，由于网络问题或数据库容量限制，你可能需要连接自己的PostgreSQL数据库。本文将详细介绍如何在Next.js项目中实现这一需求。

安装PostgreSQL

首先，我们需要在服务器上安装PostgreSQL。这里推荐使用Docker Compose进行部署，配置如下：

version: '3.9'

services:
  db:
    image: postgres
    restart: always
    shm_size: 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库

回到Next.js项目目录，运行以下命令安装pg库：

pnpm i pg

编写SQL方法

由于不能直接使用Vercel的pg库，我们需要创建一个自定义的pg.ts文件，模仿其功能。在.env文件中添加以下环境变量：

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

然后编写pg.ts文件：

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 };

最后调整

最后，我们需要在项目中替换原有的Vercel数据库引用：

在/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成功后的效果截图：

通过本文的指导，你应该能够顺利地在Next.js项目中连接并使用自己的PostgreSQL数据库。