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

Question

我刚刚使用 Vercel.

将我的 nextjs 应用发布到生产环境

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

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

我猜它可以分两个级别完成：

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

Answer 1

“维护模式”可以通过环境变量和 redirects 属性在您的 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 属性中的 redirects 属性实现“维护模式” 14=].

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

Answer 2

添加 @ptrkcsk 的评论，如果您打算将维护页面放在 pages 目录中并使用 [=来自 next/image 的 11=] 组件，您还需要将 static 文件夹包含到重定向正则表达式中。

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

Answer 3

我目前使用的另一种解决方案是创建一个单独的维护页面，然后根据环境变量有条件地拦截实际组件的呈现。

我通过将 _app.js 代码调整为：

来实现这一点

function MyApp({ Component, pageProps }) {
  if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'false') {
    return <Component {...pageProps} />
  } else {
    return <Maintenance />
}

请注意，如之前的回答中所述，这依赖于 Vercel 环境变量，根据他们的网站：“需要新部署才能使您的更改生效。”

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

How do I put a nextjs app in maintenance mode (using Vercel)

next.js

serverless

vercel

旧答案