如何在Next.js应用中让变量全局可用于所有模块？

当然可以，下面是几种实用的方案，适配不同场景：

1. 用next.config.js配置环境变量 #

适合存放静态常量、配置项这类不需要编译的值：
在next.config.js里添加env字段：

// next.config.js
module.exports = {
  env: {
    APP_NAME: '我的Next.js应用',
    COMMON_UTIL_VERSION: '1.0.1'
  }
}

之后在任意组件、模块里直接用process.env.APP_NAME访问，完全不用导入。注意：这种方式的变量会被打包到客户端代码里，绝对不能放敏感信息（比如API密钥）。

2. TypeScript项目补全全局类型 #

如果用TS，为了避免类型报错，得给全局环境变量加类型声明：
在项目根目录建types/global.d.ts文件：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      APP_NAME: string;
      COMMON_UTIL_VERSION: string;
    }
  }
}

export {};

3. 挂载到window对象（仅客户端用） #

如果是只在客户端运行的工具类，可以挂到window上：
在pages/_app.js或者_app.tsx里初始化：

// pages/_app.js
import MyToolkit from '../utils/MyToolkit';

function MyApp({ Component, pageProps }) {
  // 只在客户端环境挂载
  if (typeof window !== 'undefined') {
    window.MyToolkit = MyToolkit;
  }
  return <Component {...pageProps} />;
}

export default MyApp;

之后在客户端组件里直接用window.MyToolkit调用就行，但记住服务端渲染的组件里不能用，因为服务端没有window对象。

4. 统一导出模块（推荐工具类场景） #

其实对于常用工具类，更规范的做法是建一个统一导出的入口文件，虽然还是要导入，但比每次单独导更省心：
比如建utils/index.js：

import MyToolkit from './MyToolkit';
import FormatUtils from './FormatUtils';

export { MyToolkit, FormatUtils };

之后在需要的地方只需要导入这个统一模块：import { MyToolkit } from '../utils';，既保持了模块化，又减少了重复导入的麻烦。

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