NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME not recognized

miltonvo

made my .env.local with:

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="fdfsdfsdf"

NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET="sdfnbyy"

run with npm run dev on localhost

  ▲ Next.js 14.1.0

   - Local:        http://localhost:3000

  - Environments: .env.local

 ✓ Ready in 1851ms

but when i try to run widget i got this error:

Uncaught Error: A Cloudinary Cloud name is required, please make sure NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME is set and configured in your environment.

see my code:

"use client";


import { CldUploadWidget } from "next-cloudinary";
import Image from "next/image";
import { useCallback } from "react";
import { TbPhotoPlus } from "react-icons/tb";


declare global {
  var cloudinary: any;
}


interface ImageUploadProps {
  onChange: (value: string) => void;
  value: string;
}


const ImageUpload: React.FC<ImageUploadProps> = ({ onChange, value }) => {
  const handleUpload = useCallback(
    (result: any) => {
      onChange(result.info.secure_url);
    },
    [onChange]
  );


  return (
    <CldUploadWidget
      onUpload={handleUpload}
      uploadPreset={process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_PRESET}
      options={{
        maxFiles: 1,
      }}
    >
      {({ open }) => {
        return (
          <div
            onClick={() => open?.()}
            className="
              relative
              cursor-pointer
              hover:opacity-70
              transition
              border-dashed 
              border-2 
              p-20 
              border-neutral-300
              flex
              flex-col
              justify-center
              items-center
              gap-4
              text-neutral-600
            "
          >
            <TbPhotoPlus size={50} />
            <div className="font-semibold text-lg">Click to upload</div>
            {value && (
              <div
                className="
              absolute inset-0 w-full h-full"
              >
                <Image fill style={{ objectFit: "cover" }} src={value} alt="House" />
              </div>
            )}
          </div>
        );
      }}
    </CldUploadWidget>
  );
};


export default ImageUpload;

SreeCloudinary

Hi @miltonvo ,

Thanks for contacting Cloudinary. For NextJS, the order of environment variables files is as follows:

.env.production.local, .env.local, .env.production, .env

So I am guessing that it is looking for the .env.production.local file in your Prod Environment.

Can you please try the same?

Thanks,

Sree