最新nextjs中使用postgresSQL

背景

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

技术栈

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

安装

npm i -S @vercel/postgres

前言

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

门槛

会使用vercel部署项目的同学

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

开始

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

官方文档

1. 将postgres database配置从vercel平台上拿下来
   

2. 在nextjs项目根目录创建.env文件，（加到.gitignore文件中）

3. 初次使用@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

4. 添加一些数据到我们的第一张表

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

访问 https://localhost:3000/api/add-pet?petName=111&ownerName=222
然后你就会看到，具体查询到数据表的数据。

后续

关于postgres database博主会持续更新使用

原文地址：https://blog.csdn.net/qq_36579455/article/details/142928307

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！