运行时配置 | Next.js

警告：此功能被视为遗留方案，无法与自动静态优化、输出文件追踪或React 服务端组件 (RSC) 协同工作。请改用环境变量以避免初始化开销。

要为应用添加运行时配置，请打开 next.config.js 并添加 publicRuntimeConfig 和 serverRuntimeConfig 配置项：

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // 仅服务端可用
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // 通过环境变量传递
  },
  publicRuntimeConfig: {
    // 客户端和服务端均可访问
    staticFolder: '/static',
  },
}

所有仅限服务端的运行时配置应放置在 serverRuntimeConfig 下。

任何客户端和服务端代码均可访问的配置应放置在 publicRuntimeConfig 下。

依赖 publicRuntimeConfig 的页面必须使用 getInitialProps 或 getServerSideProps，或者你的应用必须包含带有 getInitialProps 的自定义 App 以退出自动静态优化。未通过服务端渲染的页面（或页面中的组件）将无法访问运行时配置。

要在应用中获取运行时配置，请使用 next/config，如下所示：

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