Next.js教程博客：从客户端保存Markdown至服务端的可行方案咨询

阿华AIGC实验室

2026-4-28

哈哈，这个坑我之前也踩过！客户端直接调用fs肯定不行，毕竟浏览器环境根本没有文件系统权限嘛。给你几个在Next.js里实现客户端编辑Markdown后保存到服务端的靠谱方案：

方案1：使用Next.js API Routes（最推荐）

这是Next.js官方主推的服务端逻辑处理方式，你只需要在pages/api目录下创建一个专属接口，让客户端通过请求这个接口，由服务端来执行文件写入操作。

举个实际例子：
首先写API路由文件：

// pages/api/save-markdown.js
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  // 只处理POST请求
  if (req.method !== 'POST') {
    return res.status(405).json({ message: '仅支持POST请求' });
  }

  const { content, filename } = req.body;
  // 拼接文件路径，用process.cwd()获取项目根目录避免路径错误
  const filePath = path.join(process.cwd(), 'data', `${filename}.md`);

  try {
    // 异步写入文件，避免阻塞服务端事件循环
    fs.promises.writeFile(filePath, content);
    res.status(200).json({ message: 'Markdown内容保存成功' });
  } catch (error) {
    res.status(500).json({ message: '保存失败', error: error.message });
  }
}

然后在客户端组件里调用这个接口：

// 客户端编辑器组件里的保存函数
const handleSaveMarkdown = async (content, filename) => {
  try {
    const response = await fetch('/api/save-markdown', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ content, filename }),
    });

    const result = await response.json();
    if (response.ok) {
      alert(result.message);
      // 这里可以刷新页面或者更新本地状态，同步最新内容
    } else {
      alert(`保存失败：${result.message}`);
    }
  } catch (error) {
    alert(`请求出错：${error.message}`);
  }
};

⚠️ 注意：

一定要加权限校验！比如通过用户登录状态、API密钥验证，避免任何人都能调用接口修改文件
如果是生产环境，建议对传入的filename做校验，防止路径遍历攻击

方案2：使用Server Actions（Next.js 13+ App Router）

如果你用的是Next.js 13及以上的App Router，Server Actions是更现代化的选择——不用单独写API路由，直接在组件里定义服务端函数即可。

示例代码：
首先定义Server Action：

// 可以单独放在actions.js文件，或者组件内
'use server';

import fs from 'fs';
import path from 'path';

export async function saveMarkdown(content, filename) {
  const filePath = path.join(process.cwd(), 'data', `${filename}.md`);
  try {
    await fs.promises.writeFile(filePath, content);
    return { success: true, message: '保存成功' };
  } catch (error) {
    return { success: false, message: error.message };
  }
}

然后在客户端组件里调用：

'use client';

import { saveMarkdown } from './actions';

const MarkdownEditor = () => {
  const handleSave = async (content, filename) => {
    const result = await saveMarkdown(content, filename);
    if (result.success) {
      alert(result.message);
    } else {
      alert(`保存失败：${result.message}`);
    }
  };

  // 渲染编辑器UI...
};

⚠️ 注意：