如何在Next.js中全局定义getUserFromToken类辅助函数，无需逐文件导入即可全局使用？

嘿，我刚好处理过类似的需求，给你分享几个靠谱的方案，不管是API路由还是前端页面/组件都能轻松用上：

一、针对API路由（Node.js环境） #

API路由运行在Node.js环境里，我们可以通过扩展global对象来实现全局可用：

1. 创建全局声明文件（TS项目必备） #

在项目根目录下新建types/global.d.ts，添加类型定义避免TypeScript报错：

declare global {
  namespace NodeJS {
    interface Global {
      getUserFromToken: (token: string) => Promise<{ id: string; email: string } | null>;
    }
  }
}

export {};

JS项目可以跳过这一步，直接进行后续操作。

2. 挂载全局函数到Node环境 #

新建lib/global-helpers.ts（或JS文件），导入你的辅助函数并挂载到global对象上：

import { getUserFromToken } from './your-helper-file';

// 将函数挂载到全局
global.getUserFromToken = getUserFromToken;

3. 让Next.js自动加载初始化文件 #

修改next.config.js（没有的话直接新建），配置Webpack在服务器启动时自动加载上面的初始化文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 保留你原有的其他配置
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 仅在服务器端加载全局辅助函数
      require('./lib/global-helpers');
    }
    return config;
  },
};

module.exports = nextConfig;

现在所有API路由里，你直接调用getUserFromToken(token)就能用了，不用再手动导入！

二、针对前端（浏览器环境） #

前端页面和组件运行在浏览器里，我们可以把函数挂载到window对象上：

1. 补充浏览器环境的类型声明（TS项目） #

继续在types/global.d.ts里添加浏览器端的类型定义：

declare global {
  interface Window {
    getUserFromToken: (token: string) => Promise<{ id: string; email: string } | null>;
  }
}

export {};

2. 在自定义App中挂载全局函数 #

修改pages/_app.tsx（或_app.jsx），在应用初始化时把函数挂到window上：

import { useEffect } from 'react';
import { getUserFromToken } from '../lib/your-helper-file';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    // 将函数挂载到window对象
    window.getUserFromToken = getUserFromToken;
  }, []);

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

export default MyApp;

现在任何前端组件或页面里，直接用window.getUserFromToken(token)就能调用，TS也不会报错。

三、前端备选方案：自定义Hook（更优雅的局部全局） #

如果觉得挂载到window不够优雅，前端还可以用自定义Hook封装，虽然需要导入，但比每次导入原函数更简洁：

// lib/useGetUserFromToken.ts
import { getUserFromToken } from './your-helper-file';

export const useGetUserFromToken = () => {
  return getUserFromToken;
};

之后在组件里只需导入这个Hook：

import { useGetUserFromToken } from '../lib/useGetUserFromToken';

function ProfilePage() {
  const getUserFromToken = useGetUserFromToken();
  
  // 使用函数
  const fetchUser = async () => {
    const user = await getUserFromToken('your-token');
    // 后续逻辑...
  };
  
  return <div>用户页面内容</div>;
}

注意哦，API路由和前端是完全独立的运行环境，所以需要分别处理全局挂载~

内容来源于stack exchange