使一个变量对next.js应用程序中的所有模块全局可用

gc0ot86w  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(160)

有没有可能让一个变量对next.js应用程序中的所有模块全局可用,这样我就不必在需要的地方导入它?
这对于我的应用程序中常用的实用程序之类的东西非常有用。

kzmpq1sx

kzmpq1sx1#

Next.js不公开初始化脚本,甚至不公开可以执行某些代码的init钩子。所以,简而言之,这几乎是不可能的。
话虽如此,你仍然可以部分实现这一点!您可以将Next.js与Page router或App router一起使用。此外,如果你使用Edge运行时而不是Node.js运行时,那么它可能会产生问题。最后,这种技术不适用于访问中间件内部的全局变量。
如果您使用的是页面路由器,您可以创建一个自定义的App组件,并使用globalThis来实现这一点。

// pages/_app.jsx

if (!globalThis.myGlobalHello) {
  globalThis.myGlobalHello = () => console.log('Hello');
}
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

如果你使用的是TypeScript,那么你必须在src文件夹中的某个地方创建*.d.ts文件来声明global:

declare global {
  var myGlobalHello: () => void;
}

如果您使用应用路由器,您可以使用根布局app/layout.jsxapp.layout.tsx文件执行完全相同的操作。
使用全局变量是一种快速简单的方法,但这就像回到了编写JavaScript的旧方法,而忽略了ES模块所代表的所有优点。当涉及到编写单元和集成测试时,事情变得复杂起来,特别是当全局变量是不可序列化的(如函数)时。最后,如果您正在为实用程序模块进行深度导入,那么可以考虑使用aliases

dly7yett

dly7yett2#

可以使用Environment Variables.
在根目录下创建一个名为.env.local的文件,并在其中定义变量。
例如,您可以定义变量,如:

FIRST_NAME="John"
LAST_NAME="Smith"

您可以在项目中的任何地方访问它,例如:

var fullName = process.env.FIRST_NAME + process.env.LAST_NAME;

需要注意的是,您必须在部署项目的所有环境中重新定义这些变量。

相关问题