Next.js：窗口未定义

我正在尝试将 apexcharts 用于 next.js 应用程序，但它返回窗口未定义。

我希望得到任何帮助。

有人知道发生了什么以及为什么吗？

import React from 'react';
import Chart from 'react-apexcharts';

export default class Graficos extends React.Component <{}, { options: any, series: any }> {
    constructor(props:any) {
        super(props);

        this.state = {
            options: {
            chart: {
                id: "basic-bar"
            },
            xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
            }
            },
            series: [
            {
                name: "series-1",
                data: [30, 40, 45, 50, 49, 60, 70, 91]
            }
            ]
        };
    }
  
    render() {
        return (
            <div className="row">
                <h1>Gráfico Básico</h1>
                <div className="mixed-chart">
                    <Chart
                        options={this.state.options}
                        series={this.state.series}
                        type="bar"
                        width={500}
                    />
                </div>
            </div>
        );
    }
  }

Next.js 的关键功能之一是它可以在服务器上甚至在构建时渲染 React 应用程序的部分内容。虽然这有助于提高页面的性能，但缺点是服务器不提供应用程序在浏览器中可以访问的所有相同的 API。在这种情况下，没有全局window对象定义。

不幸的是，搜索 apexcharts.js 的源代码会发现许多引用window: https://github.com/apexcharts/apexcharts.js/search?q=window。这也发生在他们的 React 包装器中：https://github.com/apexcharts/react-apexcharts/blob/ecf67949df058e15db2bf244e8aa30d78fc8ee47/src/react-apexcharts.jsx#L5。虽然似乎没有办法获得 apexcharts 来避免引用window，您可以阻止 Next.js 使用服务器上的图表。最简单的方法是包装对代码的任何引用，并检查是否window被定义，例如

<div className="mixed-chart">
  {(typeof window !== 'undefined') &&
  <Chart
    options={this.state.options}
    series={this.state.series}
    type="bar"
    width={500}
  />
  }
</div>  

使用 apexcharts，您还需要对组件导入执行此操作，因为单独导入将触发对window如第二个链接所示。为了解决这个问题，您需要使用动态导入，而不是当前的正常导入：https://nextjs.org/docs/advanced-features/dynamic-import

import dynamic from 'next/dynamic'

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });