运行时配置
警告
- 此功能已弃用。 我们建议改用环境变量,它也支持读取运行时值。
- 您可以使用
register
函数在服务器启动时运行代码。- 此功能不适用于自动静态优化、输出文件跟踪或React 服务器组件。
要向您的应用程序添加运行时配置,请打开 next.config.js
并添加 publicRuntimeConfig
和 serverRuntimeConfig
配置
next.config.js
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/static',
},
}
将任何仅服务器的运行时配置放在 serverRuntimeConfig
下。
客户端和服务器端代码都可以访问的任何内容都应放在 publicRuntimeConfig
下。
依赖于
publicRuntimeConfig
的页面**必须**使用getInitialProps
或getServerSideProps
,或者您的应用程序必须具有一个带有getInitialProps
的自定义 App 以选择退出自动静态优化。运行时配置将无法用于任何页面(或页面中的组件),除非它是服务器端渲染的。
要在您的应用程序中访问运行时配置,请使用 next/config
,如下所示
import getConfig from 'next/config'
import Image from 'next/image'
// Only holds serverRuntimeConfig and publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Will only be available on the server-side
console.log(serverRuntimeConfig.mySecret)
// Will be available on both server-side and client-side
console.log(publicRuntimeConfig.staticFolder)
function MyImage() {
return (
<div>
<Image
src={`${publicRuntimeConfig.staticFolder}/logo.png`}
alt="logo"
layout="fill"
/>
</div>
)
}
export default MyImage
这有帮助吗?