Skip to content

Runtime Config

添加客户端和服务器运行时配置到您的Next.js应用。

警告:

要向您的应用添加运行时配置,请打开next.config.js并添加publicRuntimeConfigserverRuntimeConfig配置:

js
module.exports = {
  serverRuntimeConfig: {
    // 仅在服务器端可用
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // 传递环境变量
  },
  publicRuntimeConfig: {
    // 将在服务器和客户端都可用
    staticFolder: '/static',
  },
}

将任何仅服务器端的运行时配置放在serverRuntimeConfig下。

任何客户端和服务器端代码都可以访问的内容应该放在publicRuntimeConfig下。

依赖于publicRuntimeConfig的页面必须使用getInitialPropsgetServerSideProps,或者您的应用必须有一个带有getInitialProps自定义应用以退出自动静态优化。运行时配置将不会对任何页面(或页面中的组件)在未进行服务器端渲染的情况下可用。

要访问应用中的运行时配置,请使用next/config,如下所示:

jsx
import getConfig from 'next/config'
import Image from 'next/image'

// 仅包含serverRuntimeConfig和publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// 仅在服务器端可用
console.log(serverRuntimeConfig.mySecret)
// 将在服务器端和客户端都可用
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
  return (
    <div>
      <Image
        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
        alt="logo"
        layout="fill"
      />
    </div>
  )
}

export default MyImage