带有身份验证的 Next.js 入门模板

简介

这是一个带有身份验证的 Next.js 入门模板，旨在为初学者提供一个基础的开发环境，并展示如何在 Next.js 中添加基于 JSON Web Token 的身份验证。

技术栈

• React
• Next.js
• Node.js
• Express
• JSON Web Token

代码结构

• pages/：Next.js 页面代码
• server/：服务端代码
  • middleware/：中间件
  • routes/：路由
  • utils/：工具函数
• public/：公共资源
• .env：环境变量配置文件

如何使用

• 克隆本仓库
• 安装依赖：npm install
• 运行项目：npm run dev

示例代码

下面是一个简单的身份验证示例代码：

// server/routes/user.js

const jwt = require('jsonwebtoken')
const express = require('express')
const router = express.Router()
const { secret } = require('../config')
const { verifyToken } = require('../middleware/auth')
const { getUserByUsername } = require('../utils/user')

// 登录，返回 JWT
router.post('/login', async (req, res) => {
  const { username, password } = req.body
  const user = await getUserByUsername(username)
  if (!user || user.password !== password) {
    return res.status(401).json({ message: 'Invalid username or password' })
  }
  const token = jwt.sign({ userId: user.id }, secret, { expiresIn: '1d' })
  res.json({ token })
})

// 获取用户信息，需要身份验证
router.get('/me', verifyToken, async (req, res) => {
  const { userId } = req.user
  const user = await getUserById(userId)
  res.json(user)
})

module.exports = router

详细的代码可以参考项目仓库中的具体实现。

结语

希望这个入门模板能够对初学者有所帮助，让大家更快地熟悉 Next.js 的开发方式，并掌握身份验证的基本实现方法。