next.js npm run devでEACCES: permission denied, mkdir '/Users/xxx/my-app/.next'になる場合

はじめに

next.jsで新規プロジェクトを作って、npm run devで開発環境を立ち上げようとしたらこんなエラーになりました。

$npm run dev

> indofullness-app@0.1.0 dev
> next dev

   ▲ Next.js 15.0.3
   - Local:        http://localhost:3000

 ✓ Starting...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

[Error: EACCES: permission denied, mkdir '/Users/name/my-app/.next'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'mkdir',
  path: '/Users/name/my-app/.next'
}
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Error: EACCES: permission denied, mkdir '/Users/name/my-app/.next'] {
  errno: -13,
  code: 'EACCES',
  syscall: 'mkdir',
  path: '/Users/name/my-app/.next'
}

Node.js v20.12.0

※ name/my-app の部分は編集して省略してます。

Next.js がプロジェクトフォルダ内に .next ディレクトリを作成しようとした際にアクセス許可がないのでエラーになるよ、ということらしいです。。。

権限を確認する

まずは権限を確認してみましょう。

$ ls -ld /Users/name/my-app
drwxr-xr-x  16 root  staff  512 11 30 22:20 /Users/name/my-app

現在のユーザー (上記パスのname) ではなく、root が所有者となっています。このため、npm run dev コマンドでフォルダ内に書き込みを行う権限がないためエラーになってます。

権限を変更する

$ sudo chown -R $(whoami) /Users/name/my-app

$ chmod -R 755 /Users/name/my-app

まずは指定したディレクトリとその中のすべてのファイルの所有者を現在のユーザーに変更します。
以下はGPTさんによる解説

sudo
管理者権限でコマンドを実行します。所有権の変更には通常、管理者権限が必要です。

chown
"change ownership" の略で、ファイルやディレクトリの所有者を変更します。

-R
再帰的 (recursive) に実行します。このオプションにより、指定されたフォルダとその中に含まれるすべてのサブフォルダやファイルの所有権が変更されます。

$(whoami)
現在ログインしているユーザーの名前を取得します。この値が新しい所有者になります。例えば、現在ログインしているユーザーが gento であれば、この部分は gento に展開されます。

次に指定したディレクトリとその中のすべてのファイルのアクセス権を 755 に設定

chmod
"change mode" の略で、ファイルやディレクトリのアクセス権（パーミッション）を変更します。

755
設定するパーミッション（アクセス権）です。以下に分解して説明します：
7 (所有者): 読み取り (r), 書き込み (w), 実行 (x) のすべてが許可される。
5 (グループ): 読み取り (r) と実行 (x) が許可される。
5 (その他): 読み取り (r) と実行 (x) が許可される。

これでnpm run devが成功です！！！