npx create-next-app@latest

✔ What is your project named? … gemini-test
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … No
✔ Would you like to customize the import alias (`@/*` by default)? … No

code gemini-test

npm install @google/generative-ai

GEMINI_API_KEY=[取得したAPIキー]

import { NextResponse } from "next/server";
import { GoogleGenerativeAI } from "@google/generative-ai";

const apiKey = process.env.GEMINI_API_KEY;

if (!apiKey) {
    throw new Error("API key is not found");
}

const genAI = new GoogleGenerativeAI(apiKey);

export async function POST(request: Request) {
    console.log('Request:', request);
    try {
        const { input } = await request.json();
        const prompt = `"${input}"について詳しく解説してください．`;

        // モデルを取得
        const model = genAI.getGenerativeModel({
            model: "gemini-1.5-flash",
        });

        // プロンプトを生成AIに送信
        const result = await model.generateContent(prompt);
        console.log('Result:', result);

        // 結果をレスポンスとして返却
        return NextResponse.json({
            response: result.response.text(),
        });
    } catch (error) {
        if (error instanceof Error) {
            console.error("Error generating content:", error.message);

            return NextResponse.json(
            {
                error: error.message || "An unexpected error occurred.",
            },
            { status: 500 }
            );
        } else {
            console.error("Unknown error:", error);

            return NextResponse.json(
            {
                error: "An unexpected error occurred.",
            },
            { status: 500 }
            );
        }
    }
}

npx shadcn@latest init

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York (Recommended)
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app/globals.css
  Installing dependencies.

It looks like you are using React 19. 
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

✔ How would you like to proceed? › Use --force
✔ Installing dependencies.
✔ Created 1 file:
  - lib/utils.ts

Success! Project initialization completed.
You may now add components.

npx shadcn@latest add button input scroll-area

"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useState } from "react"

export default function Home() {
  const [prompt, setPrompt] = useState("")
  const [result, setresult] = useState("")

  const handleSubmit = async () => {
    const response = await fetch("/api/gemini", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ input: prompt }),
    });
    const data = await response.json();
    console.log('Response:', data);
    
    if (response.ok) {
      setresult(data.response)
    } else {
      console.error("Error:", data.error);
      setresult("An unexpected error occurred.");
    }
  }

  return (
    <div className="flex flex-col justify-center items-center min-h-screen space-y-4">
      <div className="flex w-full max-w-sm items-center space-x-2">
      <Input 
        placeholder="Enter the words" 
        value={prompt} 
        onChange={(e) => setPrompt(e.target.value)} 
      />
      <Button type="button" onClick={handleSubmit}>Search</Button>
      </div>
      <ScrollArea className="h-[200px] w-full max-w-sm rounded-md border p-4">
        <div>{result}</div>
      </ScrollArea>
    </div>
  )
}

npm run dev