CanguDev: Next.jsとGemini AIで私自身の技術英語メンターを作る方法
こんにちは、コミュニティの皆さん！今日は、私自身のニーズから生まれたアプリケーション CanguDev の作成プロセスを共有したいと思います。これは、ソフトウェア開発の世界に特化して技術英語をC1レベルに到達させるために、私の技術英語を向上させる必要性から生まれました。
このチュートリアルでは、初期のアイデアからPWA（Progressive Web App）としてのデプロイまで、構築プロセスをステップバイステップで案内します。
1. コンセプト: なぜCanguDevなのか？
開発者として、英語は私たちの「技術的な母国語」です。しかし、中級から上級へ進むには、実際の用語を用いた継続的な練習が必要です。CanguDevは、技術テキストを分析し、即時のフィードバック、修正、文脈に応じた文法解説を提供するメンターとして機能します。
技術スタック
- フレームワーク: Next.js (App Router)
- 言語: TypeScript
- スタイル: Tailwind CSS
- AI: Google Generative AI (Gemini 1.5 Flash)
- デプロイ: Vercel
2. プロジェクトの初期化
まず、Next.jsのベースプロジェクトを作成します。ターミナルで以下を実行します:
npx create-next-app@latest cangudev --typescript --tailwind --eslint
設定中は、App Router の使用と src/ ディレクトリ の利用を選択することを忘れずに。
3. 「頭脳」を統合する: Gemini AI
CanguDevが英語を分析できるようにするには、Googleのモデルと接続する必要があります。
ステップA：APIキーを取得
- Google AI Studio にアクセスします。Google AI Studio。
- 新しいプロジェクトを作成し、APIキーを生成します。
- プロジェクトのルートに
.env.localファイルを作成し、キーを保存します:
GOOGLE_GENERATIVE_AI_API_KEY=あなたの_API_KEY_をここに
ステップB：SDKのインストール
Googleの公式ライブラリをインストールします:
pnpm add @google/generative-ai
4. アナライザー（Route Handler）の作成
Next.js では、app/api/analyze/route.ts にリクエストを処理するエンドポイントを作成します。ここは、未完の部分です…
