😱

【Next.js × Supabase】情報系大学生が日記アプリをデプロイするまでにハマったエラー全記録

に公開
Next.js
Web
大学生
日記
tech

【Next.js × Supabase】情報系大学生が日記アプリをデプロイするまでにハマったエラー全記録

はじめまして。情報系の学部に通う大学生です。
「就活に向けてポートフォリオを作りたい！」と思い立ち、流行りの技術スタック（Next.js + Supabase）で日記アプリ開発に挑戦しました。

「1時間でデプロイ（公開）まで行くぞ」と意気込んで始めたものの、環境構築とVercelへのデプロイだけで2時間溶かしました。

この記事では、私が開発中に踏み抜いた4つの落とし穴と、その解決策を共有します。同じところでスタックしている方の助けになれば幸いです。

作ったもの

アプリ名: Markdown Diary

概要: Markdownで記述できるシンプルな日記アプリ

技術スタック:

Frontend: Next.js (App Router)
Backend/DB: Supabase
Hosting: Vercel
Language: TypeScript

ハマりポイント1：Node.jsのバージョンが古くてProjectが作れない

最初の最初、npx create-next-app コマンドを打った時点でエラーが発生しました。

npm WARN EBADENGINE package: 'create-next-app@16.0.5',
npm WARN EBADENGINE required: { node: '>=20.9.0' },
npm WARN EBADENGINE current: { node: 'v18.18.0', ... }

原因と解決策

Next.jsの最新版（v15系）を使用するには、Node.js v20以上が必要でした。私の環境にはv18が入っていたため、門前払いされました。

Node.js公式サイトから推奨版（LTS）をダウンロードしてインストールし、以下のコマンドでバージョンが上がったことを確認して解決しました。

node -v
(v22.x.x と表示されればOK)

ハマりポイント2：VS CodeからGitHubへのPushがずっと終わらない

VS Codeのソース管理機能（左側のアイコン）から「コミット」ボタンを押しましたが、ローディングアイコン（時計マーク）がくるくる回ったまま動かなくなりました。
GitHubのリポジトリを見に行っても、中身は空っぽのまま……。

原因と解決策

GUI（ボタン操作）での認証や連携がうまくいっていなかったようです。
結局、ターミナル（黒い画面）からコマンドで実行するのが一番確実でした。

  1. リモートリポジトリの登録
    git remote add origin https://github.com/[ユーザー名]/[リポジトリ名].git

  2. ブランチ名をmainにする
    git branch -M main

  3. プッシュ（ここで認証画面が出たら許可する）
    git push -u origin main

「GUIがダメならCLI（コマンドライン）で殴る」というエンジニアの基本を学びました。

ハマりポイント3：VercelがNext.jsを認識してくれない（No framework detected）

これがおそらく最大のハマりポイントです。
GitHubには正しいコードがある。Vercelのステータスも Ready（成功）。
それなのに、サイトを開くと404エラーが出るのです。

ビルドログを確認すると、不穏なメッセージがありました。

No framework detected

原因

最初にGitHubとVercelを連携した際、リポジトリの中身が空っぽ（Push失敗中）の状態でした。
そのため、Vercelが「これはNext.jsプロジェクトではない」と判断し、Frameworkの設定が None（なし）になっていました。

あとからコードをPushしても、Vercel側の設定は自動で更新されず、ただのファイル置き場としてデプロイされていたようです。

解決策

Vercelのプロジェクト設定（Settings > Build & Development）で Framework Preset を Next.js に手動変更して再デプロイを試みましたが、私の環境ではうまくいきませんでした。

最終的な解決策は、「Vercel上のプロジェクトを一度削除して、再度インポートし直す」ことでした。

Vercelのプロジェクト設定の下部から Delete Project を実行。

New Project から再度GitHubリポジトリをインポート。

今度は中身が入っているので、自動的に Next.js と認識された！

無事にデプロイ完了。

まとめ：デプロイは開発の一部

「コードを書くこと」と「それを動く状態で公開すること」は別スキルだと痛感しました。
しかし、このエラー解消の過程でGitコマンドやVercelの設定、エラーログの読み方が少し身についた気がします。

苦労して表示させた日記アプリ、これから大切に育てていこうと思います！

Discussion