Next.js 13中如何正确使用measureTextWidth方法？

问题根源 #

measureTextWidth 依赖浏览器端的DOM/Canvas API，而Next.js默认的SSR（服务器端渲染）/SSG（静态站点生成）环境中没有这些浏览器专属API。直接在组件顶层、服务器端执行的代码中调用或动态导入该方法，会导致执行失败。

解决方案 #

下面提供几种可行的实现方式，核心思路都是确保代码只在客户端环境执行：

1. 使用useEffect包裹调用逻辑（Pages Router/Client Component通用）

useEffect 的回调函数只会在客户端渲染完成后执行，天然避开SSR环境：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });
  const targetText = '需要测量的目标文本';
  const textStyle = { fontSize: '16px', fontWeight: '500' };

  useEffect(() => {
    // 异步导入并调用方法
    const fetchTextDimensions = async () => {
      const { measureTextWidth } = await import('@ant-design/charts');
      const dimensions = measureTextWidth(targetText, textStyle);
      setTextDimensions(dimensions);
    };

    fetchTextDimensions();
  }, [targetText, textStyle]); // 依赖变化时重新测量

  return (
    <div>
      文本宽度：{textDimensions.width}px<br />
      文本高度：{textDimensions.height}px
    </div>
  );
}

export default YourComponent;

2. 显式判断客户端环境（兼容服务器端渲染场景）

通过typeof window !== 'undefined'判断当前是否在客户端，避免服务器端执行报错：

// 封装测量方法
const calculateTextWidth = async (text, style) => {
  // 服务器端返回默认值，避免报错
  if (typeof window === 'undefined') {
    return { width: 0, height: 0 };
  }
  const { measureTextWidth } = await import('@ant-design/charts');
  return measureTextWidth(text, style);
};

// 在组件中使用
function YourComponent() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    calculateTextWidth('测试文本', { fontSize: '14px' }).then(dim => {
      setWidth(dim.width);
    });
  }, []);

  return <p>文本宽度：{width}px</p>;
}

3. Next.js 13 App Router下使用客户端组件

在App Router中，给组件添加'use client'指令，标记为客户端组件，代码会完全在客户端执行：

'use client';

import { useEffect, useState } from 'react';

export default function TextMeasureComponent() {
  const [textHeight, setTextHeight] = useState(0);
  const text = '客户端组件中的测试文本';
  const style = { fontSize: '18px', fontFamily: 'Arial' };

  useEffect(() => {
    import('@ant-design/charts').then(({ measureTextWidth }) => {
      const { height } = measureTextWidth(text, style);
      setTextHeight(height);
    });
  }, [text, style]);

  return <p>文本高度：{textHeight}px</p>;
}

额外优化 #

如果需要多次调用measureTextWidth，可以缓存导入的方法，避免重复发起模块请求：

let cachedMeasureTextWidth = null;

const calculateTextWidth = async (text, style) => {
  if (typeof window === 'undefined') return { width: 0, height: 0 };
  
  if (!cachedMeasureTextWidth) {
    const { measureTextWidth } = await import('@ant-design/charts');
    cachedMeasureTextWidth = measureTextWidth;
  }

  return cachedMeasureTextWidth(text, style);
};

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