Frontend Next.js 16

Next.js 16 への先行的マイグレーション

Next.js 16 へのアップデートに伴い、これまで利用していた middleware が非推奨となり、Runtime の制約（Edge Runtime 等）によるモジュール互換性問題が発生。最新のフレームワーク機能を活用しつつ、安定した認証・認可フローを再構築する必要がありました。

Edge Runtime では stream モジュールなどの Node.js 標準ライブラリが利用できず、エラーが発生。これを解消するため、Node.js ランタイムで動作する proxy.ts への移行を選択し、インフラ層に近い部分での制御を実現しました。

middleware から proxy への移行に加え、Turbopack 環境下で @svgr/webpack が正常に動作するためのカスタムルール設定を導入。開発体験とビルド速度の両立を実現しました。

next.config.ts (Turbopack Config) Modern DX

turbopack: {
  rules: {
    '*.svg': {
      loaders: ['@svgr/webpack'],
      as: '*.js',
    },
  },
}

Next.js 16 の最新機能を完全に活用しつつ、ランタイムエラーを解消。環境変数による DB ホストの動的管理に変更するなど、セキュリティ面での改善も同時に行い、保守性の高いモダンなアーキテクチャへ刷新しました。