mmflow Charts

Next.js App Router

Render charts in client components because the engine uses WebGL, DOM containers, EventSource, WebSocket, and ResizeObserver.

Client component

"use client";

import { Chart } from "@mmflow/react";
import { createMmflowFeed } from "@mmflow/sdk";

const feed = createMmflowFeed({
  apiKey: process.env.NEXT_PUBLIC_MMFLOW_KEY,
});

export function ClientChart() {
  return (
    <Chart
      feed={feed}
      symbol="BTC"
      resolution="1m"
      volume
      autosize
      style={{ height: 560 }}
    />
  );
}

Optional dynamic import

import dynamic from "next/dynamic";

const Chart = dynamic(
  () => import("@mmflow/react").then((mod) => mod.Chart),
  { ssr: false },
);

export default function Page() {
  return <Chart symbol="BTC" style={{ height: 560 }} />;
}

App Router guidance

Keep route pages server-rendered where useful, then push the chart itself into a small client component.

Use a real height

The chart container fills its parent, so set style height, a class height, or a layout slot height.

Public env vars only

Use NEXT_PUBLIC_ variables for keys that must reach the browser. Keep server-only secrets out of chart props.

No SSR for WebGL

Use a client component or next/dynamic with ssr: false when the chart is imported from a server route.

Repo starter template

Copy frontend/examples/nextjs-app-router-chart for a minimal App Router client component template. It is a copy-out starter, not a nested workspace app.

Continue building

Move through the chart SDK docs without leaving the developer flow.