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

Question

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

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

我的问题是：以前有没有人做到这一点并且可以在这里分享一些细节？

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

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

标签： next.jsserverlessvercel

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，则可以使用vercel.json.

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