构建一个‘智能’Markdown笔记记录器，使用 Next.js 15 和 OpenAI

Source: Dev.to

介绍

在 2025 年，仅仅拥有一个标准的 CRUD 应用已经不足以打动用户。用户期望应用能够“思考”。今天，我们将构建一个智能笔记应用，它不仅可以存储 Markdown，还会利用 AI 自动为你的笔记生成标签和摘要。

技术栈

• Frontend/Backend: Next.js 15（App Router）
• Styling: Tailwind CSS
• Database: Prisma + PostgreSQL（via Supabase）
• AI: OpenAI API

1. 项目设置

首先，使用最新的 Next.js 功能初始化你的项目：

npx create-next-app@latest smart-notes --typescript --tailwind --eslint
cd smart-notes
npm install @prisma/client lucide-react openai
npx prisma init

2. 数据库模式

我们需要一个简洁但有效的模型。在 prisma/schema.prisma 中：

model Note {
  id        String   @id @default(cuid())
  title     String
  content   String   @db.Text
  tags      String[]
  summary   String?  @db.Text
  createdAt DateTime @default(now())
}

3. “智能”逻辑（服务器动作）

与其使用单独的 API 路由，我们将使用 Next.js Server Action。这可以让我们的逻辑保持在服务器上捆绑且安全。

在 app/actions/notes.ts 中创建文件：

"use server";
import { PrismaClient } from "@prisma/client";
import OpenAI from "openai";

const prisma = new PrismaClient();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function createSmartNote(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  // AI Magic: Generate Summary and Tags
  const aiResponse = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "system",
        content:
          "Analyze the following note. Return a JSON object with a 'summary' (1 sentence) and 'tags' (array of strings).",
      },
      { role: "user", content: content },
    ],
    response_format: { type: "json_object" },
  });

  const { summary, tags } = JSON.parse(
    aiResponse.choices[0].message.content || "{}"
  );

  const note = await prisma.note.create({
    data: { title, content, summary, tags },
  });

  return note;
}

4. UI：简洁且实用

在 app/page.tsx 中，创建一个简单的表单来处理输入。我们将使用 useFormStatus 在 AI “思考”时显示加载状态。

import { createSmartNote } from "./actions/notes";

export default function Home() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-4">Smart Markdown Notes 📝</h1>

      <form action={createSmartNote} className="space-y-4">
        <div>
          <label htmlFor="title" className="block font-medium">
            Title
          </label>
          <input
            id="title"
            name="title"
            type="text"
            required
            className="mt-1 block w-full rounded border p-2"
          />
        </div>

        <div>
          <label htmlFor="content" className="block font-medium">
            Content (Markdown)
          </label>
          <textarea
            id="content"
            name="content"
            rows={6}
            required
            className="mt-1 block w-full rounded border p-2"
          />
        </div>

        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          Save Smart Note
        </button>
      </form>

      {/* Logic to fetch and map notes would go here */}
    </main>
  );
}

5. 为什么这在2025年很重要

• 服务器操作: 消除对复杂 useEffect 和 fetch 调用的需求。
• AI 集成: 从“全栈”转向“AI‑原生”，将智能直接嵌入数据流。
• 类型安全: TypeScript 确保我们的 AI 响应与数据库模式匹配。

结论

如今构建全栈应用的核心在于编排各种服务。将 Next.js 的强大功能与 AI 相结合，你可以创建不仅仅是数据存储的工具，提供真正的实用价值。