在Next.js中使用fs模块时遭遇TypeError: fs.writeFileSync is not a function错误的技术求助

这个错误的核心原因很明确：fs是Node.js的内置模块，只能在服务器端环境运行，而你在客户端浏览器环境中调用了它。你的package.json里配置resolve: { fallback: { "fs": false } }其实是告诉Webpack不要在客户端打包fs模块，所以当客户端代码执行到fs.writeFileSync时，自然会找不到这个方法。

下面是具体的解决方案，分两种常见的Next.js路由模式来说明：

方案一：使用Pages Router的API Routes（适合Next.js 12及以下，或习惯Pages Router的项目） #

你需要把文件写入的逻辑移到服务器端的API路由中，客户端通过请求API来触发数据保存操作：

1. 新建API路由文件：在pages/api目录下创建incidents.ts（或incidents.js），内容如下：

import type { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';
import path from 'path';

// 获取JSON文件的绝对路径，避免相对路径在服务器端出错
const filePath = path.join(process.cwd(), 'public/data/monitoring.json');

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      // 读取现有数据
      const fileContent = fs.readFileSync(filePath, 'utf8');
      const users = JSON.parse(fileContent);
      
      // 创建新用户
      const newUser = {
        id: Date.now(),
        ...req.body
      };
      users.push(newUser);
      
      // 保存数据到文件
      fs.writeFileSync(filePath, JSON.stringify(users, null, 4));
      
      res.status(200).json({ success: true, user: newUser });
    } catch (error) {
      res.status(500).json({ success: false, error: (error as Error).message });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

2. 修改客户端组件中的触发逻辑：原来直接调用incidentsRepo.create的地方，改成用fetch请求这个API：

// 假设这是你的客户端组件代码
'use client';

async function handleCreateUser(newUser: any) {
  try {
    const response = await fetch('/api/incidents', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newUser),
    });
    
    if (!response.ok) throw new Error('Failed to create user');
    const result = await response.json();
    console.log('User created:', result.user);
    // 这里可以更新客户端的状态，比如重新获取用户列表
  } catch (error) {
    console.error('Error creating user:', error);
  }
}

3. 调整原incidentsRepo：如果这个Repo还要用于服务器端读取数据，可以保留getAll、getById等方法，但要确保这些方法只在服务器端组件或API路由中使用，不要在客户端调用：

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

const filePath = path.join(process.cwd(), 'public/data/monitoring.json');
let users = JSON.parse(fs.readFileSync(filePath, 'utf8'));

export const incidentsRepo = {
    getAll: () => users,
    getById: (id: number) => users.find((x: any) => x.id.toString() === id.toString()),
    find: (x: any) => users.find(x),
    // 移除create方法，因为它涉及文件写入，只能在服务器端API路由中处理
};

方案二：使用App Router的Route Handlers（Next.js 13+） #

如果你的项目用的是App Router，创建对应的Route Handler来处理POST请求：

1. 新建Route Handler文件：在app/api/incidents目录下创建route.ts：

import fs from 'fs';
import path from 'path';
import { NextResponse } from 'next/server';

const filePath = path.join(process.cwd(), 'public/data/monitoring.json');

export async function POST(request: Request) {
  try {
    const newUser = await request.json();
    const fileContent = fs.readFileSync(filePath, 'utf8');
    const users = JSON.parse(fileContent);
    
    const userWithId = {
      id: Date.now(),
      ...newUser
    };
    users.push(userWithId);
    
    fs.writeFileSync(filePath, JSON.stringify(users, null, 4));
    
    return NextResponse.json({ success: true, user: userWithId }, { status: 200 });
  } catch (error) {
    return NextResponse.json({ success: false, error: (error as Error).message }, { status: 500 });
  }
}

2. 客户端调用方式和Pages Router类似：同样用fetch请求/api/incidents即可。

关键注意事项 #

• 区分服务器端和客户端代码：Next.js中，带有'use client'指令的组件是客户端组件，不能直接使用fs等Node.js模块；没有该指令的组件默认是服务器组件，可以安全使用fs读取文件（但写入操作还是建议放在API/Route Handler中）。
• 避免相对路径：在服务器端处理文件时，一定要用path.join(process.cwd(), 'your/path')获取绝对路径，否则可能因为运行环境不同导致找不到文件。
• 生产环境考虑：如果是生产环境，频繁写入文件可能不是最佳方案，建议考虑使用数据库（比如MongoDB、PostgreSQL）来存储数据，文件存储更适合静态数据或小量配置。

内容的提问来源于stack exchange，提问作者bluepuper