# Next.jsのGetting Started

以前こちらのブログでは Prisma の How To GraphQL という記事を参考に、私がGraphQLに触れる様子を全11回に渡って書き連ねていたのですが(1、2、3、4、5、6、7、8、9、10、11)、一年経って思ったのは、『GraphQL使う機会ほとんど無かった…』っていう。

そんなこんなでPrismaの最新動向をチェックしていたら↓のように私のような昔Rails使ってたおじさんに良さげ感というか。

これは自分みたいなRailsに馴染みのあるオジサンにも分かりやすいな〜👨‍🦰
Next.jsのZero-Configな感じとかTypeScriptの型ってこういう時イイよね〜みたいなところもついでに理解できる💻
--
Prisma - The Easiest Way to Work with a Database in Next.js https://t.co/gfuhB5ZVGd via @YouTube
— Eiji Shinohara (@shinodogg) April 12, 2021

で、どうも時代はNext.jsとTypeScriptか〜(以前 "Next.jsとVercelの出口はどこにあるのか" なんていう記事も書きましたが…)みたいな感じになってきていると思うので、ようやく重い腰をあげて(?)、Next.js(と、Prisma ORM)に取り組んでいきたいと思い始めた今日この頃でございます。

色々調べたり、Youtubeのビデオをみたりしても良いのだけど、実践するのが手っ取り早そうなので、まずはNext.jsのGetting Startedからやっていきたいと思います。

Getting Started

# 環境構築

Next.jsのGetting Started のページを見ると、『Node.js 10.13 or later』ということらしいので、叩いてみたら↓は問題なさそう。

$ node -v
v14.5.0

で、張り切って、npx create-next-app を叩いてみると、my-appって名前でイイか？って言われて、OKにすると、、incompatibleなモジュールがあるらしく、インストールはAbortしますよ的なメッセージ…。

$ npx create-next-app
npx: 1個のパッケージを1.526秒でインストールしました。
✔ What is your project named? … my-app
Creating a new Next.js app in /Users/eijishinohara/nextjs/my-app.

Installing react, react-dom, and next using yarn...

yarn add v1.22.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error jest-worker@27.0.0-next.5: The engine "node" is incompatible with this module. Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.5.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Aborting installation.
  yarnpkg add --exact react react-dom next --cwd /Users/eijishinohara/nextjs/my-app has failed.

どうも、nodeのバージョンが Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.5.0" こんな感じでアレっぽいので、バージョンを上げていきます。

Homebrewでやっていこうと思ったら、また何やら怒られました…ｗ

$ brew update
Error: 
  homebrew-core is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.

ってことで、なんだかshallow cloneはだめでunshallowにするってことみたいなのですが、それが何なのかは分かりませんが、Homebrew で Error: homebrew-core is a shallow clone が出て brew update が実行できない問題を読んでいたら、GitHubからの要請でこのようになった的な解説があって、言われた通りにgitコマンドを叩いてみました。

結構時間かかりましたが↓のように無事終わったみたいです、と。

$ git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow

remote: Enumerating objects: 649459, done.
remote: Counting objects: 100% (649412/649412), done.
remote: Compressing objects: 100% (223964/223964), done.
remote: Total 639973 (delta 421489), reused 631580 (delta 413152), pack-reused 0
Receiving objects: 100% (639973/639973), 254.85 MiB | 8.30 MiB/s, done.
Resolving deltas: 100% (421489/421489), completed with 6912 local objects.
From https://github.com/Homebrew/homebrew-core
   e2c833d326..b80a111769  master     -> origin/master

ってことで、brew update…とかってやってると、そもそも何がしたかったのか…っていう気分になってきますね。笑

You have 82 outdated formulae installed.
You can upgrade them with brew upgrade
or list them with brew outdated.

っていうことなので、brew upgradeしていきます。と思ったらこれだよ…的な。

Error: Your Command Line Tools are too outdated.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

ん、、なんかそれって、、、

$ softwareupdate --all --install --force
Software Update Tool

Finding available software
Downloading macOS Big Sur 11.2.3
Downloading: 76.81%

ですよね。。。あー、、なんだかもう。。。

ってことで、Big Surのバージョン上げたけどやっぱダメで、、やりたかないけど、、

sudo rm -rf /Library/Developer/CommandLineTools
$ sudo xcode-select --install
xcode-select: note: install requested for command line developer tools

ってことで。ようやくbrew upgrade、、、

$ node -v
v15.14.0

nodeのバージョン上がったみたいです、、

$ npx create-next-app
✔ What is your project named? … my-app
Creating a new Next.js app in /Users/eijishinohara/nextjs/my-app.

Installing react, react-dom, and next using npm...


added 276 packages, and audited 277 packages in 7s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created my-app at /Users/eijishinohara/nextjs/my-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-app
  npm run dev

よーし、ようやく環境整った。。。あれ、、でもPython動かなくなったぞ。。。(こっちはこっちで別でやっときます、、)

$ code .
/Users/eijishinohara/.pyenv/shims/python: line 21: /usr/local/Cellar/pyenv/1.2.15/libexec/pyenv: No such file or directory
/usr/local/bin/code: line 10: ./MacOS/Electron: No such file or directory

そしてようやく起動、、、

$ npm run dev

> my-app@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
event - compiled successfully
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

event - build page: /
wait  - compiling...
event - compiled successfully

Hello