Next.jsで環境に応じて特定のページを非表示にする

公開日時
更新日時

Next.js利用時に開発環境のみで使うデバッグページや、実装途中で開発環境以外にはまだ表示したくないページがある場合に、特定のページのみを非表示にする方法を調べた。

Vercel等のNode実行環境で動かす場合は next.config.js のredirectsをNODE_ENVに応じて出し分けるとシンプルに実現できる。

const env = process.env.NODE_ENV

const moduleExports = {
  async redirects() {
    if (env !== 'development') {
      return [
        {
          source: '/dev_only',
          destination: '/404',
          permanent: true,
        },
        {
          source: '/temporary_disabled_page',
          destination: '/404',
          permanent: false,
        },
      ]
    }

    return []
  },
}

module.exports = moduleExports

今回はVercelを利用していたので上記の対応を行った。

なお、静的ビルドを行う場合(Firebase Hostingにデプロイする場合)は package.jsonのscriptsに postbuild フックを追加し、該当ページのhtmlを削除するスクリプトを書くとシンプルに実現できる。

参考


Related #next.js

Next.js 11

手軽にアップグレードできた

FigmaでSVG Octocatを作る その3

アウトライン化大事

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした