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のPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Next.js 11

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

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る その3

アウトライン化大事