model Post {
id String @id @default(cuid())
title String
content String
slug String @unique
published Boolean @default(false)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
comments Comment[]
tags Tag[]
}

model Comment {
id String @id @default(cuid())
content String
postId String
author String @default("anonymous")
createdAt DateTime @default(now())
post Post @relation(fields: [postId], references: [id])
}

model ChatMessage {
id String @id @default(cuid())
content String
userId String
username String
roomId String @default("general")
createdAt DateTime @default(now())

这个设计真的反人类？其实不是，但官方文档对Prisma的索引优化文档不够清晰。ChatMessage表那个联合索引，不加的话，当你聊天记录超过10万条时，查询速度会从10毫秒飙到2秒。

核心功能：博客系统搭建

先搞定博客的静态生成。Next.js 14的App Router里，动态路由配合generateStaticParams简直是神器。

import { prisma } from '@/lib/prisma'
import { notFound } from 'next/navigation'

// 静态生成参数预取
export async function generateStaticParams() {
const posts = await prisma.post.findMany({
where: { published: true },
select: { slug: true }
})
return posts.map(post => ({ slug: post.slug }))
}

// 页面组件
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await prisma.post.findUnique({
where: { slug: params.slug },
include: {
comments: { orderBy: { createdAt: 'desc' } },
tags: true
}
})

if (!post) notFound()

return (

另一个坑：实时聊天系统的WebSocket实现

这个部分我折腾得最久。Next.js 14的Route Handler虽然支持WebSocket，但文档里只提了一嘴，具体实现全靠猜。

import { NextRequest } from 'next/server'
import { prisma } from '@/lib/prisma'
import Redis from 'ioredis'

const redis = new Redis(process.env.REDIS_URL!)

export async function GET(request: NextRequest) {
// 升级到WebSocket连接
const upgradeHeader = request.headers.get('upgrade')
if (upgradeHeader !== 'websocket') {
return new Response('Expected WebSocket', { status: 426 })
}

const { socket, response } = (request as any).socket!

socket.on('message', async (data: Buffer) => {
const message = JSON.parse(data.toString())

// 保存到数据库
const saved = await prisma.chatMessage.create({
data: {
content: message.content,
userId: message.userId,
username: message.username,
roomId: message.roomId || 'general'
}
})

// 通过Redis广播给所有连接的客户端
await redis.publish('chat:general', JSON.stringify(saved))
})

// 订阅Redis频道
const subscriber = new Redis(process.env.REDIS_URL!)
subscriber.subscribe('chat:general')
subscriber.on('message', (channel, data) => {
socket.send(data)
})

socket.on('close', () => {
subscriber.unsubscribe()
subscriber.quit()
})

这个实现有个致命问题：如果WebSocket连接断开了，Redis订阅会泄漏。我后来加了个连接池管理，每个连接绑定一个唯一的ID，断开时自动清理。

还有个技巧：消息持久化别一次性写数据库。我用了个批量写入策略，每5秒或每攒够50条消息才写一次，写入吞吐量从每秒100条提升到5000条。

（WebSocket连接状态监控截图，显示在线用户数、消息吞吐量、平均延迟等指标，延迟稳定在0.3秒左右）

前端实时更新：React Server Components + WebSocket

博客页面用Server Components，聊天页面用Client Components，这个分割很关键。

'use client'
import { useState, useEffect, useRef } from 'react'

interface ChatMessage {
id: string
content: string
username: string
createdAt: string
}

export default function ChatRoom({ roomId = 'general' }) {
const [messages, setMessages] = useState([])
const [input, setInput] = useState('')
const wsRef = useRef(null)
const messagesEndRef = useRef(null)

ws.onmessage = (event) => {
const message = JSON.parse(event.data)
setMessages(prev => [...prev, message])

// 自动滚动到底部
setTimeout(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
}, 100)
}

return () => {
ws.close() // 组件卸载时关闭连接，防止内存泄漏
}
}, [roomId])

const sendMessage = async () => {
if (!input.trim() || !wsRef.current) return

wsRef.current.send(JSON.stringify({
content: input,
userId: crypto.randomUUID(), // 实际项目用认证后的用户ID
username: 'user_' + Math.random().toString(36).slice(2, 8),
roomId
}))
setInput('')
}

return (