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を削除するスクリプトを書くとシンプルに実現できる。

参考

• next.config.js: Redirects | Next.js