有没有可能让一个变量对next.js应用程序中的所有模块全局可用,这样我就不必在需要的地方导入它?这对于我的应用程序中常用的实用程序之类的东西非常有用。
kzmpq1sx1#
Next.js不公开初始化脚本,甚至不公开可以执行某些代码的init钩子。所以,简而言之,这几乎是不可能的。话虽如此,你仍然可以部分实现这一点!您可以将Next.js与Page router或App router一起使用。此外,如果你使用Edge运行时而不是Node.js运行时,那么它可能会产生问题。最后,这种技术不适用于访问中间件内部的全局变量。如果您使用的是页面路由器,您可以创建一个自定义的App组件,并使用globalThis来实现这一点。
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:
src
*.d.ts
declare global { var myGlobalHello: () => void; }
如果您使用应用路由器,您可以使用根布局app/layout.jsx或app.layout.tsx文件执行完全相同的操作。使用全局变量是一种快速简单的方法,但这就像回到了编写JavaScript的旧方法,而忽略了ES模块所代表的所有优点。当涉及到编写单元和集成测试时,事情变得复杂起来,特别是当全局变量是不可序列化的(如函数)时。最后,如果您正在为实用程序模块进行深度导入,那么可以考虑使用aliases。
app/layout.jsx
app.layout.tsx
aliases
dly7yett2#
可以使用Environment Variables.在根目录下创建一个名为.env.local的文件,并在其中定义变量。例如,您可以定义变量,如:
.env.local
FIRST_NAME="John" LAST_NAME="Smith"
您可以在项目中的任何地方访问它,例如:
var fullName = process.env.FIRST_NAME + process.env.LAST_NAME;
需要注意的是,您必须在部署项目的所有环境中重新定义这些变量。
2条答案
按热度按时间kzmpq1sx1#
Next.js不公开初始化脚本,甚至不公开可以执行某些代码的init钩子。所以,简而言之,这几乎是不可能的。
话虽如此,你仍然可以部分实现这一点!您可以将Next.js与Page router或App router一起使用。此外,如果你使用Edge运行时而不是Node.js运行时,那么它可能会产生问题。最后,这种技术不适用于访问中间件内部的全局变量。
如果您使用的是页面路由器,您可以创建一个自定义的
App
组件,并使用globalThis
来实现这一点。如果你使用的是TypeScript,那么你必须在
src
文件夹中的某个地方创建*.d.ts
文件来声明global:如果您使用应用路由器,您可以使用根布局
app/layout.jsx
或app.layout.tsx
文件执行完全相同的操作。使用全局变量是一种快速简单的方法,但这就像回到了编写JavaScript的旧方法,而忽略了ES模块所代表的所有优点。当涉及到编写单元和集成测试时,事情变得复杂起来,特别是当全局变量是不可序列化的(如函数)时。最后,如果您正在为实用程序模块进行深度导入,那么可以考虑使用
aliases
。dly7yett2#
可以使用Environment Variables.
在根目录下创建一个名为
.env.local
的文件,并在其中定义变量。例如,您可以定义变量,如:
您可以在项目中的任何地方访问它,例如:
需要注意的是,您必须在部署项目的所有环境中重新定义这些变量。