Next.js中maths未定义问题的解决方法求助（导入无效）

一、搞定'maths is not defined'报错 #

先排查几个常见问题：

• 别写错拼写：JavaScript的全局数学工具是大写开头的Math，不是maths。如果是代码里把Math写成了maths，直接改成Math就行，比如Math.random()、Math.floor(3.14)。
• 自定义模块导入要正确：如果你是自己写了个叫maths的工具模块，先检查导入路径对不对。比如模块存在utils/maths.js里，导入时要写import maths from '../utils/maths'，注意路径的层级、文件名大小写（Next.js对文件名大小写敏感，别把Maths.js写成maths.js）。
• 全局挂载要分环境：要是想把自定义maths挂到全局，客户端可以在_app.js里挂到window上，但服务端不能用window，得改用模块导出的方式。

二、在Next.js里自定义maths工具 #

给你几种常用的方式：

1. 搞个独立工具模块 #

新建utils/maths.js文件，把常用的数学方法写进去导出：

// utils/maths.js
// 按需导出单个方法
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const calcSquareRoot = (num) => Math.sqrt(num);

// 或者默认导出一个对象，方便整体导入
export default {
  add,
  multiply,
  calcSquareRoot
};

然后在组件里导入用：

// 比如pages/index.js里
import maths from '../utils/maths';

console.log(maths.add(5, 7)); // 输出12

2. 挂载到客户端全局（慎用） #

如果想在所有客户端组件里直接用maths，可以在pages/_app.js（App Router用app/layout.js）里挂载到window：

// pages/_app.js
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 只在客户端挂载，useEffect确保只在浏览器环境执行
    window.maths = {
      add: (a, b) => a + b,
      multiply: (a, b) => a * b
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

之后在客户端组件里直接用window.maths.add(2, 4)就行，但这种方式不利于代码维护和Tree Shaking，除非必要不推荐用。

3. 用自定义Hook封装（适合结合React场景） #

如果需要和React状态结合，写个Hook封装：

// hooks/useMaths.js
export const useMaths = () => {
  const add = (a, b) => a + b;
  const multiply = (a, b) => a * b;
  // 可以加一些依赖状态的计算逻辑
  const calculateArea = (width, height) => width * height;

  return { add, multiply, calculateArea };
};

组件里用的时候：

import { useMaths } from '../hooks/useMaths';

function ProductCard() {
  const { calculateArea } = useMaths();
  const cardArea = calculateArea(200, 300);
  return <div>卡片面积：{cardArea}</div>;
}

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