Next.js プロジェクトに Cloudinary を導入してみた

2025年07月14日

開発しているプロジェクトで画像のアップロードと管理をしたかったので、Cloudinary を Next.js プロジェクトに導入してみました。この記事ではその経緯や実装方法、ちょっとしたハマりポイントなどを紹介します。

🧠 Cloudinary とは？

Cloudinary は、画像や動画などのメディア管理・配信プラットフォームで、

アップロード・ストレージ
自動最適化（WebP変換など）
URLベースでの画像変換（リサイズ・トリミング・フィルターなど）

といった機能を備えています。

Next.js の next/image との組み合わせも強力で、SSR や ISR にも対応しているようです。

🔧 Cloudinary の導入手順

1. Cloudinary のアカウント作成

公式サイトで無料アカウントを作成すると、「Cloud name」「API key」「API secret」などが付与されます。

2. パッケージのインストール（必要に応じて）

bun add cloudinary next-cloudinary

3. 環境変数の設定

.env に以下のように記述します。

CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

4. `next.config.js` にドメイン追加（`next/image` 用）

module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

📤 アップロード：`next-cloudinary` を使った実装

next-cloudinary を使うと、わずか数行で Cloudinary へ画像アップロードが可能です。

アップローダー UI コンポーネント

// components/ImageUploader.tsx

'use client';

import { CldUploadWidget } from 'next-cloudinary';
import { useState } from 'react';

export default function ImageUploader() {
  const [url, setUrl] = useState<string | null>(null);

  return (
    <div>
      <CldUploadWidget
        uploadPreset="your_upload_preset"
        onUpload={(result: any) => {
          if (result?.info?.secure_url) {
            setUrl(result.info.secure_url);
          }
        }}
      >
        {({ open }) => (
          <button onClick={() => open?.()} className="upload-button">
            画像をアップロード
          </button>
        )}
      </CldUploadWidget>

      {url && (
        <img src={url} alt="Uploaded" width={400} />
      )}
    </div>
  );
}

※ Cloudinary ダッシュボードで upload preset を事前に作成しておきましょう（unsigned 推奨）。

📂 一覧取得：API Routes + `cloudinary` SDK

// pages/api/list-images.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const result = await cloudinary.search
    .expression('folder:nextjs_uploads/*')
    .sort_by('created_at', 'desc')
    .max_results(30)
    .execute();

  res.status(200).json(result.resources);
}

🗑️ 削除：API 経由で画像削除処理

// pages/api/delete-image.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { v2 as cloudinary } from 'cloudinary';

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { public_id } = req.body;

  if (!public_id) {
    return res.status(400).json({ error: 'public_id is required' });
  }

  try {
    await cloudinary.uploader.destroy(public_id);
    res.status(200).json({ message: 'Deleted successfully' });
  } catch (error) {
    res.status(500).json({ error: 'Failed to delete image' });
  }
}

💡 注意点・ハマりポイント

uploadPreset は unsigned のものを使うとクライアントサイドでもアップロード可能
フォルダ指定を使いたい場合は Cloudinary 側の設定で Auto-create folders を有効に
public_id を管理しておくと削除時に便利（例：DB に保存）

🔚 まとめ

アップロードは next-cloudinary のおかげで簡単！
一覧取得・削除は cloudinary SDK を使って API Routes 経由で柔軟に対応可能
UI/UX の向上だけでなく、運用負荷も大きく減らせた

画像管理で悩んでいる Next.js ユーザーには、Cloudinary + next-cloudinary の構成はかなりオススメです！

ant.seal.dev