いまさらNext.jsのチュートリアルをやってみた際のメモ (随時更新)

• ターミナルで以下を実行

  npx create-next-app@latest
  

  • Ok to proceed? (y) で y を入力
  • Error: Cannot find module 'fs/promises'のエラーが発生 (ローカルPCのNode.jsが古すぎたっぽい(いつ入れたやつか知らないくらい古い))
    • Run npm install -g npm@10.2.5 to update! とNoticeが出たので実行してみる。(以下のようになったので多分大丈夫そう。再度最初のコマンドを実行)

    npm WARN EBADENGINE Unsupported engine {
    npm WARN EBADENGINE   package: 'npm@10.2.5',
    npm WARN EBADENGINE   required: { node: '^18.17.0 || >=20.5.0' },
    npm WARN EBADENGINE   current: { node: 'v13.13.0', npm: '7.19.0' }
    npm WARN EBADENGINE }
    

  • SyntaxError: Unexpected token '.' のエラーが発生（nodeのバージョンが古すぎるっぽい。13.13.0だったが、Next.jsを動かすには18.17以上が必要だったっぽい）
  • 仕方ないので、homebrewのアップデートからスタート brew update (3.3.3 -> 4.2.2 に更新)
  • nodebrewをアップデート brew upgrade nodebrew (1.0.1 -> 1.0.1)
  • 現在のLTS版（20.10.0）をインストール nodebrew install-binary v20.10.0
    • Error: Darwin arm64 is not supported.のエラーが出る（M1 Macではnodebrew経由のinstallは無理っぽい。知らんかった...）
    • nvm経由のインストールにしてみる (参考)
      • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bashを実行しても、またSyntaxError: Unexpected token '.'になった...
      • 代わりに wget にしてみたが同じエラー(Unexpected token)になった...
      • npm install -g npm@10.2.5 としてしまったのが原因っぽい
      • npm uninstall -g npmで元に戻したいけど、同じエラー(Unexpected token)になる(八方塞がり...)
      • brew install nvmで簡単にnvmが入った
    • nvm install --ltsを実行して、node 20.10.0、npm 10.2.3 が入ったことを確認
• Yes/Noは以下のようにした(何が正解か知らない)

  ✔ What is your project named? … nextjs-tutorial
  ✔ 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
  

  • Success! Created nextjs-tutorial とコンソールに出た
  • 以下のようなツリー構造が完成した
    
• npm run devコマンドの実行で以下の画面となることを確認
  
• こちらを参考にgithubに新しいリポジトリを作成して、ここまでの内容をpush
  • git init, git add ., git commit, git remote add origin [url], git push origin master の5コマンドを実行
• チュートリアル(Routingから)を実施