【Web Library】Nextjs13で覚える便利なライブラリ【#１８Cloudinary SetUp】

【#１８Cloudinary SetUp】

YouTube: https://youtu.be/4NzBStb7LMI

https://youtu.be/4NzBStb7LMI

今回は「Cloudinary」の初期設定について解説します。

https://cloudinary.com/

まずは、ライブラリのインストールを行います。

npm install cloudinary

  "dependencies": {
    "cloudinary": "^1.35.0",
  },

次に、コンフィグの設定をするのですが、
ダッシュボードのページに移動して、

「Cloud Name」
「API Key」
「API Secret」

をコピーして、
「cloudinary.v2.config」にそれぞれ設定します。

こちらの「.env.local」の値はサンプルです。

.env.local

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="drf5s........"
CLOUDINARY_API_SECRET="0GGLOP_v1WxqWr............"
NEXT_PUBLIC_CLOUDINARY_API_KEY="48655.........."

pages/api/upload.ts

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

cloudinary.v2.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 default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const images = req.body.images;
  // console.log(images);
  

  // if (images.length === 0) {
  //   return res.status(400).json({ message: "images file" });
  // }

  // let imagesLinks = [];
  // for (let i = 0; i < images.length; i++) {
  //   const result = await cloudinary.v2.uploader.upload(images[i], {
  //     folder: "udmec",
  //   });
  //   console.log(result);

  //   imagesLinks.push({
  //     public_id: result.public_id,
  //     url: result.secure_url,
  //   });
  // }
  res.status(200).json({ message: "success" });
}