Sepadukan Cloudinary dalam aplikasi Next.js

Baca Mengenai Cloudinary dan harganya.

1. Buat Akaun Cloudinary

Daftar di Cloudinary dan buat akaun baharu jika anda tidak mempunyai akaun.

2. Pasang Cloudinary SDK

Anda boleh memasang Cloudinary SDK menggunakan npm atau benang:

npm install cloudinary

3. Konfigurasikan Cloudinary

Anda boleh mencipta fail konfigurasi untuk menyimpan bukti kelayakan Cloudinary anda. Amalan yang baik untuk menyimpannya dalam pembolehubah persekitaran.

Buat fail .env.local dalam akar projek anda dan tambah bukti kelayakan Cloudinary anda:

CLOUDINARY_URL=cloudinary://<api_key>:<api_secret>@<cloud_name>

</cloud_name></api_secret></api_key>

4. Sediakan Cloudinary dalam Aplikasi Anda

// utils/cloudinary.js
import { v2 as cloudinary } from 'cloudinary';

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

export const uploadImage = async (file) => {
  try {
    const result = await cloudinary.uploader.upload(file, {
      folder: 'your_folder_name', // optional
    });
    return result.secure_url; // Return the URL of the uploaded image
  } catch (error) {
    console.error('Cloudinary upload error:', error);
    throw new Error('Upload failed');
  }
};

5. Gunakan Fungsi Muat Naik

// pages/api/upload.js
import { uploadImage } from '../../utils/cloudinary';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { file } = req.body; // Assume you're sending a file in the body

    try {
      const url = await uploadImage(file);
      res.status(200).json({ url });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

6. Muat naik dari Frontend

// components/ImageUpload.js
import { useState } from 'react';

const ImageUpload = () => {
  const [file, setFile] = useState(null);
  const [imageUrl, setImageUrl] = useState('');

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', file);

    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    const data = await res.json();
    if (data.url) {
      setImageUrl(data.url);
    } else {
      console.error('Upload failed:', data.error);
    }
  };

  return (
    

Upload {imageUrl && }

); }; export default ImageUpload;

7. Uji Persediaan Anda

Jalankan aplikasi Next.js anda dan uji fungsi muat naik imej.

Kesimpulan

Anda kini sepatutnya mempunyai integrasi Cloudinary yang berfungsi dalam apl Next.js anda! Jika anda mempunyai sebarang keperluan khusus atau memerlukan penyesuaian lanjut, jangan ragu untuk bertanya!

Atas ialah kandungan terperinci Sepadukan Cloudinary dalam aplikasi Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!