📝 简介

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

本教程适合具有一定 Next.js 基础的开发者,希望了解如何使用 Next.js 13 和 NextAuth 来实现身份验证功能。如果你不了解 Next.js,可以通过 Next.js 的官网来熟悉它。你可以 clone Github 仓库中本教程的代码本地运行,或者查看线上 Demo

本教程分为两部分:

  1. 使用 Next.jsNextAuth 搭建一个支持身份验证的网站。
  2. 白嫖数据库存储用户数据,通过 Prisma 来操作数据库,通过 Trpc 提供接口服务。

本次为第一部分。

🎨 页面设计

在本教程中,你将构建一个带有身份验证功能的网站,设计图如下。

Nextjs+NextAuth.png

  1. 首页
  2. 登录页
  3. 登录后的首页
  4. 个人信息页

你可以通过访问线上Demo来体验完成后的模样

🔨 搭建首页

首先通过命令pnpm create next-app@latest 来创建 Next.js 项目。

Untitled

创建完成后就会生成以下目录: