Next.js 14中使用ApexCharts遇ReferenceError: window is not defined问题

在 Next.js 14 项目里集成 ApexCharts 时，常会碰到终端抛出 ReferenceError: window is not defined 的错误——这是因为 ApexCharts 依赖浏览器环境的 window 对象，但 Next.js 默认的服务端渲染（SSR）或静态生成（SSG）阶段不存在这个对象，不少开发者都遇到过这个问题。以下是几种实测有效的解决方式：

方式1：动态导入组件并禁用SSR #

用 Next.js 的动态导入功能，指定组件仅在客户端渲染，跳过服务端处理环节，这是最常用的解决办法。

import dynamic from 'next/dynamic';

// 动态导入react-apexcharts，禁用SSR
const ApexChart = dynamic(() => import('react-apexcharts'), {
  ssr: false,
  loading: () => <div>图表加载中...</div> // 可选：添加加载占位
});

export default function DashboardChart() {
  // 图表配置和数据
  const chartOptions = {
    xaxis: {
      categories: ['一月', '二月', '三月', '四月']
    }
  };
  const chartSeries = [{ name: '销售额', data: [30, 40, 35, 50] }];

  return (
    <ApexChart 
      options={chartOptions} 
      series={chartSeries} 
      type="line" 
      height={350} 
    />
  );
}

方式2：判断客户端环境后再渲染图表 #

如果是自定义封装的图表组件，可以通过状态判断当前是否处于客户端环境，确保只有在浏览器中才初始化图表。

import { useEffect, useState } from 'react';
import Chart from 'react-apexcharts';

export default function CustomChart() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 进入客户端环境后更新状态
    setIsClient(true);
  }, []);

  const options = { /* 你的图表配置 */ };
  const series = [ /* 你的数据系列 */ ];

  // 服务端渲染时返回占位
  if (!isClient) {
    return <div>加载中...</div>;
  }

  return <Chart options={options} series={series} type="bar" height={400} />;
}

方式3：修改Webpack配置（适配App Router） #

如果使用的是 Next.js 14 的 App Router，可通过修改 next.config.js，将 ApexCharts 相关依赖标记为外部资源，避免服务端打包处理。

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals.push({
      'react-apexcharts': 'ReactApexCharts',
      apexcharts: 'ApexCharts'
    });
    return config;
  }
};

module.exports = nextConfig;

以上几种方法核心都是让 ApexCharts 仅在浏览器环境中运行，优先尝试方式1，大部分场景下都能直接解决问题。

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