このブログは、アフィリエイトプログラムやアドセンスを利用しています。

WSLでnext.jsのセットアップをしてみた。

npx create-next-app@latest iwakura

# iwakuraはアプリ名

で、以下のエラーが出ました。

'\\wsl.localhost\Ubuntu\home\tatsu\next.js\iwakura'
上記の現在のディレクトリで CMD.EXE を開始しました。
UNC パスはサポートされません。Windows ディレクトリを既定で使用します。
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes

Aborting installation.
Unexpected error. Please report it as a bug:
 Error: EPERM: operation not permitted, mkdir 'C:\Windows\iwakura'
    at Object.mkdirSync (node:fs:1395:3)
    at createApp (C:\Users\tatsu\AppData\Local\npm-cache\_npx\cc2145a2fe1558fa\node_modules\create-next-app\dist\index.js:74:41553)
    at async run (C:\Users\tatsu\AppData\Local\npm-cache\_npx\cc2145a2fe1558fa\node_modules\create-next-app\dist\index.js:74:50584) {
  errno: -4048,
  syscall: 'mkdir',
  code: 'EPERM',
  path: 'C:\\Windows\\iwakura'
}

next.jsアプリケーションの設定はデフォルトで進めたのですが、WSLなのにCドライブに書き込みに行ってはじかれてしまいます。

調べてみると、npmやnodeが古い可能性ありという手掛かりがありました。

せっかくなので、人気のnvmをインストールしてみます。

github.com

wslで以下を実行。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

出力ログは参考程度でお願いします。

一度、ターミナルで開いているWSLを閉じます。

その後、バージョン確認

node入っていないようです。(まだnvm実行していないので当たり前?)

nodeのページでLTSを確認しました。

nodejs.org

nodeのホームページでnvmの使い方も解説していましたので、以下を実行。

nvm install 20

バージョン再確認

もう一度、next.jsのアプリを設定してみます。

#nextのアプリを作成したいディレクトリに移動
cd hoge

# appは好きなアプリ名を指定
npx create-next-app@latest app

今度は成功しました。

nextアプリを立ち上げたディレクトリ(この場合はappディレクトリに移動する)で、以下を打てばnext.jsが起動します。

npm run dev