🌊

【NextJs14】NextJs14 と便利なライブラリ【#２４Cloudinary Images Upload】

2024/01/26に公開

Next.js

【#２４Cloudinary Images Upload】

YouTube: https://youtu.be/acrNTRKQzSs

https://youtu.be/acrNTRKQzSs

今回はCloudinaryに画像をアップロードする機能を実装します。

https://cloudinary.com/

ライブラリは以下を使用します。

https://next.cloudinary.dev/

npm install next-cloudinary

インストールができましたら、
Cloudinaryのアカウントにログインをして、
サイドメニューのダッシュボードをクリックします。

・Cloud Name
・API Key
・API Secret

こちらの３点を「.env」に追加します。

.env

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YXB0LXRyZWVmcm............
CLERK_SECRET_KEY=sk_test_EKfN.................

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/protected
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/protected

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=drf......
NEXT_PUBLIC_CLOUDINARY_API_KEY=48.....
CLOUDINARY_API_SECRET=0GGLOP_v1Wx........

ここまでできましたら、
新しくページを作成します。

app/(main)/images/page.tsx

import { UploadImagesForm } from "@/components/forms/upload-images-form";

const ImagesPage = () => {
  return (
    <div className="p-6">
      <div className="flex flex-col w-full h-full">
        <div>
          <UploadImagesForm />
        </div>
      </div>
    </div>
  );
};
export default ImagesPage;

上記ページには以下のコンポーネントを設定します。

conponents/forms/upload-images-form.tsx

"use client";

import { CldUploadWidget } from "next-cloudinary";
import { ImagePlus } from "lucide-react";

import { Button } from "@/components/ui/button";

export const UploadImagesForm = () => {
  const onUpload = (result: any) => {
    console.log(result.info.secure_url);
  };

  return (
    <div>
      <CldUploadWidget onUpload={onUpload} uploadPreset="iv6ye3lb">
        {({ open }) => {
          const onClick = () => {
            open();
          };
          return (
            <Button type="button" variant="default" onClick={onClick}>
              <ImagePlus className="w-4 h-4 mr-2" />
              Upload your images
            </Button>
          );
        }}
      </CldUploadWidget>
    </div>
  );
};

【#２４Cloudinary Images Upload】

Discussion