Failed to load SWC binaryのエラー

エラー内容

DockerでNext.jsをyarn devで立ち上げようとしたら、下記のエラーが発生。ローカルでは立ち上がったのになんでだろう。

front_1  | yarn run v1.22.15
front_1  | $ next dev
front_1  | ready - started server on 0.0.0.0:3000, url: http://localhost:3000
front_1  | error - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
front_1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
front_1  | error Command failed with exit code 1.
app_front_1 exited with code 1

設定内容

ファイル構成

.
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── next.config.js
    └── （省略）

docker-compose.yml

version: "3.8"

services:
  front:
    build:
      context: ./front
    volumes:
      - ./front:/usr/src/app
    command: sh -c "yarn dev"
    ports:
      - 3000:3000
    stdin_open: true

Dockerfile

FROM node:14-alpine
WORKDIR /usr/src/app

原因

とりあえず、エラーの言う通り、下記の公式ページを見てみる。
https://nextjs.org/docs/messages/failed-loading-swc

要約すると、「高速なコンパイルやリフレッシュを実現する"SWC"が、あなたの環境では互換性がなくてエラーを起こしている。必要なパッケージをインストールするか、"SWC"の設定をオフにしてくれ。」ということらしい。

解決方法

具体的にやることとしては、こちらの記事の通り！
https://stackoverflow.com/a/69820670

STEP1〜3 SWCの設定をオフにする方法
STEP4 SWCに必要なパッケージをインストールする方法

STEP1

next.json.js

module.exports = {
  swcMinify: false // 追記
}

STEP2

ファイル構成

.
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── next.config.js
    ├── .babelrc # ファイル追加
    └── （省略）

STEP3

.babelrc

{
  "presets": ["next/babel"]
}

以上でSWCの設定はオフになるので、Dockerコンテナを再起動すると立ち上がるはず！

それでもダメなら、SWCに必要なパッケージ（next@canary）をインストールする方法を実施する。
バージョンでも動作するものとそうでないものがあり、この記事によると、バージョンnext@11.1.1-canary.7なら問題なく動作するらしい
https://zenn.dev/sora_kumo/articles/09a1369e53e5d0

STEP4

zsh

$ yarn add next@11.1.1-canary.7 # npmなら npm install next@11.1.1-canary.7

以上です！