Next.js使ってますか？

便利っすよねー。create-next-appで簡単に構築できるし、Redux入れれば大規模での開発も可能。

こんな便利なNext.jsですが気付いてしまいました。
容量をかなり圧迫していることに

node_modulesフォルダも確かに膨大でしたが、それよりも.nextのフォルダ自体にも大量のキャッシュが溜まっていました。
私のようにサンプルで作成したりするので、いちいちビルドのコマンドを変えるのは面倒。

対策

ってなわけで一括削除出来るスクリプトを作ってみました。
使用については自己責任でお願いします。

clean-dot-next.js

const fs = require('fs');
const pathFunc = require('path');

const dirs = fs.readdirSync(__dirname);

const deleteFolderAndFiles = (path) => {
  if (fs.existsSync(path)) {
    fs.readdirSync(path).forEach((dir) => {
      const current = pathFunc.join(path, dir);
      if (fs.lstatSync(current).isDirectory()) { 
        // 再帰処理
        deleteFolderAndFiles(current);
      } else {
        // ファイル削除
        fs.unlinkSync(current);
      }
    });
    // フォルダ削除
    fs.rmdirSync(path);
  }
};

const targets = dirs.map(d => {
  const path = pathFunc.join(__dirname, d, '.next');
  if (fs.existsSync(path)) {
    return path;
  } else {
    return null;
  }
}).filter(x => x != null);

const results = targets.map(path => {
  try {
    deleteFolderAndFiles(pathFunc.resolve(path));
    return {
      success: true,
      path,
    }
  } catch (err) {
    return {
      success: false,
      path,
      error: JSON.stringify(err),
    }
  }
});

console.log(JSON.stringify(results, null, 2));

私のフォルダの構成だとこんな感じになっているので、簡単に作成できました。
所要時間も2,30分程度で出来ました。

SourceCode
├[プロジェクト名]
├[プロジェクト名]
├ ...(省略)
└clean-dot-next.js　// 配置！

このような形でフォルダ構成になっていたので、.nextに該当するフォルダを削除するような形で実行しました。

node clean-dot-next.js

環境はWindowsですが、pathの解決も行っているので、iOSでも動くと思います。（動作未確認）
デバッグを貼ったりコメントアウトしたりなど、使用については自己責任でお願いします！

ポイント

fs.unlinkSyncはファイルの削除はできるが、フォルダの削除は出来ない
空ではないフォルダは削除できない
空のフォルダを削除するにはfs.rmdirSync()を使用する
上記のことからフォルダであれば再帰処理を実施、ファイルであれば削除。再帰処理が全て終わればフォルダを削除

ポイントからある通り特定の条件下でも動作することが出来ますので、フォルダに含まれるファイルを全て削除したい時はご利用ください。

余談

肥大化したjsの残骸はjsで殲滅させるのがマナーだと思いました。

オブジェクティブグループではXの投稿も平日毎日行っています！
IT関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr