NextJS13（src/app+TS）用ccxt获取Binance余额遇模块缺失错误求助

问题原因 #

CCXT在Node环境下依赖node-fetch，但NextJS 13的App Router服务器组件在打包时会修改模块路径，导致CCXT无法正确定位node-fetch。以下是几种可行的解决方案：

方案1：配置Webpack别名指向NextJS内置的node-fetch #

在项目根目录的next.config.js中添加Webpack配置，强制CCXT使用NextJS预编译的node-fetch版本：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 重定向node-fetch到NextJS内置版本
    config.resolve.alias['node-fetch'] = 'next/dist/compiled/node-fetch/index.js';
    return config;
  },
};

module.exports = nextConfig;

修改后重启开发服务器，CCXT即可正确找到依赖的node-fetch。

方案2：将CCXT逻辑封装到API路由（更推荐） #

直接在页面组件中调用CCXT可能引发环境兼容问题，将余额查询逻辑放在服务器端API路由中更稳妥：

1. 创建API路由文件：app/api/balance/route.ts

import { NextResponse } from 'next/server';
import ccxt from 'ccxt';

export async function GET() {
  try {
    // 从环境变量读取密钥（禁止硬编码）
    const exchange = new ccxt.binance({
      apiKey: process.env.BINANCE_API_KEY!,
      secret: process.env.BINANCE_SECRET!,
    });
    
    const totalBalance = await exchange.fetchTotalBalance();
    return NextResponse.json(totalBalance);
  } catch (error) {
    return NextResponse.json(
      { error: (error as Error).message },
      { status: 500 }
    );
  }
}

2. 页面组件中调用API：

export default async function Page() {
  const res = await fetch('/api/balance');
  const balanceData = await res.json();
  
  // 注意：fetchTotalBalance返回的是币种为键的对象，无Total属性，需调整渲染逻辑
  return (
    <main>
      <h2>账户余额</h2>
      <pre>{JSON.stringify(balanceData, null, 2)}</pre>
    </main>
  );
}

辅助配置步骤 #

1. 升级CCXT到最新版本
   旧版本CCXT可能存在ES模块兼容问题，执行以下命令更新：

npm install ccxt@latest
# 或 yarn add ccxt@latest

2. 配置环境变量
   在项目根目录创建.env.local文件，存储敏感密钥：

BINANCE_API_KEY=你的Binance API密钥
BINANCE_SECRET=你的Binance API密钥密码

3. 安装TypeScript类型定义（可选）
   为获得更好的TypeScript语法提示，安装CCXT类型包：

npm install @types/ccxt --save-dev

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