在Next.js中使用Cloudinary时出现Can't resolve 'fs'错误，求解决

问题原因 #

Cloudinary的官方npm包是为Node.js环境设计的，依赖Node.js的fs（文件系统）模块，但你的代码运行在客户端组件（app/(client)/create/page.tsx）中——浏览器环境没有fs模块，因此触发报错。

解决方案 #

方案一：将Cloudinary操作移到服务器组件/API路由

服务器组件和API路由运行在Node.js环境，天然支持fs模块，是最稳妥的解决方式。

1. 创建API路由处理Cloudinary逻辑：

// app/api/upload/route.ts
import { v2 as cloudinary } from 'cloudinary';
import { NextResponse } from 'next/server';

// 初始化Cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export async function POST(request: Request) {
  const { imageUrl } = await request.json();
  // 执行上传操作
  const uploadResult = await cloudinary.uploader.upload(imageUrl);
  return NextResponse.json({ secureUrl: uploadResult.secure_url });
}

2. 在客户端组件中调用该API：

// app/(client)/create/page.tsx
async function handleImageUpload(imageFile: File) {
  // 这里可根据需求将文件转为base64或上传到临时存储，获取可访问的URL
  const tempImageUrl = '你的临时图片URL';
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ imageUrl: tempImageUrl }),
  });
  const data = await response.json();
  console.log('上传完成，图片地址:', data.secureUrl);
}

方案二：使用Cloudinary前端专用SDK

如果仅需在前端展示图片或直接上传文件，可使用Cloudinary专为浏览器环境设计的工具：

• 安装前端SDK：npm install cloudinary-react
• 客户端组件中展示图片示例：

// app/(client)/create/page.tsx
import { Image, Transformation } from 'cloudinary-react';

export default function CreatePage() {
  return (
    <Image 
      cloudName="你的CloudName" 
      publicId="sample"
    >
      <Transformation width="200" height="200" crop="fill" />
    </Image>
  );
}

若要实现前端直接上传，可使用Cloudinary上传Widget，无需依赖fs模块，直接在浏览器中完成上传流程。

方案三：配置Next.js Webpack（不推荐）

如果必须在客户端使用官方SDK，可通过Webpack配置将fs设为空模块，但可能导致部分依赖fs的功能失效：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
      };
    }
    return config;
  },
};

module.exports = nextConfig;

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