はじめに
こんにちは、とむです。個人開発中の英語学習アプリ『（仮）Re-Learn English』の開発進捗、第3回目です。
（前回の記事はこちら → Gemini APIで英作文のAI添削機能を実装！しかしサーバーエラーが...【英語学習アプリ開発#2】）
前回、Gemini APIを呼び出す際に発生した 500 Internal Server Error との戦いを報告しましたが、本日、ついにこのエラーを解決し、AIによる英作文添削機能が完全に動作しました！
今回は、エラーの原因特定から解決に至るまでの、泥臭いデバッグの全記録です。同じようなAPI連携でハマっている方の助けになれば幸いです。
エラーとの戦いの記録
まず、Next.jsを動かしているターミナルのログを確認しました。すると、ブラウザに表示されていた 500 Internal Server Error の裏で、もっと具体的なエラーが出ていました。
[400 Bad Request] API key not valid. Please pass a valid API key.
「APIキーが無効です」
という、これ以上なく明確なエラーメッセージです。原因はAPIキーそのものか、その渡し方にあると確信しました。
次に、「Next.jsのプログラムを通さずに、APIキー単体で通信が成功するのか？」を切り分けるために、cURLコマンドを使いました。
Google AI Studioでコードスニペットを取得し、それを参考にターミナルで以下を直接実行したところ...
curl -X POST -H "Content-Type: application/json" -d '{"contents":[{"role":"user","parts":[{"text":"日本の首都はどこですか？"}]}]}' "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=YOUR-API-KEY"
なんと、成功しました。
この結果から、以下の2点が確定しました。
- APIキーは有効である。
- Google Cloudプロジェクトの設定（請求情報など）も問題ない。
つまり、エラーの原因は**「Next.jsの環境で、APIキーがバックエンドのコードに正しく渡っていない」**ことにある、と断定できました。
解決策：環境変数の扱い方を見直す
原因がNext.jsの環境変数の読み込みにあると分かったので、以下の修正を行いました。
環境変数名の変更: .env.local ファイルで、GOOGLE_API_KEY という名前を AUTH_GOOGLE_API_KEY に変更しました。これは、Next.jsの予約語などとの衝突を避けるためのおまじないのようなものです。
関数内でのキーのチェック: APIを呼び出す POST 関数の内部で、process.env.AUTH_GOOGLE_API_KEY を読み込むように修正しました。（当初、関数の外で読み込もうとして、returnが使えないという別のエラーに遭遇したのはご愛嬌です...）
export async function POST(req: NextRequest) {
// 関数の内部でAPIキーを読み込む！
const apiKey = process.env.AUTH_GOOGLE_API_KEY;
if (!apiKey) {
// もしキーが読み込めていなければ、ここでエラーを返す
return NextResponse.json({ error: "API key is not configured." }, { status: 500 });
}
const genAI = new GoogleGenerativeAI(apiKey);
// ...以降の処理
}
サーバーの再起動: 最後に、.env.local とコードの変更を反映させるため、開発サーバーを再起動。
この結果、ついに...！
無事にAI先生からのフィードバックが返ってくるようになりました！
今回の学びと今後の展望
API連携のデバッグは、エラーの原因がどこにあるのか（フロントエンド、バックエンド、API提供側...）を一つずつ切り分けていく地道な作業なのだと痛感しました。特に、外部からの疎通確認は、問題の切り分けに非常に有効でした。
これでアプリのコア機能が動くようになったので、次回からは
より自然な添削を返すためのプロンプトチューニング
他の学習機能（文法クイズやスピーキング練習）の実装
学習成果を可視化するダッシュボードの作成
など、アプリをより魅力的にする機能開発に集中していきたいと思います。
終わりに
2回にわたるエラー報告にお付き合いいただき、ありがとうございました。エラーが解決した瞬間の達成感は、個人開発の醍醐味の一つですね。
この記事が、誰かのデバッグのヒントになれば嬉しいです。
それでは、また次回の進捗報告でお会いしましょう！