🍆

Next.js + Supabaseのローカル環境が重すぎて開発が進まない問題を改善する際にやったこと【Windows勢向け】

2025/02/03に公開

開発環境

  • Windows 11 Pro
  • HP Spectre X360(2017年モデル)
  • Intel(R) Core(TM) i7-8550U CPU
  • メモリ16GB

上記のように化石級のノートパソコンで開発しています。

......と自虐しながらも、基本的にはサクサク動いてくれる程にまだまだ現役です。

しかし、Supabaseをローカル環境で動かすと結構厳しい状態になることも珍しくありませんでした。メモリ使用率、CPU使用率がともに99%になることも度々ありました。Next.jsでファイルを編集してブラウザ反映まで1分ぐらいかかる酷い状態でした。

そこで、色々と調整したところメモリ使用率が75%前後、CPU使用率も40%ぐらいに抑えられて、作業中のストレスも大幅に改善したので、そのメモを残しておきます。

1. WLSではなくWSL2を使うようにした

Docker DesktopはWSL2を使うと大幅に効率が良くなります。
古いパソコンを使っている方はWSLのままになっている人も多いと思います。
ぜひWSL2へと切り替えてみてください。

(よくわかんない人向け: WSLとWSL2は別物です!WSLには通訳役みたいなのが間に入るため遅かったようです。WSL2ではガチのLinuxになるようでしてかなり高速です。)

これだけでもかなり改善します!

WSL / WLS2どっちを使っているか判別するには?

コマンドプロンプトから wsl -l -v を実行してみましょう。

  NAME              STATE           VERSION
* docker-desktop    Running         2
  Ubuntu-20.04      Stopped         2

docker-desktopおよびUbuntuがどちらもVERSION 2になっていればWSL2が使われています。VERSION 1の場合はWSLのままになっています。

2. WSL2の .wslconfig を設定した

C:\Users\【ユーザー名】\.wslconfig にある .wslconfig ファイルを調整しました。
このファイルはWSL2で使用するメモリの制限やCPUの制限ができるものです。

[wsl2]
memory=2GB
swap=0
processors=4

こんな感じに設定しておきました。
メモリ2GB、CPU4コア使用に制限することで極端に重くならないように対策しています。Supabaseを動かすにはこれだけあれば十分です。

3. Docker Desktopをアップグレードした

Docker version 27.4.0, build bde2b89 にアップグレードしました。

ただの気の所為かもしれませんが、「Resource Saver」機能が割と効いてくれているように思います。古いバージョンの方はアップグレードしておきましょう!

4. Next.jsの開発環境で Turbopack を使うようにした

個人的にこういったバンドルツールは不具合の温床になりやすいと思い込んでいるため、Turbopackが登場した当初は全く使う気になりませんでした。

登場から結構時間が経ったのでそろそろ使ってもいいかなと思いTurbopackを使い始めました。

見違えるほどにホットリードが早くなりました!
まだ使ってない方は導入しましょう!圧倒的に早くなります!

@svgr/webpack も問題なく動きます。記述例を下記に掲載しておきます。
この辺りの書き方は情報が少ないのでTS型を見ながら判断すると良いでしょう。

next.config.ts
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: [
            {
              loader: "@svgr/webpack",
              options: {
                svgo: false,
              },
            },
          ],
          as: "*.js",
        },
      },
    },
  },

おしまい

見違えるように改善するので取り入れてみてください!
Windows勢に幸あれ!

Discussion