如何在Next.js中集成react-odometerjs？代码运行失败求解决方案

你遇到的问题核心是两个：一是react-odometerjs依赖浏览器window对象，直接导入会在Next.js服务端渲染阶段报错；二是没有引入odometer的默认样式，导致滚动效果无法正常展示。

具体修正步骤 #

• 使用next/dynamic动态导入Odometer组件，关闭服务端渲染配置
• 引入odometer对应的主题样式文件
• 原有状态和更新逻辑保留即可，无需额外改动

修正后的完整代码 #

import { useState, useEffect } from 'react'
import dynamic from 'next/dynamic'
// 导入默认主题样式，可根据需要切换其他主题
import 'odometer/themes/odometer-theme-default.css'

// 动态导入Odometer，禁用SSR
const Odometer = dynamic(() => import('react-odometerjs'), {
  ssr: false,
  loading: () => <p>0</p> // 加载时的占位内容可自定义
})

export default function Home() {
  const [odometerValue, setOdometerValue] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setOdometerValue(300);
    }, 1000);
  }, []);

  return (
    <Odometer
      value={odometerValue}
      format="(,ddd)"
      theme="default"
    />
  );
}

注意：如果运行时提示找不到odometer相关样式，手动执行npm i odometer安装底层依赖即可。

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