Next.js + Convex +
Google Gemini SDK

Webアプリ制作ガイド

環境構築からデプロイまでの完全マニュアル

🛠️ 事前準備

💻 コマンド入力の準備

これからの作業は、PCに命令を出す「黒い画面」で行います。

🟢 ステップ0: Node.js の準備

なぜ Node.js が必要なの？

• ① ローカルでの開発・運用：
  自分のPC上でアプリを動かし、開発を進めるため。
• ② サーバー環境の再現検証：
  最終的に設置するサーバー（Cloudflare等）での動作を、
  手元で正確にシミュレーションするため。

          node -v
        

• ターミナルで実行し、バージョンが出れば準備OKです！
• 未インストールの場合は 公式サイト からダウンロードします。

⚛️ ステップ1: プロジェクト作成

ベースとなる Next.js プロジェクトを作成します。
以下のコマンドを実行してください。

          npx create-next-app@latest FOLDERNAME \
            --typescript \
            --tailwind \
            --eslint \
            --app \
            --src-dir \
            --import-alias "@/*"
        

📦 ステップ2: パッケージ導入

強力なバックエンド・AI・UI用のライブラリを一括インストールします。

          npm install convex @google/genai lucide-react
        

🚀 ステップ3: Convex の起動

Convex をプロジェクトに接続し、同期を開始します。

          npx convex dev
        

• ブラウザが立ち上がり、Convexのログイン画面が出ます。
• ログインし、新しいプロジェクト作成に同意します。
• 完了すると .env.local と convex/ フォルダが作成されます。

🔑 ステップ3: APIキーの設定

「新しいターミナルタブ」を開き、
Gemini の APIキー をデータベース環境に登録します。

          cd FOLDERNAME
          npx convex env set GEMINI_API_KEY <あなたのAPIキー>
        

🌐 ステップ4: フロントエンド起動

さらに「新しいターミナルタブ」を開き（フォルダ内で）、
開発サーバーを起動します。

          npm run dev
        

• ブラウザで http://localhost:3000 にアクセス！
• Next.jsの初期画面が表示されれば、環境構築は完璧です🎉

🤖 AI Studio との共同作業

ここからは AI を相棒にして、いよいよアプリを作ります！

🌍 アプリが完成したら...

手元のPCでバッチリ動くようになったら、次は本番環境へのデプロイです。