NextJS如何在不同环境分别启用SSR渲染和静态页面生成模式

完全不需要升级服务器，通过以下代码层面的配置即可实现需求：

方案1：顶层条件导出（最简单，适配NextJS 12+所有pages router版本） #

利用ES6解构导出的特性，提前根据环境变量判断需要导出的渲染函数，避免条件导出语法错误。

1. 首先在不同环境的构建配置中新增独立的构建模式环境变量（不要修改默认NODE_ENV，避免影响NextJS内置优化逻辑）：
   • 预发布环境构建时配置：NEXT_BUILD_MODE=ssr
   • 客户生产环境构建时配置：NEXT_BUILD_MODE=static
2. 页面代码写法示例：

// 抽离通用数据获取逻辑，无需重复维护
const fetchPageData = async (ctx) => {
  const res = await fetch("你的Strapi接口地址")
  const data = await res.json()
  return { props: data }
}

// 按环境匹配对应渲染逻辑
const routeExports = {}
if (process.env.NEXT_BUILD_MODE === "static") {
  // 静态生成模式可单独配置revalidate、fallback等参数
  routeExports.getStaticProps = async (ctx) => {
    const baseRes = await fetchPageData(ctx)
    return {
      ...baseRes,
      revalidate: 60 // 按需配置增量静态再生规则
    }
  }
} else {
  routeExports.getServerSideProps = fetchPageData
}

// 顶层解构导出，符合ES Module语法规则
export const { getStaticProps, getServerSideProps } = routeExports

// 页面组件逻辑正常写即可
export default function Page(props) {
  return <div>{/* 页面内容 */}</div>
}

NextJS会自动忽略值为undefined的导出，不会出现同时存在两个渲染函数的报错。

方案2：基于页面扩展名的环境拆分（兼容性最好，无导出冲突风险） #

如果使用的NextJS版本较低，方案1不生效，可以用pageExtensions配置实现不同环境加载不同的渲染规则文件：

1. 修改next.config.js配置：

module.exports = {
  pageExtensions: process.env.NEXT_BUILD_MODE === "static"
    ? ["static.tsx", "static.js", "tsx", "js"]
    : ["ssr.tsx", "ssr.js", "tsx", "js"]
}

2. 页面文件拆分示例，公共逻辑完全复用：

pages/
  blog.static.js // 仅导出getStaticProps，引用共用的BlogPage组件
  blog.ssr.js // 仅导出getServerSideProps，引用共用的BlogPage组件
  components/
    BlogPage.js // 公用页面组件逻辑

构建时NextJS会自动根据配置的扩展名优先级加载对应文件，不需要修改业务代码。

注意事项 #

• 环境变量需要配置在构建阶段的运行环境中，如果是Vercel部署可以直接在项目设置的环境变量面板配置，预发布和生产环境分开设置即可
• 如果需要开启静态生成的增量更新、动态路径参数等能力，仅需要在static对应的逻辑分支中配置即可，不会影响SSR模式的运行

内容的提问来源于stack exchange，提问作者Ben