Question

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

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

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

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

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

Answer 1

“维护模式”可以通过vercel.json中的redirects属性来实现。

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

这将添加一个与传入请求匹配的通配符路由，然后发出/maintenance.html位置的临时重定向。

使用最新的Next.js Canary，您可以在没有vercel.json的情况下实现此功能，而可以使用next.config.js。尝试npm install -g next@canary并创建一个next.config.js：

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

请注意，您不能在不重新部署的情况下对部署（配置或环境变量）进行更改。

Answer 2

要添加 @ptrkcsk 的评论，如果您打算将维护页面放在 pages 目录中，并且正在使用 <Image> 组件渲染图像next/image 您还需要将您的 static 文件夹包含到重定向正则表达式中。

这是对我有用的源模式：/((?!maintenance)(?!_next)(?!static).*)

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

2 个答案: