在NextJS v13.4中如何用Mongoose实现POST请求？

1. 无需修改lib/dbConnect.js #

你的dbConnect.js已经是标准的Next.js Mongoose连接缓存实现，直接使用即可，无需改动。

2. 编写API路由：app/new/route.ts #

这个文件负责接收前端POST的用户数据，连接数据库并写入MongoDB：

import dbConnect from '@/lib/dbConnect';
import User from '@/models/User';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  try {
    // 连接数据库
    await dbConnect();

    // 解析请求体JSON数据
    const { name, email, password, country } = await request.json();

    // 创建用户文档实例
    const newUser = new User({
      name,
      email,
      password, // 注意：生产环境必须用bcrypt等工具加密密码
      country
    });

    // 保存到数据库
    await newUser.save();

    // 返回成功响应
    return NextResponse.json(
      { message: '用户创建成功', user: newUser },
      { status: 201 }
    );
  } catch (error) {
    // 返回错误信息
    return NextResponse.json(
      { message: '创建用户失败', error: (error as Error).message },
      { status: 400 }
    );
  }
}

3. 编写带表单的页面：app/new/page.tsx #

注意：在Next.js App Router中，route.ts是API路由，带交互的页面需放在page.tsx中：

'use client'; // 启用客户端交互逻辑

import { useState } from 'react';

export default function NewUserPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    country: ''
  });
  const [message, setMessage] = useState('');

  // 处理表单输入变化
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 处理表单提交，发起POST请求
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setMessage('');

    try {
      const response = await fetch('/new', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();
      if (response.ok) {
        setMessage(data.message);
        // 重置表单
        setFormData({ name: '', email: '', password: '', country: '' });
      } else {
        setMessage(data.message);
      }
    } catch (error) {
      setMessage('请求失败，请稍后重试');
    }
  };

  return (
    <div className="max-w-md mx-auto mt-10">
      <h1 className="text-2xl font-bold mb-4">创建新用户</h1>
      {message && (
        <p className={`mb-4 p-2 rounded ${message.includes('成功') ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
          {message}
        </p>
      )}
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block mb-1" htmlFor="name">姓名</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1" htmlFor="email">邮箱</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1" htmlFor="password">密码</label>
          <input
            type="password"
            id="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            required
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1" htmlFor="country">国家</label>
          <input
            type="text"
            id="country"
            name="country"
            value={formData.country}
            onChange={handleChange}
            required
            className="w-full p-2 border rounded"
          />
        </div>
        <button
          type="submit"
          className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
        >
          创建用户
        </button>
      </form>
    </div>
  );
}

关键注意事项 #

• 密码加密：生产环境禁止明文存储密码，需使用bcrypt等库加密后再存入数据库。
• 类型安全：如果使用TypeScript，建议给User模型添加类型定义，或启用Mongoose的TypeScript支持。
• 表单验证：可在前端或后端添加额外验证逻辑，比如邮箱格式检查、密码强度校验等。

内容的提问来源于stack exchange，提问作者in43sh