next.js - 如何将 nextjs 应用程序置于维护模式(使用 Vercel)

Question

我刚刚发布了我的 nextjs 使用 生产应用程序Vercel .

除了一小部分之外，我喜欢整个体验:我希望能够将我的应用程序放入 维修方式 ，但此选项在 Vercel 上似乎不可用。

我的问题是:有没有人以前实现过这个并且可以在这里分享一些细节？

我猜它可以在 2 个级别上完成:

修改我的应用程序，以便在检测到环境变量(即 MAINTENANCE_MODE=true )时，每个页面都重定向到维护屏幕。但是，这并不理想，因为在 Vercel 上添加环境变量需要进行部署才能将其考虑在内。

有一个简单的每个项目切换来启用/禁用 Vercel 的维护模式。那将是令人兴奋的。

Answer 1

“维护模式”可以通过环境变量和 redirects 实现您的属性(property)next.config.js (需要 Next.js 9.5.0 或更新版本)。

module.exports = {
  redirects() {
    return [
      process.env.MAINTENANCE_MODE === "1"
        ? { source: "/((?!maintenance).*)", destination: "/maintenance.html", permanent: false }
        : null,
    ].filter(Boolean);
  }
};

这会添加一个匹配传入请求的通配符路由，然后发出临时重定向 /maintenance.html地点。
请注意您 不能 无需再次部署即可更改部署(配置或环境变量)。

旧答案
如果您不使用 Next.js 或使用旧版本的 Next.js，可以使用 redirects 实现“维护模式”房产在 vercel.json .

{
  "redirects": [
    { "source": "/((?!maintenance).*)", "destination": "/maintenance.html", "permanent": false }
  ]
}