将数据库洒入 Next.js 和 Vercel 上的静态站点

首先，我们将实现 UI。

import { useState } from 'react'
import { MdThumbUp } from 'react-icons/md'

export default function Component(props) {
  const [likeCount, setLikeCount] = useState(props.likeCount)
  const [liked, setLiked] = useState(false)
  const createLike = async () => {
    if (liked === false) {
      // TODO: create like
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }
  return (
    <>
      <span className={liked ? 'text-blue-500' : undefined}>
        <span
          onClick={createLike}
          className="ml-4 mb-4 align-bottom cursor-pointer inline-block bg-white border-2 border-gray-800 rounded-full px-4">
          <MdThumbUp className="inline mr-2" />
          {likeCount}
        </span>
      </span>
      <span className="inline-block ml-4 mb-4 align-bottom">
        {liked && <span>Thank you!</span>}
      </span>
    </>
  )
}

就数据库而言，TODO: create like

  const createLike = async () => {
    if (liked === false) {
      // TODO: create like
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }

和。likeCount

const [likeCount, setLikeCount] = useState(props.likeCount)

现在，我们将准备PostgreSQL和Prisma，一个用Node.js制作的ORM。

yarn add prisma

这是架构文件。
喜欢模型非常简单。prisma/schema.prisma

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Like {
  id    Int     @id @default(autoincrement())
}

我们将生成并安排迁移。

yarn run prisma migrate dev

接下来，我们将生成 prisma 客户端来访问数据库。

yarn run prisma generate

然后，我们将实现实际访问数据库的部分。

如果从页面导出调用（服务器端呈现）的函数，Next.js 将使用返回的数据在每个请求上预呈现此页面。所以，我们喜欢在这里依靠并设置道具。getServerSidePropsgetServerSideProps

// pages/index.js

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default function Home(props) {
  //...
}

export async function getServerSideProps(context) {
  const likeCount = await prisma.like.count()
  return {
    props: { likeCount: likeCount }
  }
}

然后是喜欢的更新部分。我们将创建后端点以创建类似记录

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default async function handler(req, res) {
  const like = await prisma.like.create()
  res.status(201).json(like)
}

并将获取过程添加到回调。

  const createLike = async () => {
    if (liked === false) {
      fetch('/api/like/create')
      setLikeCount(likeCount + 1)
      setLiked(true)
    }
  }

实现部分到此结束。

接下来，让我们设置 Vercel 以使用 Prisma 并准备一个 PostgreSQL 服务器。

我在 render.com 有一个PostgreSQL服务器。