componente para subir imagenes a cloudinary con NextJS y Next-Cloudinary

CloudinaryWidget.jsx

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

const cloudinary = () => {
    const [imagen, setImagen] = useState('')

    //opciones de cloudinary widget
  const cloudinaryOptions = {
    sources: ['local'],
    multiple: false,
    folder: 'tarjetas',
    resourceType: 'image',
    language: 'es',
    text: {
      es: {
        close: 'Cerrar',
        search_placeholder: 'Buscar archivos',
        about_uw: 'Acerca de Upload Widget',
        menu: {
          files: 'Mis archivos',
        },
        local: {
          browse: 'Buscar imagen',
          dd_title_single: 'Arrastra y suelta tu archivo aquí',
          dd_title_multi: 'Arrastra y suelta archivos aquí',
          drop_title_single: 'Arrastra y suelta un archivo para cargarlo',
          drop_title_multiple: 'Arrastra y suelta archivos para cargarlos',
        },
        selection_counter: {
          selected: 'Seleccionado',
        },
        queue: {
          title: 'Archivo subido',
          title_uploading_with_counter: 'Cargando {{num}} elementos',
          title_uploading: 'Cargando elementos',
          mini_title: 'Cargados',
          mini_title_uploading: 'Cargado',
          show_completed: 'Mostrar completado',
          retry_failed: 'Reintento fallido',
          abort_all: 'Cancelar todos',
          upload_more: 'Cargar mas',
          done: 'Listo',
          mini_upload_count: '{{num}} cargados',
          mini_failed: '{{num}} fallidos',
          statuses: {
            uploading: 'Cargando…',
            error: 'Error',
            uploaded: 'Listo',
            aborted: 'Cancelado',
          },
        },
        errors: {
          file_too_large:
            'El tamaño del archivo ({{size}}) excede el máximo permitido ({{allowed}})',
          allowed_formats: 'Formato de archivo no permitido',
          max_file_size: 'El archivo es demasiado grande',
          min_file_size: 'El archivo es muy pequeño',
        },
      },
    },
  };

  return (
    <div>
        <CldUploadWidget
                    signatureEndpoint="/api/cloudinary"
                    onUpload={function (result, widget) {
                      setImagen(result.info.eager[0].url);
                    }}
                    uploadPreset="tarjetas"
                    options={cloudinaryOptions}
                  >
                    {({ open }) => {
                      function handleOnClick(e) {
                        setImagen(undefined);
                        e.preventDefault();
                        open();
                      }
                      return (
                        <button
                          className="mt-3 h-10 px-5 m-2 text-white transition-colors duration-150 bg-blue-600 rounded-2xl focus:shadow-outline hover:bg-blue-400"
                          onClick={handleOnClick}
                        >
                          Subir imagen
                        </button>
                      );
                    }}
                  </CldUploadWidget>
    </div>
  )
}

export default cloudinary