Next.js 集成 Highcharts 官网文档说明（2025 新版）

Highcharts.js2026-02-02 9:07

Next.js

服务器端渲染

Highcharts 交互式图表无法在服务器端生成，因为交互性依赖于客户端环境。可以使用 Highcharts 导出服务器 Highcharts Export Server 生成静态图片。

为了在使用最新版本（v13+）的 Next.js（使用应用路由）中使用 Highcharts，你需要在包含 Highcharts 组件或模块的文件中添加 'use client'，以确保它在客户端渲染。

jsx 复制代码

'use client';

import { Chart, Series, Title } from '@highcharts/react';
import { Accessibility } from '@highcharts/react/options/Accessibility';

export default function ChartPage() {
  return (
    <Chart>
      <Title>Hello NextJS!</Title>
      <Series type="line" data={[1, 2, 3, 4, 5]} />
      <Accessibility />
    </Chart>
  );
}

页面路由

如果你在 Next.js 中使用页面路由，Highcharts 仍然可以轻松使用，只要渲染限制在客户端即可。主要注意事项是：

避免在 getServerSideProps or getStaticProps中直接使用 Highcharts，因为它需要一个 DOM 环境。
导入和渲染 Highcharts 的组件应为标准的 React 组件，通常在 /pages 目录下的页面中也能正常工作。

从服务器流式传输数据

虽然 Highcharts 在服务器端无法使用，但你可以使用服务器端渲染进行数据获取，然后将数据流式传输到客户端组件以渲染图表。

考虑这个 page.tsx 文件：

jsx 复制代码

import { Suspense } from 'react';
import DataChart from './chart';

export default function Page() {
  const data = fetch('https://www.highcharts.com/samples/data/aapl.json')
    .then(res => res.json());

  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataChart data={data} />
    </Suspense>
  )
}

结合这个 chart.tsx:

jsx 复制代码

"use client";

import { use } from 'react';

import { StockChart } from '@highcharts/react/Stock';
import { LineSeries } from '@highcharts/react/series/Line';
import { Title } from '@highcharts/react/options';
import { Accessibility } from '@highcharts/react/options/Accessibility';

export default function DataChart({ data }) {
  const allData = use(data);

  return (
    <StockChart>
      <Title>Hello stock NextJS!</Title>
      <LineSeries data={allData} />
      <Accessibility />
    </StockChart>
  );
}

更多详情，请参阅 Next.js 文档.

更新发布于 2026 年 1 月 30 日