pnpmでNext.jsのプロジェクトをたてるぞ
pnpmであたらしいプロジェクトってたてたことないかも
過去にね、制作中のサービスを「yarn」から「pnpm」におきかえる実験をしました。
記事はこちらですね。
今日、1から立てといてねって指示が来て、
そういややったことねェ…
と思ったので、今後来てもここに逃げてこれば困らないように書いておこうと思いました。
環境
- Mac M1 Venture13.1（前回と変わってない。ビビリなのでアプデをしていないのだフハハ）
ここからたてるから…あとの環境は特になにもないか。たぶん
あとなにがいる？
参考リンク
こちら公式です yarnからpnpmに移行する方法 yarnからpnpmに移行する方法② pnpmってなに
nextjsのセットアップ
手順
install
まずインストールしますわな。つくるディレクトリ直下（なお、現在何もなし）まで飛んでインストールするんだけど、
公式の見解はこう
$ curl -fsSL https://get.pnpm.io/install.sh | sh -
これ前回できんかったから、びびりだからやらん。
今回はこれで行ってみました。
$ npm install -g pnpm
すると…
いや、できたよ！とか、微妙よ！とか言えよ！お前、npmアプデとしか言ってこんやんなんだおまえ
そして…ディレクトリのなかは空っぽ。
pnpm create-next-app
このディレクトリはpnpmの使い手になったと信じて
$ pnpm create-next-app
なんかあんまり公式見つけられなかったんだけど、ここでいけんかったら知らんと思ってとりあえずやってみた
そうすっと
✔ What is your project named?
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
おおお！！？聞かれたことあるやつや！！
（どうでもいいけど質問項目鬼少ないな Vueが多いのか、Nuxtが多いのか、pnpmだからすくないのか、Reactだから少ないのか…？）
ほんとかおまえ？ちゃんとインストールされてるのか？
"dependencies": {
"@next/font": "13.3.0",
"@types/node": "18.15.11",
"@types/react": "18.0.35",
"@types/react-dom": "18.0.11",
"next": "13.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.4"
}
されとった
node_modules存在はするけどおまえはどうだ？
$ node -v
v16.19.0
されとった
起動してみる
$ pnpm dev
起動もする
素晴らしい！
localhostポート変更
"scripts": {
- "dev": "next dev",
+ "dev": "next -p 3334",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
ちょっとおもうこと
① 今回も、yarnでもいける
なんか、今回も例にもれずpnpm devでも起動するけど、yarn devでも問題なく起動する。
いや、前回のときはyarn→pnpmへの移行だったから残り香があるのかと思ってたけどそうでもないんか。
だから、ミスってyarnとか入力しちゃった時ブロックしてくれるやつ、今回もちょっと入れとこうと思った。
これこれ↓
"scripts": {
+ "preinstall": "npx only-allow pnpm",
"dev": "next -p 3334",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
やってみた
今回もミスったふりしてyarnって打ってみた。
"scripts": {
+ "preinstall": "npx only-allow pnpm",
"dev": "next -p 3334",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
なんか前回のときより怒りが強くないかい？
前回のやつのスクショ↓
まあいいわ、今回も、止めてくれるならなんでも。笑
② しまった、これでやってみたかったんだった忘れてた
今回npmでやったけど、yarnでもできるっぽかった、しまった。
こいつ。
でも、こいつでやるならさきにyarnをinstallしなかんか？それはめんどくさいか（次回こそ実験したいぞおおおお）
③ You can update by running: pnpm add -g create-next-app ？
なんか言ってくるんだけどやってみるべきなんかなあ。
以上、報告でしたー。
Discussion