1. مقدمة

يعد تحميل الصور في Next.js مهمة شائعة عند تطوير تطبيقات الويب. في هذا البرنامج التعليمي، سوف نستكشف طريقتين مختلفتين:

• رفع الملفات مباشرة إلى الواجهة الخلفية لديك (باستخدام Next.js).
• استخدام Filestack، وهي خدمة تعمل على تبسيط إدارة الملفات في السحابة.

المتطلبات الأساسية:

• تثبيت أحدث إصدار من Next.js.
• المعرفة الأساسية بـ React و Node.js.
• بالنسبة لقسم Filestack، ستحتاج إلى حساب Filestack.

2. تحميل الصور مباشرة (تحميل الملفات)

أولاً، دعونا نرى كيف يمكنك التعامل مع تحميل الملفات مباشرة في Next.js دون استخدام خدمات خارجية.

الخطوة 1: قم بإنشاء نموذج التحميل في Next.js

قم بإنشاء نموذج في المكون المطلوب لتحديد صورة وتحميلها. هنا، نستخدم useState لتخزين الملف وجلبه لإرساله إلى الواجهة الخلفية.

import { useState } from 'react';

export default function UploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);

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

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

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

    if (response.ok) {
      console.log('File uploaded successfully');
    } else {
      console.error('Error uploading file');
    }
  };

  return (
    

الخطوة 2: قم بإنشاء واجهة برمجة التطبيقات للتعامل مع التحميل

الآن، قم بإنشاء نقطة نهاية في Next.js لمعالجة الصورة في الواجهة الخلفية. سوف نستخدم مسارات واجهة برمجة التطبيقات الخاصة بـ Next.js للتعامل مع العمليات من جانب الخادم.

إنشاء ملف في pages/api/upload.js:

import fs from 'fs';
import path from 'path';

export const config = {
  api: {
    bodyParser: false, // Disable bodyParser to handle large files
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const chunks = [];

    req.on('data', (chunk) => {
      chunks.push(chunk);
    });

    req.on('end', () => {
      const buffer = Buffer.concat(chunks);
      const filePath = path.resolve('.', 'uploads', 'image.png'); // Saves to the `uploads` folder

      fs.writeFileSync(filePath, buffer);
      res.status(200).json({ message: 'File uploaded successfully' });
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

الخطوة 3: إنشاء مجلد التحميل

تأكد من وجود مجلد يسمى التحميلات في جذر مشروعك. يمكنك إنشائه يدويًا:

mkdir uploads

مع هذا، يمكنك الآن تحديد صورة وتحميلها مباشرة إلى الخادم الخاص بك.

3. تحميل الصور باستخدام Filestack

الآن، إذا كنت تفضل استخدام خدمة خارجية مثل Filestack، والتي توفر استضافة الملفات، وCDN، ومعالجة الصور بكفاءة، فإليك كيفية القيام بذلك.

الخطوة 1: تثبيت Filestack

أولاً، نحتاج إلى تثبيت حزمة Filestack في مشروع Next.js الخاص بك.

npm install filestack-js

الخطوة 2: إعداد Filestack في الواجهة الأمامية

بعد ذلك، لنقم بإعداد عنصر واجهة المستخدم Filestack في أحد المكونات حتى يتمكن المستخدمون من تحديد الصور وتحميلها. وهذا أمر واضح ومباشر، حيث يوفر Filestack أداة جاهزة للاستخدام.

إليك مثال على التنفيذ:

import { useState } from 'react';
import * as filestack from 'filestack-js';

const client = filestack.init('YOUR_API_KEY'); // Replace with your API Key

export default function FilestackUpload() {
  const [imageUrl, setImageUrl] = useState('');

  const handleUpload = async () => {
    const result = await client.picker({
      onUploadDone: (res) => {
        setImageUrl(res.filesUploaded[0].url);
        console.log('File uploaded: ', res.filesUploaded[0].url);
      },
    }).open();
  };

  return (
    

      Upload Image with Filestack
      {imageUrl && }
    
  );
}

الخطوة 3: احصل على مفتاح Filestack API الخاص بك

لكي يعمل Filestack، تحتاج إلى إنشاء حساب على Filestack وإنشاء مفتاح API. استبدل YOUR_API_KEY في الكود أعلاه بالرمز المقدم لك.

الخطوة 4: عرض الصورة التي تم تحميلها

بمجرد قيام المستخدم بتحميل صورة، يمكنك عرضها باستخدام عنوان URL الذي تم إنشاؤه بواسطة Filestack:

{imageUrl && }

4. الاستنتاج

وهذا كل شيء! لديك الآن طريقتان للتعامل مع تحميلات الصور في تطبيق Next.js:

• تحميل مباشر إلى الواجهة الخلفية لديك.
• التحميل باستخدام Filestack، والذي يمنحك حلاً أكثر تقدمًا وقابلية للتطوير إذا كنت لا ترغب في إدارة تخزين الملفات بنفسك.