Next.js13 + NextAuth Starter Part2

📝 简介

本教程将向你介绍如何使用 Next.js 13 和 NextAuth 快速构建带有身份验证功能的网站，你可以在此教程中学到 Next.js, NextAuth, Prisma, Trpc等流行技术的基本使用方法及其优点。

这是教程的第二部分，你可以在这里查看第一部分。

🚧 存储用户数据

我们完成了一个带有身份验证的网站，但是因为用户信息只存在cookie中，如果需要提供更完整的服务，需要将用户信息存在数据库中。以下将介绍如何通过 Prisma 配合 NextAuth 将用户信息存入数据库中，以及通过 Trpc 提供Api服务。

数据库

以下是一些提供免费使用(free tier)的服务：

Vercel storage	Postgres	提供1 个免费数据库，更多数据库需要开通 $20/month 的 pro 订阅后按每个数据库 $1 的价格购买
Neon	Postgres	提供1个免费数据库，没有固定订阅费，按量付费
Supabase	Postgres	提供2个免费项目，$25/month 订阅费。
PlanetScale	MySQL	提供1个免费数据库，$29/month 订阅费

本教程选用 Supabase ，在 Supabase 上创建一个项目后，在 Project Settings ⇒ Database ⇒ Connection string 中找到数据库连接，保存下来，后续会在用到。

下一代 ORM — Prisma

Prisma 是一个流行的开源数据库工具，用于简化和增强应用程序与数据库之间的交互。与传统的 ORM 不同的是 Prisma 使用声明性数据建模，并且提供类型安全的查询构造器。

安装 Prisma

pnpm add prisma -D

设置 Prisma

npx prisma init

Prisma 会自动生成模型文件 prisma/schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: <https://pris.ly/d/prisma-schema>

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

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

model User {
  id    Int    @id @default(autoincrement())
  name  String
  email String @unique
  posts Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

除此以外还需要在 .env 文件中设置 DATABASE_URL 环境变量，变量值就是之前在 Supabase 中保存的。