質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

127閲覧

Nextjsのアプリをvercelにデプロイする際にエラーとなるのを解決したい

ryuichi-works

総合スコア20

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2024/03/19 18:04

実現したいこと

ここに実現したいことを箇条書きで書いてください。
Nextjsのアプリをvercelにデプロイしたい

前提

フロントをNextjs、バックエンドをlaravelのapiでdocker環境で個人開発をしていました。
一通り実装を終えてデプロイをしようとしていたところNextjsをvercelにデプロイする時に下記の画像の様にエラーとなりデプロイできない状態です

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

githubからリポジトリをimportしてデプロイしようとしたところ下記のエラーになりました。

Your Team encountered an unknown problem. Please reach out to our support team for details

イメージ説明

該当のソースコード

package.json

1{ 2 "name": "my_app", 3 "version": "0.1.0", 4 "private": true, 5 "scripts": { 6 "dev": "next dev", 7 "build": "next build", 8 "start": "next start", 9 "lint": "next lint" 10 }, 11 "dependencies": { 12 "@types/js-cookie": "^3.0.6", 13 "@types/node": "20.9.1", 14 "@types/react": "18.2.37", 15 "@types/react-dom": "18.2.15", 16 "@types/react-easy-crop": "^2.0.0", 17 "autoprefixer": "10.4.16", 18 "axios": "^1.6.2", 19 "eslint": "8.54.0", 20 "eslint-config-next": "14.0.3", 21 "js-cookie": "^3.0.5", 22 "next": "14.0.3", 23 "postcss": "8.4.31", 24 "react": "18.2.0", 25 "react-dom": "18.2.0", 26 "react-easy-crop": "^5.0.2", 27 "react-icons": "^4.12.0", 28 "swr": "^2.2.4", 29 "tailwindcss": "3.3.5", 30 "typescript": "5.2.2" 31 } 32} 33

next.config.js

1/** @type {import('next').NextConfig} */ 2const nextConfig = { 3 reactStrictMode: true, 4} 5 6module.exports = nextConfig 7

フロント側のdockerfile

Dockerfile

1FROM node:20.9.0 2 3RUN apt-get update \ 4 && apt-get -y install git libicu-dev libonig-dev libzip-dev zip unzip locales vim \ 5 && apt-get clean \ 6 && rm -rf /var/lib/apt/lists/* \ 7 && locale-gen en_US.UTF-8 \ 8 && localedef -f UTF-8 -i en_US en_US.UTF-8 9 10ENV \ 11 TZ=Asia/Tokyo \ 12 LANG=en_US.UTF-8 \ 13 LANGUAGE=en_US:en \ 14 LC_ALL=en_US.UTF-8 15 16WORKDIR /app

試したこと

  • 開発中のNextjsアプリではなく、新しくcreate-next-appコマンドで確認用として新しくアプリを作成し、それを初期状態のままgithubuリモートリポジトリとして登録それをvercelにデプロイすることを試しましたが、同じく画像の様なエラーでデプロイできませんでした。

備考

  • 確認用としてApp routerとpages routerの二つの別の構成で確認してみましたがどちらも同じエラーでデプロイできませんでした。
  • 下記のvercelのgithubのディスカッションで同じエラーの人たちのディスカッションが行われている様です

https://github.com/orgs/vercel/discussions/6027

以上を踏まえて解決法がわかる方がいましたらよろしくお願いします

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

mac book pro 13inch(2020 intel)
macOS Monterey
vscode 1.87.2
Dev Containers v0.348.0
docker desktop 4.18.0
Docker 20.10.24
php 8.2
laravel 9系
composer 2.5
next.js 14.0.3
react 18.2.0
node:20.9.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pcs

2024/03/20 00:21

Vercel側の問題なのでVercelに聞くしかない。
ryuichi-works

2024/03/20 05:09

pcsさん、コメントありがとうございます。 vercel側の問題だと修正されるのを待つしかないと思いますが、他の方の場合でも現状同じくデプロイ時にエラーになるか気になりまして、本コメントを読んでいただいた方で初期雛形でデプロイを試していただける方がいましたら結果をお知らせください。 結果を見て、サポートに問い合わせ及び修正を待とうと思います。
guest

回答1

0

自己解決

vercelのgithubのdiscussion欄で話し合いや同じエラーでデプロイできない方が何人かいまして、開発者にこのエラーを報告及び解決依頼をしている方を参考に自分も解決依頼をしたところ開発者さんが対応してくださり、デプロイできる様になりました。これを書いているときも同じ様なエラーでデプロイできない方が解決依頼を投稿していましたので、同じエラーで詰まっている方がいましたら下記のurlから解決依頼をしてもらえると良いかもしれません。
https://github.com/orgs/vercel/discussions/6027

投稿2024/03/26 22:42

ryuichi-works

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問