Next.js AI应用开发实战

Next.js是构建AI应用的完美选择，提供了服务端渲染、API路由和优秀的开发体验。

为什么选择Next.js？

核心优势

服务端渲染: 更好的SEO和性能
API路由: 内置后端支持
流式响应: 完美支持AI流式输出
App Router: 现代化的路由系统
优化: 自动代码分割和优化

项目初始化

创建项目

npx create-next-app@latest ai-app
cd ai-app

选择配置:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
App Router: Yes
Turbopack: Yes

安装依赖

npm install openai ai
npm install @vercel/postgres
npm install zod
npm install react-markdown

项目结构

app/
├── api/
│   ├── chat/
│   │   └── route.ts
│   └── generate/
│       └── route.ts
├── chat/
│   └── page.tsx
├── layout.tsx
└── page.tsx
components/
├── ChatInterface.tsx
├── MessageList.tsx
└── InputForm.tsx
lib/
├── openai.ts
├── db.ts
└── utils.ts

服务端组件

主页面

// app/page.tsx
import Link from 'next/link'

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="text-center">
        <h1 className="text-6xl font-bold text-gray-900 mb-4">
          AI Chat Application
        </h1>
        <p className="text-xl text-gray-600 mb-8">
          Powered by Next.js and OpenAI
        </p>
        <Link
          href="/chat"
          className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition"
        >
          Start Chatting
        </Link>
      </div>
    </main>
  )
}

布局组件

// app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'AI Chat App',
  description: 'AI-powered chat application built with Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

API路由

聊天API

// app/api/chat/route.ts
import { OpenAI } from 'openai'
import { OpenAIStream, StreamingTextResponse } from 'ai'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export const runtime = 'edge'

export async function POST(req: Request) {
  try {
    const { messages } = await req.json()

    const response = await openai.chat.completions.create({
      model: 'gpt-4',
      stream: true,
      messages: messages,
    })

    const stream = OpenAIStream(response)
    return new StreamingTextResponse(stream)
  } catch (error) {
    console.error('Chat API error:', error)
    return new Response('Error processing request', { status: 500 })
  }
}

文本生成API

// app/api/generate/route.ts
import { OpenAI } from 'openai'
import { NextResponse } from 'next/server'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export async function POST(req: Request) {
  try {
    const { prompt, maxTokens = 500 } = await req.json()

    const completion = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }],
      max_tokens: maxTokens,
    })

    return NextResponse.json({
      text: completion.choices[0].message.content,
      usage: completion.usage,
    })
  } catch (error) {
    return NextResponse.json(
      { error: 'Generation failed' },
      { status: 500 }
    )
  }
}

客户端组件

聊天界面

// app/chat/page.tsx
'use client'

import { useChat } from 'ai/react'
import { MessageList } from '@/components/MessageList'
import { InputForm } from '@/components/InputForm'

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
  })

  return (
    <div className="flex flex-col h-screen bg-gray-50">
      <header className="bg-white shadow-sm p-4">
        <h1 className="text-2xl font-bold text-gray-900">AI Chat</h1>
      </header>

      <MessageList messages={messages} />

      <InputForm
        input={input}
        handleInputChange={handleInputChange}
        handleSubmit={handleSubmit}
        isLoading={isLoading}
      />
    </div>
  )
}

消息列表组件

// components/MessageList.tsx
import { Message } from 'ai'
import ReactMarkdown from 'react-markdown'

interface MessageListProps {
  messages: Message[]
}

export function MessageList({ messages }: MessageListProps) {
  return (
    <div className="flex-1 overflow-y-auto p-4 space-y-4">
      {messages.length === 0 ? (
        <div className="text-center text-gray-500 mt-8">
          <p className="text-lg">开始对话吧！</p>
        </div>
      ) : (
        messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.role === 'user' ? 'justify-end' : 'justify-start'
            }`}
          >
            <div
              className={`max-w-3xl rounded-lg p-4 ${
                message.role === 'user'
                  ? 'bg-blue-600 text-white'
                  : 'bg-white text-gray-900 shadow'
              }`}
            >
              <ReactMarkdown className="prose prose-sm max-w-none">
                {message.content}
              </ReactMarkdown>
            </div>
          </div>
        ))
      )}
    </div>
  )
}

输入表单组件

// components/InputForm.tsx
import { FormEvent, ChangeEvent } from 'react'

interface InputFormProps {
  input: string
  handleInputChange: (e: ChangeEvent<HTMLTextAreaElement>) => void
  handleSubmit: (e: FormEvent<HTMLFormElement>) => void
  isLoading: boolean
}

export function InputForm({
  input,
  handleInputChange,
  handleSubmit,
  isLoading,
}: InputFormProps) {
  return (
    <form onSubmit={handleSubmit} className="bg-white border-t p-4">
      <div className="max-w-4xl mx-auto flex gap-4">
        <textarea
          value={input}
          onChange={handleInputChange}
          placeholder="输入你的消息..."
          className="flex-1 resize-none rounded-lg border border-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
          rows={3}
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading || !input.trim()}
          className="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition"
        >
          {isLoading ? '发送中...' : '发送'}
        </button>
      </div>
    </form>
  )
}

数据库集成

数据库配置

// lib/db.ts
import { sql } from '@vercel/postgres'

export async function createTables() {
  await sql`
    CREATE TABLE IF NOT EXISTS conversations (
      id SERIAL PRIMARY KEY,
      user_id VARCHAR(255) NOT NULL,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
  `

  await sql`
    CREATE TABLE IF NOT EXISTS messages (
      id SERIAL PRIMARY KEY,
      conversation_id INTEGER REFERENCES conversations(id),
      role VARCHAR(50) NOT NULL,
      content TEXT NOT NULL,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
  `
}

export async function saveMessage(
  conversationId: number,
  role: string,
  content: string
) {
  await sql`
    INSERT INTO messages (conversation_id, role, content)
    VALUES (${conversationId}, ${role}, ${content})
  `
}

export async function getConversation(conversationId: number) {
  const { rows } = await sql`
    SELECT * FROM messages
    WHERE conversation_id = ${conversationId}
    ORDER BY created_at ASC
  `
  return rows
}

带持久化的聊天API

// app/api/chat/route.ts
import { OpenAI } from 'openai'
import { OpenAIStream, StreamingTextResponse } from 'ai'
import { saveMessage } from '@/lib/db'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export async function POST(req: Request) {
  try {
    const { messages, conversationId } = await req.json()

    // 保存用户消息
    const userMessage = messages[messages.length - 1]
    await saveMessage(conversationId, 'user', userMessage.content)

    const response = await openai.chat.completions.create({
      model: 'gpt-4',
      stream: true,
      messages: messages,
    })

    const stream = OpenAIStream(response, {
      async onCompletion(completion) {
        // 保存AI响应
        await saveMessage(conversationId, 'assistant', completion)
      },
    })

    return new StreamingTextResponse(stream)
  } catch (error) {
    console.error('Chat API error:', error)
    return new Response('Error processing request', { status: 500 })
  }
}

服务端数据获取

// app/history/page.tsx
import { sql } from '@vercel/postgres'

async function getConversations() {
  const { rows } = await sql`
    SELECT c.id, c.created_at, COUNT(m.id) as message_count
    FROM conversations c
    LEFT JOIN messages m ON c.id = m.conversation_id
    GROUP BY c.id
    ORDER BY c.created_at DESC
    LIMIT 20
  `
  return rows
}

export default async function HistoryPage() {
  const conversations = await getConversations()

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">对话历史</h1>
      <div className="space-y-4">
        {conversations.map((conv) => (
          <div key={conv.id} className="bg-white p-4 rounded-lg shadow">
            <p className="text-sm text-gray-500">
              {new Date(conv.created_at).toLocaleString()}
            </p>
            <p className="text-gray-700">{conv.message_count} 条消息</p>
          </div>
        ))}
      </div>
    </div>
  )
}

中间件

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 添加安全头
  const response = NextResponse.next()

  response.headers.set('X-Frame-Options', 'DENY')
  response.headers.set('X-Content-Type-Options', 'nosniff')
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')

  return response
}

export const config = {
  matcher: '/api/:path*',
}

环境变量

# .env.local
OPENAI_API_KEY=your_openai_api_key
POSTGRES_URL=your_postgres_url
NEXT_PUBLIC_APP_URL=http://localhost:3000

错误处理

// app/error.tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <h2 className="text-2xl font-bold text-red-600 mb-4">
          出错了！
        </h2>
        <p className="text-gray-600 mb-4">{error.message}</p>
        <button
          onClick={reset}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700"
        >
          重试
        </button>
      </div>
    </div>
  )
}

加载状态

// app/chat/loading.tsx
export default function Loading() {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  )
}

性能优化

图片优化

import Image from 'next/image'

export function Avatar({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={40}
      height={40}
      className="rounded-full"
      priority
    />
  )
}

动态导入

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('@/components/HeavyComponent'), {
  loading: () => <p>加载中...</p>,
  ssr: false,
})

部署

Vercel部署

# 安装Vercel CLI
npm i -g vercel

# 部署
vercel

Docker部署

FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static

EXPOSE 3000
CMD ["node", "server.js"]

测试

// __tests__/api/chat.test.ts
import { POST } from '@/app/api/chat/route'

describe('/api/chat', () => {
  it('should return streaming response', async () => {
    const request = new Request('http://localhost:3000/api/chat', {
      method: 'POST',
      body: JSON.stringify({
        messages: [{ role: 'user', content: 'Hello' }],
      }),
    })

    const response = await POST(request)
    expect(response.status).toBe(200)
  })
})

总结

使用Next.js构建AI应用的关键:

利用服务端组件提升性能
API路由处理AI请求
流式响应提供更好的用户体验
数据库持久化对话历史
优化部署到生产环境

现在开始构建你的AI应用吧！

Next.js AI应用开发实战

分享这篇文章