{
  "_id": "6651a2b3c4d5e6f7a8b9c0d1",
  "title": "我的第一篇文章",
  "content": "Hello MongoDB！",
  "author": "zyyc",
  "createdAt": "2026-06-12T08:00:00.000Z"
}

第1步：打开 https://www.mongodb.com/atlas
第2步：点击 "Try Free" → 用邮箱注册
第3步：创建组织（Organization）→ 随便填名字
第4步：创建项目（Project）→ 随便填名字
第5步：创建集群（Cluster）→ 选 M0 FREE（免费的那个）
第6步：选择云服务商和地区 → 选 AWS + 新加坡（离中国近）
第7步：点击 "Create Cluster" → 等待 1-3 分钟创建完成

第1步：左侧菜单 → Security → Database Access
第2步：点击 "Add New Database User"
第3步：用户名和密码自己定（记住！后面要用）
第4步：权限选 "Read and write to any database"
第5步：点击 "Add User"

第1步：左侧菜单 → Security → Network Access
第2步：点击 "Add IP Address"
第3步：点击 "Allow Access from Anywhere"（会自动填 0.0.0.0/0）
第4步：点击 "Confirm"

第1步：回到 Clusters 页面
第2步：点击 "Connect" 按钮
第3步：选 "Drivers" → 选 "Node.js"
第4步：复制连接字符串，格式如下：

mongodb+srv://<用户名>:***@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority

mongodb+srv://zyyc:***@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

npm install mongoose

MONGODB_URI=mongodb+srv://zyyc:***@cluster0.abc123.mongodb.net/myblog?retryWrites=true&w=majority

// lib/mongodb.js
import mongoose from 'mongoose'

const MONGODB_URI = process.env.MONGODB_URI

if (!MONGODB_URI) {
  throw new Error('请在 .env.local 文件中设置 MONGODB_URI 环境变量')
}

// 用一个全局变量缓存连接，避免热重载时重复连接
let cached = global.mongoose

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null }
}

async function dbConnect() {
  // 如果已经连接过了，直接返回
  if (cached.conn) {
    return cached.conn
  }

  // 如果正在连接中，等待它完成
  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI).then((mongoose) => {
      return mongoose
    })
  }

  cached.conn = await cached.promise
  return cached.conn
}

export default dbConnect

// models/Post.js
import mongoose from 'mongoose'

// 定义 Schema：文章的数据结构
const PostSchema = new mongoose.Schema({
  title: {
    type: String,        // 标题是字符串
    required: [true, '标题不能为空'],  // 必填
  },
  content: {
    type: String,        // 内容是字符串
    required: [true, '内容不能为空'],
  },
  author: {
    type: String,        // 作者是字符串
    default: '匿名',     // 默认值
  },
  createdAt: {
    type: Date,          // 创建时间是日期
    default: Date.now,   // 默认当前时间
  },
})

// 创建 Model 并导出
// mongoose.models.Post 防止热重载时重复创建模型
export default mongoose.models.Post || mongoose.model('Post', PostSchema)

// app/api/posts/route.js
import { NextResponse } from 'next/server'
import dbConnect from '@/lib/mongodb'
import Post from '@/models/Post'

// GET /api/posts → 获取所有文章
export async function GET() {
  try {
    // 1. 连接数据库
    await dbConnect()

    // 2. 查询所有文章，按创建时间倒序排列
    const posts = await Post.find({}).sort({ createdAt: -1 })

    // 3. 返回数据
    return NextResponse.json(posts)
  } catch (error) {
    return NextResponse.json(
      { error: '获取文章失败：' + error.message },
      { status: 500 }
    )
  }
}

// POST /api/posts → 创建新文章
export async function POST(request) {
  try {
    // 1. 连接数据库
    await dbConnect()

    // 2. 从请求体获取数据
    const body = await request.json()

    // 3. 创建文章
    const post = await Post.create({
      title: body.title,
      content: body.content,
      author: body.author,
    })

    // 4. 返回创建的文章（状态码 201 = 创建成功）
    return NextResponse.json(post, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { error: '创建文章失败：' + error.message },
      { status: 500 }
    )
  }
}

// app/posts/page.js
'use client'

import { useState, useEffect } from 'react'

export default function PostsPage() {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)

  // 页面加载时从 API 获取文章
  useEffect(() => {
    fetch('/api/posts')
      .then((res) => res.json())
      .then((data) => {
        setPosts(data)
        setLoading(false)
      })
      .catch((err) => {
        console.error('获取文章失败：', err)
        setLoading(false)
      })
  }, [])

  if (loading) {
    return 
加载中...
  }

  return (
    

      
📚 文章列表（来自 MongoDB）

      {posts.length === 0 ? (
        
暂无文章，快去 /api/posts 接口用 POST 创建一篇吧！
      ) : (
        posts.map((post) => (
          

            
{post.title}
            
{post.content}
            
              作者：{post.author} | 发布于：
              {new Date(post.createdAt).toLocaleDateString('zh-CN')}
            
          
        ))
      )}
    
  )
}

# 第1步：创建项目
npx create-next-app@latest my-blog
cd my-blog

# 第2步：安装 mongoose
npm install mongoose

# 第3步：创建 .env.local
# 在项目根目录新建 .env.local，写入连接字符串

# 第4步：创建文件
# lib/mongodb.js     → 数据库连接
# models/Post.js     → 文章模型
# app/api/posts/route.js → API 接口
# app/posts/page.js  → 前端页面

# 第5步：启动项目
npm run dev

# 第6步：测试
# 1) 访问 http://localhost:3000/posts → 应该显示空列表
# 2) 用 POST 请求创建文章
# 3) 刷新页面 → 应该显示文章了

curl -X POST http://localhost:3000/api/posts \
  -H "Content-Type: application/json" \
  -d '{"title":"Hello MongoDB","content":"这是我的第一篇数据库文章！","author":"zyyc"}'

curl http://localhost:3000/api/posts