はじめに

こんにちは、〇〇です。個人開発中の英語学習アプリ『（仮）Re-Learn English』の開発進捗、第2回目です。
（前回の記事はこちら → 英語学習に挫折した自分のためのアプリ「Re-Learn English」をNext.js + Supabase + Geminiで開発中！【英語学習アプリ開発#1】）
前回はユーザー認証機能を実装しましたが、今回はついにアプリのコア機能である**「AIによる英作文添削機能」**の実装にチャレンジしました。しかし、そう簡単にはいきませんね...！
今回は、実装した機能の概要と、現在進行系でハマっているAPIエラーについて記録します。

今回実装したこと

前回からの大きな進捗として、アプリの骨格と学習フローを整理しました。
ページ構成の見直し
ホーム画面 (/): ログイン後のダッシュボードとして機能。
学習ページ (/learn): クエスト一覧を表示する専用ページに。
問題ページ (/quests/[questId]): クエストIDに応じて、異なる種類の問題（リスニングやライティング）を表示。
サイドバーから各ページにスムーズに移動できるようになり、アプリらしい構造になりました。
AI添削機能のバックエンド実装
Next.js の API Routes を使い、/api/writing-feedback というエンドポイントを作成。
このAPIは、フロントエンドから受け取った英文を、GoogleのGemini APIに送信します。
Geminiには「あなたは優秀な英語の先生です」という役割（プロンプト）を与え、添削結果を必ずJSON形式で返すように指示しました。
AI添削機能のフロントエンド実装
日本語のお題に対して、ユーザーが英文を入力できるUIを作成。
「添削する」ボタンを押すと、バックエンドAPIにリクエストを送信し、返ってきた添削結果（修正案や解説）を画面に表示する機能を実装しました。
![クエスト一覧画面や、英作文問題の画面のスクリーンショットをここに貼る]

現在苦労していること：500 Internal Server Error

クエスト選択から問題表示までは完璧に動くようになりました！しかし、いざ「添削する」ボタンを押すと、無情にも500 Internal Server Errorが...。
![APIエラーが表示されている画面のスクリーンショットをここに貼る]
フロントエンド側で受け取っているのは「サーバー内部でエラーが起きた」という情報だけで、これだけでは原因が特定できません。
このようなバックエンド起因のエラーをデバッグする際は、ブラウザの開発者ツールだけでなく、Next.jsを動かしているターミナルのログを見ることが重要だと学びました。

次回のアクション

この 500 エラーを解決し、AI添削機能を完全に動かすことが次回の最優先タスクです。
【TODO 1】APIキーの再確認
.env.local に設定した GEMINI_API_KEY が正しいか？
サーバーを再起動して、環境変数が正しく読み込まれているか？
そもそも、キーの先頭に NEXT_PUBLIC_ が付いていないか？（付いているとサーバーサイドで読めない）
これらを見直すのが第一歩です。
【TODO 2】ターミナルの詳細なエラーログの分析
APIキーに問題がない場合、次に疑うべきは「Gemini APIとの通信内容」です。エラーを再現させた直後に、ターミナルに出力される詳細なエラーメッセージを読み解き、根本原因を特定します。
（例：SyntaxError: Unexpected token ... is not valid JSON のようなエラーが出ていれば、Geminiからの応答が想定外の形式だったことが分かります）
【TODO 3】Google Cloud Platformの設定確認
最終手段として、Google Cloud側でプロジェクトに対してAPIが有効になっているかなども確認します。
無事にAI先生が英文を添削してくれるようになったら、また進捗を報告します！

終わりに

個人開発は、このように一つ進んでは壁にぶつかり...の繰り返しですね。しかし、エラーの原因を仮説立てて一つずつ検証していく過程は、大変ながらも非常に学びが多く、面白いです。
もし「そのエラー、私もハマったよ！」「ここの設定を見直してみては？」といったアドバイスがあれば、ぜひコメントで教えていただけると嬉しいです。
最後までお読みいただき、ありがとうございました