Summary

Next.js 5 が公開されました。サーバーとクライアントで共通のWebpackパイプライン（ユニバーサルWebpack）を採用し、CSS/プリプロセッサやTypeScriptの読み込みが容易になり、プラグイン経由で拡張可能になっています。アップグレードは npm i next@latest react@latest react-dom@latest を実行してください。

Key Points

• ユニバーサルWebpack
  • サーバー/クライアント両方でWebpackが動作。next.config.jsのデコレータに isServer が渡されます（例: webpack(config, { dev, isServer })）。既存のWebpackローダーがそのまま使用可能。
• CSS とプリプロセッサ
  • import './index.css' が可能。必要なローダーはピア依存として追加（例: css-loader, style-loader, postcss-loader）。簡単に導入するには next-css のようなプラグインを利用：const withCss = require('next-css'); module.exports = withCss({...});。
• TypeScript サポート
  • ts-loader を使った設定で即時利用可。プラグイン next-typescript で簡潔に導入できる。
• プラグイン設計
  • プラグインは設定をデコレートする関数。既存のプラグイン（next-css, next-sass, next-less, next-typescript, @zeit/next-preact 等）を組み合わせて使える。
• Zones（マイクロアプリ連携）
  • パスベースで複数のNext.jsアプリを親ドメインに結合可能。ルールJSONと now alias -r rules.json my-domain.com などで運用。ローカル用に micro-proxy も公開。
• ビルドとキャッシュ改善
  • 大規模アプリでの next build が約23.6%高速化。動的importのバンドル名がコンテンツアドレス（ハッシュ）化され、デプロイ間で再ダウンロードを減らす。
• 本番ソースマップ
  • 本番で外部ソースマップを有効にするには if (!dev) config.devtool = 'source-map' を設定。

実務的な注意点

• 既存の next.config.js を確認し、webpack デコレータのシグネチャに isServer や defaultLoaders が追加されている点を反映してください。
• ローダーはプロジェクトで明示的にインストール・管理する（ピア依存）。プラグイン利用で設定を簡素化できます。