Zenn
Closed11

Next+MicroCMSでブログ作る

JavaScript
Next.js
Vercel
microCMS
#
ブログ
kasumidyayakasumidyaya

Nextの新しいプロジェクト作る。

npx create-next-app@latest --typescript

TypeScript使うので、 --typescript オプションつける。

kasumidyayakasumidyaya

インストール中にエラー出る。

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for next@13.4.12: wanted: {"node":">=16.8.0"} (current: {"node":"14.21.3","npm":"6.14.18"})
npm WARN notsup Not compatible with your version of node/npm: next@13.4.12
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm64-gnu@13.4.12 (node_modules/next/node_modules/@next/swc-linux-arm64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-gnu@13.4.12: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-ia32-msvc@13.4.12 (node_modules/next/node_modules/@next/swc-win32-ia32-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-ia32-msvc@13.4.12: wanted {"os":"win32","arch":"ia32"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm64-musl@13.4.12 (node_modules/next/node_modules/@next/swc-linux-arm64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-musl@13.4.12: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-darwin-arm64@13.4.12 (node_modules/next/node_modules/@next/swc-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-darwin-arm64@13.4.12: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-gnu@13.4.12 (node_modules/next/node_modules/@next/swc-linux-x64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-gnu@13.4.12: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-arm64-msvc@13.4.12 (node_modules/next/node_modules/@next/swc-win32-arm64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-arm64-msvc@13.4.12: wanted {"os":"win32","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-x64-msvc@13.4.12 (node_modules/next/node_modules/@next/swc-win32-x64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-x64-msvc@13.4.12: wanted {"os":"win32","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-musl@13.4.12 (node_modules/next/node_modules/@next/swc-linux-x64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-musl@13.4.12: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})

nodeのバージョン古いから。仕事の開発環境の都合上おいそれと上げれない。
なのでVoltaを使う。

https://volta.sh/

kasumidyayakasumidyaya

Voltaは仕事であらかじめインストールされてるので、最初の手順は割愛。

普通に volta install node って叩いたらグローバルのnodeのバージョン書き換わった。あぶねー。

作業ディレクトリであらためて下記コマンドを叩く。
バージョンは一旦最新を入れる。
volta pin node@latest

volta pin でそのディレクトリに入るだけで指定のnodeのバージョンになる。便利。
Voltaは Package.json に記載されるだけなのでとにかく管理が楽。

Package.json
"volta": {
    "node": "20.5.0"
  }
kasumidyayakasumidyaya

localhost立ち上げる。
npm run dev

...なんかうまく立ち上がらん。

➜  dyy_blog git:(main) ✗ npm dev run
Unknown command: "dev"

Did you mean this?
    npm run dev # run the "dev" package script

To see a list of supported npm commands, run:
  npm help
kasumidyayakasumidyaya

ターミナル再起動したら行けた。キャッシュかな。
Package.jsonにはちゃんとnextの "dev": "next dev" の記述あった。確認して偉い。

ぶじlocalhost立ち上がって偉い。
http://localhost:3000/

このスクラップは2023/10/30にクローズされました