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

2022-11-08 15:38:49 阅读：274 来源： 互联网

首先，我们将实现 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服务器。

标签：数据库,站点,文件,架构,数据,服务器,创建,结束,设置
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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