next.jsでメンテナンスモードを実装する場合の書き方

next_js_maintenance_mode.md

手順

• メンテナンス用のページを定義する
  • pages/maintenance.tsx を定義する
• next.config.js のredirectsに以下の設定をする
  • メンテナンスモードの場合、 /maintenance 以外のパスを /maintenance にリダイレクトさせる
  • メンテナンスモードではない場合、 /maintenance を / にリダイレクトさせる
• .env ファイルにメンテナンスモードのフラグを設定する

maintainance.tsx

"use strict";

import type { NextPage } from "next";

const Maintenance: NextPage = () => {
  return <div>メンテナンス中です</div>;
};

export default Maintenance;

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async redirects() {
    return process.env.MAINTENANCE_MODE === "true"
      ? [
          {
            source: "/((?!maintenance$).*$)",
            destination: "/maintenance",
            permanent: false,
          },
        ]
      : [
          {
            source: "/maintenance",
            destination: "/",
            permanent: false,
          },
        ];
  },
};

module.exports = nextConfig;

.env

MAINTENANCE_MODE=false