【非エンジニア】GitHub にプッシュしたプロジェクトを Vercel に デプロイしたいが、エラーの原因が不明

前提

非エンジニアで恐縮ですが、ご相談させてください。

開発サイドの視点を学ぶため、書籍「作って学ぶ Next.js/React Webサイト構築」の内容を実践しようとしたのですが、セットアップPDFを見ながら開発環境を作る段階で詰まってしまいました。

書籍の目的:
Next.js/ReactでWebサイトを作るというものです。

セットアップPDFの流れ:
0. 各アカウント作成(GitHub、microCMS、Vercel、Netlify、Figma)
0. 各ツールのインストール
0. サイト公開のために、GitHub の設定を行った後、Next.js のプロジェクトをプッシュ
0. サイト公開のために、GitHub にプッシュしたプロジェクトを Vercel に デプロイする
0. デプロイできたら、公開されたサイトを確認できるようになる

上記の4で詰まっているため、5の公開されたサイトを確認することができない状態です。

実現したいこと

  • Vercel を使ってサイトを公開するために、GitHub にプッシュしたプロジェクトを Vercel に デプロイしたい

発生している問題・エラーメッセージ

  • Vercel にデプロイすると Build Failed となってしまい、紐付けができない状態なので紐付けをしたい
  • Vercel に表示されたエラーメッセージは下記参照(エラー文のみ抜粋)
[15:03:23.289] warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta". [15:03:36.341] error - ESLint: Failed to load config "prettier" to extend from. Referenced from: /vercel/path0/.eslintrc.json [15:03:50.162] Error: serviceDomain or endpoint may be wrong. [15:03:50.163] Details: Error: fetch API response status: 401 [15:03:50.163] at /vercel/path0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2949 [15:03:50.163] at /vercel/path0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:1650 [15:03:50.163] at Object.next (/vercel/path0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:1755) [15:03:50.165] at c (/vercel/path0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:494) [15:03:50.165] at processTicksAndRejections (node:internal/process/task_queues:96:5) [15:03:50.165] > Build error occurred [15:03:50.166] TypeError: Cannot read properties of undefined (reading 'map') [15:03:50.167] at getStaticPaths (/vercel/path0/.next/server/pages/blog/[slug].js:302:25) [15:03:50.167] at processTicksAndRejections (node:internal/process/task_queues:96:5) [15:03:50.167] at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:493:31) [15:03:50.167] at async /vercel/path0/node_modules/next/dist/build/utils.js:628:115 [15:03:50.168] at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20) { [15:03:50.168] type: 'TypeError' [15:03:50.168] } [15:03:50.204] error Command failed with exit code 1.

該当のソースコード

書籍特典としてダウンロードしたファイルのソースコードは特に変更していません。

試したこと

  • 【試したこと1】特典のダウンロードファイルデータが問題なのかなと思い、下記記事に従ってファイルを新規作成して進めてみましたが、Vercelのデプロイで違うエラーが表示されてしまいました。https://reffect.co.jp/react/next-js-github-vercel
  • そのときのエラーメッセージは下記でした。
[14:58:29.293] warning package.json: No license field [14:58:29.302] warning No license field [14:58:29.325] Warning: Could not identify Next.js version, ensure it is defined as a project dependency. [14:58:29.326] Error! No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"
  • 【試したこと2】下記記事で「ビルド失敗時はエラーを取り除く」と記載があり、なるべくエラー文をコピペでDeepLてみる等してみたのですが、なんとなく言っていることは予想できても具体的にどのような対処を求められているかで悩んでしまいました。https://tomosta.jp/2021/07/nextjs-basic/

補足情報(FW/ツールのバージョンなど)

マシン:Macbook Pro OS Monterey
エディタ:VSCode

コメントを投稿

0 コメント