最新nextjs中使用postgresSQL

最新推荐文章于 2025-03-19 22:11:12 发布

不cong明的亚子

最新推荐文章于 2025-03-19 22:11:12 发布

阅读量1.2k

点赞数 29

分类专栏： nodejs 大前端文章标签：数据库 postgresql nextjs

本文链接：https://blog.csdn.net/qq_36579455/article/details/142928307

版权

nodejs 同时被 2 个专栏收录

4 篇文章

订阅专栏

大前端

3 篇文章

订阅专栏

背景

实现一个自己的博客编辑系统，涉及到数据的存取，本章主要介绍怎么在nextjs中接入和使用数据库。

技术栈

nextjs@14.2.* app-router
@vercel/postgres@0.10.*。
会使用vercel部署应用

安装

npm i -S @vercel/postgres

前言

本文其实没什么技术难点，基本上就是博主将自己的一次使用过程整理输出，便于初学者可以快速的建立一个数据库，并且在项目中运用起来。

门槛

会使用vercel部署项目的同学

不会使用的别走，上手其实不难的，自己花半个小时就可以了，网上很多现成教学的。

开始

到这里，我就默认所有同学已经使用vercel部署好了自己的nextjs应用以及数据库的创建（如果没有鼓捣出来部署的，可以评论区留言，博主愿意给大家出一版本手摸手的vercel使用教程）。

官方文档

将postgres database配置从vercel平台上拿下来
在nextjs项目根目录创建.env文件，（加到.gitignore文件中）
初次使用@vercel/postgres来创建一张表，提供三种方案【第一次使用，博主推荐第一种方案就行】

第一种：需要在vercel平台中使用，首页中找到Storage, 选择自己需要操作的数据库，进去之后侧边栏打开data, 然后在Query中输入sql语句CREATE TABLE Pets ( Name varchar(255), Owner varchar(255) ); 然后run query

第二种：代码中执行sql语句
```
import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';

export async function GET() {
   	const firstTable = await sql`CREATE TABLE Pets ( Name varchar(255), Owner varchar(255) );`;
    return NextResponse.json({ status: 200 });
}    
```
第三种：这里很多后端同学会觉得，这种方式也太不方便了，也不好维护啊，那么肯定有不一样的方式已经让前人处理好了，看这篇文档接入ORM
添加一些数据到我们的第一张表

import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';
 
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const petName = searchParams.get('petName');
  const ownerName = searchParams.get('ownerName');
 
  try {
    if (!petName || !ownerName) throw new Error('Pet and owner names required');
    await sql`INSERT INTO Pets (Name, Owner) VALUES (${petName}, ${ownerName});`;
  } catch (error) {
    return NextResponse.json({ error }, { status: 500 });
  }
 
  const pets = await sql`SELECT * FROM Pets;`;
  return NextResponse.json({ pets }, { status: 200 });
}