基于Next.js实现条件SSR及staging环境IP白名单访问限制问题咨询

方案1：保留getServerSideProps，内部加环境分支逻辑 #

你不需要完全禁用getServerSideProps，只需要在逻辑开头加环境判断，生产环境直接跳过校验流程即可，代码侵入性极低：

export async function getServerSideProps(context) {
  // 生产环境直接放行，走正常业务逻辑
  if (process.env.NODE_ENV === 'production') {
    return {
      props: {} // 这里放你原本要返回的业务参数
    }
  }

  // 仅非生产环境执行IP校验
  // Netlify 会自动在请求头注入真实客户端IP，不需要自行解析
  const visitorIp = context.req.headers['x-nf-client-connection-ip']
  // 白名单配置在Netlify后台的环境变量中，格式为逗号分隔的IP字符串
  const ipWhitelist = process.env.STAGING_IP_WHITELIST?.split(',') || []

  if (!ipWhitelist.includes(visitorIp)) {
    return {
      notFound: true // 也可以配置redirect到自定义403页面
    }
  }

  // 校验通过返回正常业务参数
  return {
    props: {}
  }
}

注意需要在Netlify后台分别给生产、staging环境配置对应的环境变量，生产环境不需要配置STAGING_IP_WHITELIST变量。

方案2：使用Netlify边缘函数做校验（与业务代码解耦） #

如果希望生产环境的页面保留静态生成能力、不需要走服务端渲染，可以用Netlify边缘函数全局做IP校验，完全不需要修改现有页面代码：

1. 在项目根目录新建netlify/edge-functions/ip-whitelist.ts文件，代码如下：

import type { Context } from "netlify:edge";

export default async (request: Request, context: Context) => {
  // 生产环境直接放行
  if (Netlify.env.get("NODE_ENV") === "production") {
    return context.next();
  }

  const clientIp = context.ip;
  const whitelist = Netlify.env.get("STAGING_IP_WHITELIST")?.split(",") || [];
  if (!whitelist.includes(clientIp)) {
    return new Response("Access Denied", { status: 403 });
  }
  return context.next();
};

2. 在项目根目录的netlify.toml中配置边缘函数生效规则：

[[edge_functions]]
path = "/*"
function = "ip-whitelist"

方案3：零代码使用Netlify原生访问控制 #

Netlify后台自带staging环境访问限制能力，不需要写任何代码：

• 进入Netlify站点后台，点击「Site settings」->「Access control」
• 找到「Restrict access to your site」板块，选择staging环境对应的部署分支
• 配置IP白名单规则即可，规则只会对指定分支生效，生产环境完全不受影响

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