Next.jsとOpenAI API-DALL·E 3で画像生成アプリを作ってみた（Tailwind CSS対応）

$ npx create-next-app@latest image-generator-starter --typescript
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /image-generator-starter.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 336 packages, and audited 337 packages in 16s

137 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created image-generator-starter at /image-generator-starter

cd image-generator-starter

OPENAI_API_KEY=sk-...
OPENAI_MODEL=dall-e-3
OPENAI_IMAGE_SIZE=1024x1024
OPENAI_IMAGE_QUALITY=standard

npm run dev

"use client";

import { useState } from "react";
import Image from "next/image";

export default function Home() {
  // State for user input (image prompt)
  // ユーザーが入力した画像生成プロンプト
  const [prompt, setPrompt] = useState("");

  // State to store generated image URL
  // 生成された画像の URL
  const [imageUrl, setImageUrl] = useState("");

  // Loading indicator state
  // 読み込み中フラグ
  const [loading, setLoading] = useState(false);

  // Error message state
  // エラーメッセージ格納用
  const [error, setError] = useState("");

  // Handle image generation request
  // 画像生成リクエスト処理
  const generateImage = async () => {
    if (!prompt.trim()) return;

    // Reset state before request
    // リクエスト前に状態を初期化
    setLoading(true);
    setError("");
    setImageUrl("");

    try {
      // Send request to internal API
      // 内部API（/api/image）にリクエスト送信
      const res = await fetch("/api/image", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt }),
      });

      const data = await res.json();

      if (res.ok && data.imageUrl) {
        setImageUrl(data.imageUrl);
      } else {
        setError(data.error || "Failed to generate image.");
      }
    } catch (e) {
      console.error("Error:", e);
      setError("An unexpected error occurred.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="min-h-screen bg-gray-900 text-gray-100 flex items-center justify-center px-4 py-8">
      <div className="w-full max-w-xl bg-gray-800 rounded-xl shadow-lg p-6 space-y-6">
        {/* Title / タイトル */}
        <h1 className="text-2xl font-bold text-center text-white">
          AI Image Generator
        </h1>

        {/* Prompt Input / プロンプト入力欄 */}
        <div className="space-y-2">
          <label
            htmlFor="prompt"
            className="block text-sm font-medium text-gray-300"
          >
            Enter your image prompt
          </label>
          <textarea
            id="prompt"
            rows={3}
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            className="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-400 resize-none"
            placeholder="e.g. A futuristic cityscape at sunset, digital art"
          />
        </div>

        {/* Generate Button / 生成ボタン */}
        <button
          onClick={generateImage}
          disabled={loading}
          className="w-full py-3 rounded-lg bg-green-500 hover:bg-green-600 text-black font-semibold disabled:opacity-50 transition"
        >
          {loading ? "Generating..." : "Generate Image"}
        </button>

        {/* Error Message / エラー表示 */}
        {error && (
          <div className="text-red-400 text-sm text-center">{error}</div>
        )}

        {/* Image Display / 画像表示 */}
        {imageUrl && (
          <div className="mt-4 relative w-full h-[512px]">
            <Image
              src={imageUrl}
              alt="Generated result"
              fill
              unoptimized
              className="rounded-lg object-contain border border-gray-700"
            />
          </div>
        )}
      </div>
    </main>
  );
}

const [prompt, setPrompt] = useState("");
const [imageUrl, setImageUrl] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");

const generateImage = async () => {
  if (!prompt.trim()) return;

  setLoading(true);
  setError("");
  setImageUrl("");

  try {
    const res = await fetch("/api/image", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });

    const data = await res.json();

    if (res.ok && data.imageUrl) {
      setImageUrl(data.imageUrl);
    } else {
      setError(data.error || "Failed to generate image.");
    }
  } catch (e) {
    console.error("Error:", e);
    setError("An unexpected error occurred.");
  } finally {
    setLoading(false);
  }
};

<textarea
  id="prompt"
  rows={3}
  value={prompt}
  onChange={(e) => setPrompt(e.target.value)}
  className="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-green-400 resize-none"
  placeholder="e.g. A cat surfing on waves, digital art"
/>

<button
  onClick={generateImage}
  disabled={loading}
  className="w-full py-3 rounded-lg bg-green-500 hover:bg-green-600 text-black font-semibold disabled:opacity-50 transition"
>
  {loading ? "Generating..." : "Generate Image"}
</button>

{error && (
  <div className="text-red-400 text-sm text-center">{error}</div>
)}

{imageUrl && (
  <div className="mt-4 relative w-full h-[512px]">
    <Image
      src={imageUrl}
      alt="Generated result"
      layout="fill"
      className="rounded-lg object-contain border border-gray-700"
    />
  </div>
)}

// src/app/api/image/route.ts
import { NextRequest, NextResponse } from "next/server";

// POST handler for image generation using OpenAI API
// OpenAI API を使って画像を生成する POST ハンドラー
export async function POST(req: NextRequest) {
  // Parse the prompt from the request body
  // リクエストボディからプロンプトを取得
  const { prompt } = await req.json();

  // Validate input
  // プロンプトが指定されているかをチェック
  if (!prompt) {
    return NextResponse.json({ error: "Prompt is required" }, { status: 400 });
  }

  try {
    // Load configuration from environment variables (with fallback values)
    // 環境変数から設定を読み込む（なければデフォルト値）
    const model = process.env.OPENAI_MODEL || "dall-e-3";
    const size = process.env.OPENAI_IMAGE_SIZE || "1024x1024";
    const quality = process.env.OPENAI_IMAGE_QUALITY || "standard";

    // Send request to OpenAI's image generation endpoint
    // OpenAI の画像生成エンドポイントへリクエストを送信
    const response = await fetch(
      "https://api.openai.com/v1/images/generations",
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model, // e.g., "dall-e-3"
          prompt, // User's prompt for image generation
          size, // e.g., "1024x1024"
          quality, // "standard" or "hd"
          n: 1, // Number of images to generate
        }),
      }
    );

    const data = await response.json();

    // Handle API error response
    // API エラーが返された場合の処理
    if (data.error) {
      console.error("OpenAI API error:", data.error);
      return NextResponse.json(
        { error: "Image generation failed" },
        { status: 500 }
      );
    }

    // Extract the generated image URL
    // 生成された画像の URL を取得
    const imageUrl = data.data?.[0]?.url;

    // Return the image URL to the client
    // クライアントに画像 URL を返す
    return NextResponse.json({ imageUrl });
  } catch (error) {
    // Handle unexpected server errors
    // 想定外のサーバーエラーを処理
    console.error("Server error:", error);
    return NextResponse.json(
      { error: "Internal server error" },
      { status: 500 }
    );
  }
}

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const { prompt } = await req.json();

const response = await fetch("https://api.openai.com/v1/images/generations", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: process.env.OPENAI_MODEL || "dall-e-3",
      prompt,
      size: process.env.OPENAI_IMAGE_SIZE || "1024x1024",
      quality: process.env.OPENAI_IMAGE_QUALITY || "standard",
      n: 1,
    }),
  });

  const data = await response.json();

  if (data.error) {
    console.error(data.error);
    return NextResponse.json({ error: "Image generation failed" }, { status: 500 });
  }

  const imageUrl = data.data?.[0]?.url;
  return NextResponse.json({ imageUrl });
}