如何将 nextjs 应用程序置于维护模式（使用 Vercel）

Question

我刚刚使用Vercel 将我的nextjs应用程序发布到生产环境中。

除了一小部分之外，我喜欢整个体验：我希望能够将我的应用程序置于维护模式，但 Vercel 上似乎没有此选项。

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

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

• 修改我的应用程序，以便MAINTENANCE_MODE=true在检测到环境变量（即）时，每个页面都重定向到维护屏幕。但是，这并不理想，因为在 Vercel 上添加环境变量需要进行部署才能将其考虑在内。
• 有一个简单的每个项目切换来启用/禁用 Vercel 的维护模式。那将是令人兴奋的。

Answer 1

“维护模式”可以通过环境变量和重定向属性来实现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，则可以使用 .js 中的重定向属性实现“维护模式” vercel.json。

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