跳至内容

运行时配置

警告

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

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 的页面**必须**使用 getInitialPropsgetServerSideProps,或者您的应用程序必须具有一个带有 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