Docker部署的Next.js项目使用getStaticProps时serverRuntimeConfig为空的问题咨询

阿华AIGC实验室

2026-5-6

解决Next.js Docker部署中serverRuntimeConfig为空的问题

你遇到的这个场景很常见——Docker环境下用getStaticProps时，serverRuntimeConfig返回空对象，但publicRuntimeConfig能正常读取。我来帮你拆解可能的原因和对应的解决办法：

第一步：确认配置获取方式是否正确

先检查你在getStaticProps里读取配置的代码，必须用Next.js官方提供的getConfig方法，否则可能无法正确拿到服务端配置：

import getConfig from 'next/config'

export async function getStaticProps() {
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
  // 先打印确认值是否为空
  console.log('serverRuntimeConfig:', serverRuntimeConfig)
  
  // 你的业务逻辑
  const res = await fetch(`${serverRuntimeConfig.baseUrl}/your-api-endpoint`)
  const data = await res.json()

  return { props: { data } }
}

如果这段代码里serverRuntimeConfig还是空，继续看下面的解决方案。

原因1：getStaticProps的运行时机不匹配

默认情况下，getStaticProps是在构建阶段执行的，而serverRuntimeConfig是为运行时服务器端设计的配置。如果你的Next.js应用是在Docker镜像构建阶段就执行了getStaticProps，这时候serverRuntimeConfig可能还没被正确加载（构建环境和运行环境的配置是隔离的）。

解决方案：启用增量静态再生（ISR）

让getStaticProps在服务器运行时定期重新执行，这样就能读取到运行时的serverRuntimeConfig了：

export async function getStaticProps() {
  const { serverRuntimeConfig } = getConfig()
  const res = await fetch(`${serverRuntimeConfig.baseUrl}/your-endpoint`)
  const data = await res.json()

  return {
    props: { data },
    revalidate: 60 // 每60秒重新生成页面，可按需调整时间
  }
}

原因2：Next.js版本的配置方式变更

如果你的Next.js是12+版本（尤其是13+的App Router），serverRuntimeConfig和publicRuntimeConfig的使用场景已经被更灵活的环境变量替代，官方现在更推荐用环境变量来管理不同环境的配置。

解决方案：改用环境变量（推荐）

这种方式不仅能解决当前问题，还能让不同环境（开发/测试/生产）的配置切换更灵活：

修改next.config.js，直接读取Docker环境变量：

module.exports = {
  env: {
    // 带PUBLIC_前缀的会暴露给客户端，不带的仅服务端可见
    PUBLIC_BASE_URL: process.env.PUBLIC_BASE_URL || 'http://localhost/api/v1',
    SERVER_BASE_URL: process.env.SERVER_BASE_URL || 'http://backend_nginx_1/api/v1/'
  }
}

在Docker配置（比如docker-compose.yml）里设置环境变量：

services:
  nextjs:
    build: .
    environment:
      - SERVER_BASE_URL=http://backend_nginx_1/api/v1/
      - PUBLIC_BASE_URL=http://localhost/api/v1
    networks:
      - your-docker-network # 确保和后端服务在同一个网络中

在getStaticProps里直接读取环境变量：

export async function getStaticProps() {
  const res = await fetch(`${process.env.SERVER_BASE_URL}/your-endpoint`)
  const data = await res.json()

  return { props: { data }, revalidate: 60 }
}