@next/bundle-analyzerが本番環境で読み込まれないようにする

背景1）next buildでビルド + next startでNext.jsを動かしている

• 現在のプロジェクトではNext.jsをGAE（Google App Engine）で動かしている
• GAEでNext.jsを動かすには「next buildでビルド + next startで起動」という形になる

背景2）Next.jsのプロジェクトで@next/bundle-analyzerを導入

• パフォーマンスチューニングのためにバンドルサイズを可視化できる@next/bundle-analyzerを導入
• READMEには以下のような導入手順が紹介されている
  1. npm install @next/bundle-analyzer
  2. next.config.jsで以下のように記述

     const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
     })
     module.exports = withBundleAnalyzer({ ここにconfig })
     

• 本番環境では使わないと思い@next/bundle-analyzerをdevDependenciesに追加した

発生した問題

• 本番環境（実際にはステージング環境）でnext start実行時に次のエラーが発生

  Error: Cannot find module '@next/bundle-analyzer'
  

• next startでの起動時にはnext.config.jsが読み込まれるらしくrequire('@next/bundle-analyzer')の部分でエラーになっていた

対応

ドキュメントに書かれているとおり、devDependenciesではなくdependenciesに入れれば解決する。しかし、本番環境でのインスタンス起動時に余計なものをrequireしたくない（起動時間に影響を及ぼす可能性もある）。

そこで以下のように記述することにした。

const withBundleAnalyzer = process.env.ANALYZE === 'true'
    ? require('@next/bundle-analyzer')({ enabled: true })
    : (config) => config;
module.exports = withBundleAnalyzer({ ここにconfig })

これなら環境変数でANALYZE=trueを指定しない限りrequireは実行されない。もちろん@next/bundle-analyzerはdevDependenciesのままでOK。