Next.jsでCloudinaryに画像を保存する方法

はじめに

Next.jsを用いてTwitterクローンアプリを作成しているのですが、ツイートに投稿した画像を保存するストレージとしてCloudinaryを採用しました。
今回はNext.jsでのCloudinaryの使い方をメモしておきます。

環境構築

以下のライブラリをインストール

npm install cloudinary

CloudinaryのページにてCLOUD_NAMEとAPI_KEYとAPI_SECRETの3つを取得し、環境変数に設定してください。

.env

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<CLOUD_NAME>
NEXT_PUBLIC_CLOUDINARY_API_KEY=<API_KEY>
CLOUDINARY_API_SECRET=<API_SECRET>

実装

以下のようにして自分のCloudinaryとアプリを結びつける。
今回、APIを使用して保存する実装にしている。
POSTメソッドで使用しているuploadの引数についてはこちらを参照

import { v2 as cloudinary } from "cloudinary";

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


export async function POST(request: NextRequest) {
    try {
        const body = await request.json();
        const { imageData } = body;
        const result = await cloudinary.uploader.upload(imageData);
        return NextResponse.json(result.secure_url);
    } catch (err) {
        return NextResponse.json(null, { status: 500 });
    }
}

今回uploadの引数に使用しているimageDataは、以下のようにして求めたデータURLを用いた

export const fileRead = async (file: File) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    await new Promise<void>((resolve) => (fileReader.onload = () => resolve()));
    return fileReader.result as string;
};

const [imageDatas, setImageDatas] = useState<(string | ArrayBuffer | null)[]>([]);
const selectedImageDatas = [];

selectedImageDatas.push(await fileRead(file));
setImageDatas([...imageDatas, ...selectedImageDatas]);

あとはPostAPIの返り値として受け取るURLを用いてツイートの文章と紐付けを行いました。