【React/Next.js】依存関係やキャッシュのせいで急に動かない？？Next.jsにおけるキャッシュの消し方。styleが急に効かなくなった??よくわからないエラーが出てしまった時のとりあえずの対処法。

はじめに

Next.jsを利用しているときにさっきまで動いていたのに急に動かなくなること、友人と同じ環境なのに自分だけ動かないなんてことありませんか？Next.jsを使う際によくあることです。今回は、この際の解決方法を紹介します。

解決方法

以下のコードを打ち込み

rm -rf node_modules/
rm -rf .next

自分の使っているパッケージに合わせたインストールを行う

npm install

npm以外の場合

• yarn

  yarn install
  

• pnpm

  pnpm install
  

• bun

  bun install
  

説明

1. 依存関係の削除

   rm -rf node_modules/
   

   node_modulesディレクトリ内の依存パッケージをすべて削除します。依存パッケージがキャッシュされていたり、破損していたりする場合があるため、一度削除し、後で再インストールすることで問題を解決できる可能性があります。
   
   

2. キャッシュの削除

   rm -rf .next
   

   次に、.nextディレクトリを削除します。このディレクトリには、Next.jsのビルド時に生成されるキャッシュファイルが格納されています。キャッシュが原因で問題が発生している場合、このディレクトリを削除することで解決できます。
   
   

3. 依存関係の再インストール

   npm install
   

   依存関係とキャッシュを削除した後は、再び依存パッケージをインストールする必要があります。

   npm以外の場合

   • yarn

     yarn install
     

   • pnpm

     pnpm install
     

   • bun

     bun install
     

さいごに

今回は、Next.jsで開発中に急に依存関係とキャッシュを削除し、再インストールすることで問題を解決する方法を共有しました。絶対に正しいはずなのに動かない！急にstyleが効かなくなって、HTMlそのままになってしまったときに役立ちます。多くの問題を解決できる可能性があり、この作業をしてもなにも支障を起こすことはありません。そのため、よくわからないエラーが出た時のとりあえずの対処法として覚えておきましょう！！
それではみなさん、良いエンジニアライフを〜👋