从零开始搭建一个本地大模型驱动的 Next.js 智能简历优化系统

2025-05-09

字数：1.1k字 | 预计阅读时长：5分钟

本文将手把手带你从零搭建一个支持中文简历优化、流式生成、Markdown 渲染的大模型应用。我们使用Next.js 14 作为前端框架，调用本地部署的 DeepSeek-R1 大模型，通过流式响应实时生成高质量简历内容，适合用于求职平台、教学场景、AIGC 简历应用等。

🚀 最终实现目标

用户在前端输入岗位描述 + 个人经历，点击生成，系统使用本地 LLM（如 DeepSeek-R1:7B）调用 Ollama 接口，通过流式方式一行一行返回优化后的简历内容，并用 Markdown 美化展示。

🧱 技术栈概览

前端框架：Next.js 14（App Router 架构）
样式系统：Tailwind CSS + Typography 插件
Markdown 渲染：ReactMarkdown
本地模型调用：Ollama + DeepSeek-R1
流式响应处理：ReadableStream
部署结构：全栈项目（无需额外后端）

🧰 搭建步骤

1️⃣ 创建项目

npx create-next-app@latest resume-ai-nextjs
# 选项建议：
# ✔ TypeScript: Yes
# ✔ Tailwind CSS: Yes
# ✔ App Router: Yes
# ✔ Turbopack: No

20250509223002

20250509223014

2️⃣ 手动补齐 Tailwind 配置

1
2
3

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts
npm install @tailwindcss/typography

编辑 tailwind.config.ts：

import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [typography],
}
export default config

3️⃣ 编写前端简历输入页面

使用 ReactMarkdown 进行渲染，添加模型选择、输入框和按钮：

'use client'
import { useState } from 'react'
import ReactMarkdown from 'react-markdown'

export default function HomePage() {
  const [jd, setJd] = useState('')
  const [exp, setExp] = useState('')
  const [model, setModel] = useState('deepseek-r1:7b')
  const [result, setResult] = useState('')

  const handleSubmit = async () => {
    setResult('')
    const res = await fetch('/api/optimize', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ jd, experience: exp, model })
    })
    if (!res.body) return
    const reader = res.body.getReader()
    const decoder = new TextDecoder('utf-8')
    let buffer = ''
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      buffer += decoder.decode(value, { stream: true })
      const lines = buffer.split('\n')
      buffer = lines.pop() || ''
      for (const line of lines) {
        if (!line.trim()) continue
        try {
          const json = JSON.parse(line)
          setResult(prev => prev + (json.response || ''))
        } catch (e) {}
      }
    }
  }

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">📄 智能简历优化助手</h1>
      <select value={model} onChange={e => setModel(e.target.value)} className="mb-4 border p-2 w-full">
        <option value="llama2">LLaMA2（英文）</option>
        <option value="deepseek-r1:7b">DeepSeek-R1（推荐中文）</option>
      </select>
      <textarea placeholder="岗位描述" value={jd} onChange={e => setJd(e.target.value)} className="w-full h-24 p-2 mb-4 border" />
      <textarea placeholder="你的经历" value={exp} onChange={e => setExp(e.target.value)} className="w-full h-24 p-2 mb-4 border" />
      <button onClick={handleSubmit} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">✨ 生成简历内容</button>
      {result && (
        <div className="mt-6 p-4 bg-gray-100 border rounded prose">
          <ReactMarkdown>{result}</ReactMarkdown>
        </div>
      )}
    </main>
  )
}

20250509223115

4️⃣ 创建后端接口 `/api/optimize`

import { NextRequest } from 'next/server'

export async function POST(req: NextRequest) {
  const { jd, experience, model } = await req.json()
  const prompt = `
你是一个简历优化助手。请根据以下岗位描述和个人经历，使用 RAR（角色-行动-结果）结构生成简历内容。请用中文输出，控制在200字以内，直接输出内容。

岗位描述：${jd}
个人经历：${experience}
  `
  const response = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ model, prompt, stream: true })
  })

  return new Response(response.body, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
    }
  })
}

20250509223201

5️⃣ 启动 Ollama 本地模型

1 2	ollama pull deepseek-r1:7b ollama run deepseek-r1:7b

或者：

1	ollama serve # 由接口自动加载模型

20250509223324

✅ 效果演示（功能一览）

🧠 输入岗位 JD + 个人经历
✅ 一键生成 RAR 结构简历内容
📦 本地运行，无需联网，无隐私泄露
💬 Markdown 美观渲染，排版清晰
🔄 模型切换：支持 llama2 / deepseek-r1

20250509223346

20250509223404

🧩 可扩展方向

💾 保存生成历史
🌐 中英文简历切换
📋 一键复制 + 导出 PDF
🧠 加入 RAG 检索增强模块

如果你也想做一个自己的本地 LLM 简历生成应用，希望这份实践对你有所帮助 🙌

-------------本文结束感谢您的阅读-------------

本文作者： 金金
本文链接： http://example.com/2025/05/09/从零开始搭建一个本地大模型驱动的-Next-js-智能简历优化系统/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！