📘
Next.jsでnpmパッケージのアップデートが反映されない
はじめに
npmパッケージをアップデートしたにも関わらず、変更が反映されない問題に直面しました。
またVercelでデプロイしたサイトにも影響を及ぼしましたので解決策を共有します。
問題
What is cached
Vercel caches files based on the Framework Preset selected in your Project settings. The following files are cached in addition to node_modules/**, yarn.lock, and package-lock.json.
↑によるとVercelは
node_modules/**yarn.lockpackage-lock.json.next/cache/** (Next.js)
をキャッシュするようです！
解決方法
ローカルでの解決策としては、単純にnode_modulesフォルダと.nextフォルダを削除し、その後npm installとnpm run devを実行することで、変更が反映されました。
Vercelの環境では、以下の手順によってビルドキャッシュを無効にすることができます。
- 管理画面での設定
Vercel > settings > Environment Variables
| key | value |
|---|---|
| VERCEL_FORCE_NO_BUILD_CACHE | 1 |
- envファイルでの設定
env
VERCEL_FORCE_NO_BUILD_CACHE=1
これにより、Vercelはキャッシュされた古いデータを使用しなくなります。
おわりに
他にも解決策はあるようなので、詳しくはVercelの公式ドキュメントをご覧ください。
Discussion