محمد_عاطف

أولا المدرب يقوم بتجهيز الكود مسبقا وذلك لتقليل الوقت الخاص بالدرس فلو قام بكتابة الكود أول مرة في الدرس فهذا سيطيل وقت التعلم للطلاب جميعا . ولكن المدرب بالفعل قام بكتابة الأكواد بنفسه من البداية وتقسيم وتخطيط للمشروع وللأدوات والمكتبات اللازمة لتنفيذ ما يريده. والمشكلة التي تواجهك هي مشكلة أغلب الطلاب في بداية التعلم فالسبب الرئيسي هو البدء مباشرة في كتابة الكود قبل فهم المشروع ككل سواء من حيث المتطلبات أو هيكل المشروع حيث : لا تقوم بتحديد المتطلبات أو الميزات منذ البداية. وأيضا لا ترسم صورة كاملة عن بنية وهيكل المشروع. وأيضا تبدأ في كتابة الكود قبل تخطيط الحل وفهم كيف سيتفاعل كل جزء مع الآخر. فأول شي يجب فعله هو فهم المشروع وكتابة متطلباته فقبل ان تكتب أي سطر كود يجب عليك معرفة ما سيفعله المشروع وما هي ما هي صفحاته وهيكله وما هي الوظائف الرئيسية مثل تسجيل دخول أو رفع صور أو محادثة حية (chat) أو غيرها من الخصائص. بعد ذلك يجب عليك تصميم المشروع سواء تصميم قاعدة البيانات التي ستستخدمها لتوفر لك جميع الخصائص التي تريدها أو تصميم الواجهات أو الصفحات وغيرها . وأيضا تصميم هيكل المشروع وكيف سيتفاعل المشروع مع بعضه فمثلا في الواجهة الخلفية تقوم بتصميم ال API المناسب وما هي البيانات التي سيستقبلها من الواجهة الأمامية وهكذا حتى تستطيع تحديد كيف سيتفاعل المشروع ككل مع بعضه البعض. بعد ذلك تحديد الأدوات والمكتبات اللازمة فمثلا هل ستسعمل واجهة خلفية ؟ إذا كان كذلك وقمت بإختيار javascript فالمناسب لك هو nodejs مع express وقاعدة بيانات mongodb . وأيضا مثلا هل تحتاج إلى واجهة أمامية ؟ إذا ما المناسب هل هو React أو Vue أم غيره بناء على متطلبات المشروع . ومثلا لو أردنا تقديم خدمة chat أو إتصال لحظي فهنا الأفضل إستخدام socket.io مثلا . ويمكنك البحث عن المكتبات التي ستساعدك أو التقينة الأفضل لتنفيذ خصائص مشروعك . بعد ذلك وأخيرا بعد أن حددت المتطلبات وحددت التقنيات والأدوات التي ستستخدمها يمكنك الآن البدأ في كتابة الكود جزء بجزء . أى تقوم بتقسمه إلى أجزاء صغيرة كل جزء منها خاص بوظيفة معينة وتجميع تلك الأجزاء معا لتشغيل المشروع ككل . وفي البداية ستجد بالفعل صعوبة في الأمر لذلك يجب عليك التمرين على إنشاء مشاريع كثيرة بنفسك فأن تبدأ بمشاريع بسيطة ثم تدريجيا تقوم بالتقدم في المستوى قليلا إلى أن يتحسن مستواك.

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

إن خاصية aspect-ratio في CSS تستخدم لتحديد نسبة العرض إلى الارتفاع لعنصر ما وهو ما يساعد في الحفاظ على أبعاده بشكل متناسق عند تغيير حجم الشاشة أو عندما لا يتم تحديد العرض والارتفاع صراحة. فمثلا في الصور هناك الصورة 3:4 هنا يعني أى العرض هو 3 والطول هو 4 . أى أن الطول سيكون أكبر من العرض .فمثلا أنت لا تعرف ما هو قيمة الطول والعرض الأصلية للصورة أو للعنصر . ولكنك تخبر css أن تحافظ على تلك النسبة أى أن قسمة العرض على الطول يجب أن تكون 3:4 . img { aspect-ratio: 1 / 1; width: 100px; object-fit: cover; } فمثلا في المثال السابق نحن وضعنا النسبة 1 إلى 1 أى أننا نريد صورة الطول والعرض الخاص بها متساويين أى نريد صورة مربعة. وهكذا يمكنك وضع النسبة بناء على ما تريده فلو أردت الطول أكبر من العرض تعطي نسبة أكبر للطول وهكذا فأنت لست مجبرا على معرفة قيمة ال px للصورة .

وعليكم السلام ورحمة الله وبركاته. إن تحليل السلاسل الزمنية (Time Series) هو مجال مهم جدا في تعلم الآلة ويستخدم على نطاق واسع في الشركات وذلك لإتخاذ قرارات تعتمد على الزمن مثل التنبؤ بالمبيعات وتحليل السوق والصيانة التنبؤية وتحليل المخزون وغيرها. فالسلسلة الزمنية هي مجموعة من البيانات التي تجمع بترتيب زمني وغالبا تكون على فترات منتظمة مثل كل ساعة أو كل يوم أو كل شهر وهكذا. فمثلا عدد الزوار لموقع إلكتروني كل يوم خلال سنة هو سلسلة زمنية. والعمليات المستخدمة بكثرة فيه : الرسم البياني: نستخدم المخططات الخطية لرؤية الأنماط بمرور الوقت. تحليل المكونات: الاتجاه (Trend) الموسمية (Seasonality) الضوضاء (Noise) الدورات (Cycles) تحويل البيانات: مثل تحويلها إلى اختلافات (Differences) لإزالة الاتجاه. النماذج التنبؤية المستخدمة: ARIMA (من أكثر النماذج الكلاسيكية شهرة). Prophet من فيسبوك وهو سهل وسريع التهيئة. LSTM و GRU. XGBoost و RandomForest (عند استخدام ميزات مستخرجة من الزمن). وإليك التالي لمزيد من التفاصيل : أما في دورة الذكاء الإصطناعي فتم شرح وإستخدام السلاسل الزمنية في مسار "تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني" هنا : ستجده في هذا المسار القسم الخامس .

أولا لاحظ أنه يوجد مشكلة لديك في ملف src\App.jsx حيث أنك وضعت Routes بخارج BrowserRouter ويجب أن يكون بداخلها. لقد إستطعت بنفسك إنشاء مسار Navbar وسيعمل معك الآن . ولكن لاحظ أنه لايجب أن يكون هناك مسار لعرض شريط التنقل بل يجب أن يكون مكون وصفحة كاملة. وإليك هذا الكود بعد التعديل : import React, { useEffect, useState } from "react" import Navbar from "./Components/Navbar/Navbar"; import About from "./Components/About/About"; import Hero from "./Components/Hero/Hero"; import {Routes , Route, BrowserRouter} from 'react-router-dom'; import Background from "./Components/Background/Background"; function App() { let heroData = [ {text1: 'Titanium' , text2: 'color'}, {text1: 'Fast and ' , text2: 'powerful'}, {text1: 'Practical and' , text2: 'attractive'}, ] const [heroCount , setHeroCount] = useState(1); const [playStatus , setPlayStatus] = useState(false); useEffect(() => { setInterval(() => { setHeroCount((count) => {return count === 2?0:count+1}) }, 4000); },[]) return ( <> <BrowserRouter> <Navbar /> <Routes> <Route path="/about" element={<About />}/> <Route path="/service" element={<About />}/> <Route path="/contact" element={<About />}/> </Routes> </BrowserRouter> <div> <Background playStatus={playStatus} heroCount={heroCount}/> <Hero heroData={heroData[heroCount]} heroCount={heroCount} playStatus={playStatus} setHeroCount={setHeroCount} setPlayStatus={setPlayStatus} /> </div> </> ) } export default App الآن في ملف src\Components\Navbar\Navbar.jsx يوجد مشكلة لديك في أنك تستخدم العنصر a وهذا خاطئ فلاحظ عند الضغط عليه يقوم مباشرة بإعادة تحديث الصفحة والذهاب للعنوان الجديد . ولكننا لا يجب أن نقوم بذلك لأننا نستخدم React ونبني Single Page Application أى لا يجب أن يكون هناك تحدث للصفحة. لهذا يجب إستخدام Link من react-router-dom لتقوم بالتوجيه بدلا منا هكذا : import React from 'react' import './Navbar.css'; import logo from '../../assets/logo.png' import { Link } from 'react-router-dom'; const Navbar = () => { return ( <div> <div className="navbar"> <div className="logo"> <img src={logo} alt="" /> </div> <div className="nav-list"> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link></li> <li> <Link to="/service">Services</Link></li> <li> <Link to="/contact">Contact</Link></li> </ul> </div> </div> </div> ) } export default Navbar الآن لاحظ بمجرد الضغط على زر التنقل لا يتم تحديث الصفحة بل يتم التوجه مباشرة وتغير العنوان دون إعادة تحديث الصفحة.

أولا أنت لا تستخدم useState لإداراة الحالة حيث يستخدمها React لمعرفة التغيرات التي حدثت في قيمة المتغيرات وحينها يمكنه التعامل معها وإعادة تصير (render) المكون مرة أخرى عند حدوث تغير في القيمة. وأيضا هنا في الكود التالي أنت قمت بإنشاء زر واحد فقط ولكن الصحيح هو إنشاء زر لكل عنصر ليقوم بحذف هذا العنصر نفسه وليس حذف أول عنصر من القائمة دائما. أيضا يجب تمرير المؤشر index الذي نريد حذف هذا العنصر لديك . حيث الدالة splice تأخذ المؤشر الذي نريد بدأ الحذف منه . وهذا هو الكود النهائي الصحيح : import React, { useState } from "react"; function App() { const [tasks, setTask] = useState([ "item1", "item2", "item3", "item4", ]); const maytaskslist = tasks.map((item, index) => { return <li key={item}>{item} <button onClick={() => deleteClick(index)}>clear</button> </li> }) const deleteClick = (item) => { const newDelete = [...tasks] newDelete.splice(item, 1) setTask(newDelete) } return ( <div> <ul> {maytaskslist} </ul> </div> ) } export default App; حيث لاحظ كيف قمنا بإستخدام useState لإنشاء قائمة المهام والتي سيدير حالتها React ومع كل تغير فيها سيقوم تلقائيا بإعادة بناء المكون.

نعم بالطبع يمكنك ذلك فيمكنك إنشاء ملف منفصل وإستدعاء كمكون في ملف App . والملف يكون عبارة عن شئ كالتالي : import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./pages"; import About from "./pages/about"; const router = createBrowserRouter([ { path: "/", element: <Home />, }, { path: "/about", element: <About />, }, ]); export default function Router() { return <RouterProvider router={router} />; } ويمكنك إستدعاءه هكذا في App : import Router from "./router"; function App() { return <Router />; } export default App;

أولا يجب تنزيل المكتبة من خلال الأمر : npm install react-router-dom بعد ذلك يجب تهيئة التوجيه داخل مشروعك ففي لملف src/App.js يجب إضافة التالي : import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <Router> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } export default App; الآن قمنا بإنشاء عنوانين أحدهما لصفحة ال home و الأخرى لصفحة ال about . وهكذا يمكنك وضع أى مسار أو عنوان هنا في الملف App ومن ثم توفير المكون الذي سيعمل عند الذهاب لهذا العنوان . ويمكنك قراءة التالي لمزيد من التفاصيل :

توجد عدة طرق لذلك بجانب إستخدام مكتبة React Router لإدارة التنقل بين الصفحات (Routes). حيث يجب تغير العنوان url لتغير title الصفحة فلا يمكنك إستخدام أكثر من title لنفس العنوان فهذا ليس أفضل شئ. الطريقة الأولى لتغيير title لكل صفحة دون تعديل ملف HTML مباشرة، يمكنك استخدام مكتبة مثل react-helmet أو react-helmet-async لإدارة العناصر في <head>. فأولا يجب أن تقوم بتثبيت المكتبة باستخدام الأمر: npm install react-helmet-async بعد ذلك في ملف index.js أو App.js، قم بتغليف التطبيق بمكون HelmetProvider: import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <HelmetProvider> <Router> <App /> </Router> </HelmetProvider> ); وفي كل مكون (صفحة) يمكنك إستخدام Helmet لتحديد العنوان. فمثلا: import { Helmet } from 'react-helmet-async'; function Home() { return ( <div> <Helmet> <title>Home Page</title> </Helmet> <h1>Home Page</h1> </div> ); } والطريقة الثانية لتغيير title بدون react-helmet حيث يمكنك تغيير العنوان مباشرة باستخدام document.title في useEffect: import { useEffect } from 'react'; function Home() { useEffect(() => { document.title = 'Home Page'; }, []); return <h1>Home Page</h1>; }

نعم إن إمتداد .tsx هو نوع من ملفات TypeScript ويستخدم خصوصا في مشاريع React وهو يحتوي على بناء جملة JSX (JavaScript XML). أى أنه بالفعل ملف تايب سكريبت ولكنه ملف تايب سكريبت خاص يدعم تضمين JSX بداخله مباشرة. وهذا مفيد عند بناء واجهات المستخدم باستخدام مكتبات مثل React حيث يتم استخدام JSX لوصف بنية المكونات. فإمتداد .ts هو ملف TypeScript عادي لا يدعم JSX بشكل مباشر. أما .tsx فهو ملف TypeScript يدعم JSX مما يسمح لك بكتابة HTML-like syntax داخل كود TypeScript الخاص بك لإنشاء واجهات المستخدم.

وعليكم السلام ورحمة الله وبركاته. ما هي المسارات التي كنت قد أنهيتها ؟ إذا لم تكن قد أنهيت الكثير من المسارات يمكنك متابعة الدورة من الترتيب الجديد . أما لو كنت قد أنهيت الكثير من المسارات فيمكنك إتباع الترتيب القديم كما أنت لا توجد مشكلة . حيث حاليا يتم تحديث الدورة ولهذا إختلف ترتيب المسارات . وهذه هي ترتيب المسارات السابقة : أساسيات بايثون. تطبيقات عملية على النماذج اللغوية الكبيرة LLMs تطبيقات عملية على نماذج الرؤية الحاسوبية التعامل مع البيانات تحليل البيانات Data Analysis تعلم الآلة Machine Learning تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني التعلم العميق Deep Learning التعرف على الصور باستخدام الشبكات العصبية تطبيقات عملية على نقل التعلم Transfer Learning تطبيقات عملية باستخدام المحولات Transformers التعلم المعزز Reinforcement Learning

المشروع جيد جدا ومستواك يتطور بشكل ملحوظ . لقد إستطعت وضع الفيديو والصور معا في مكون واحد وإستطعت التبديل بينهما بشكل ممتاز وعرضهم بالشكل الصحيح. ولكن يوجد تكرار كثير في الأكواد هنا : else if(heroCount === 0){ return <img src={image1} alt="img" className='background animation'/> } else if(heroCount === 1){ return <img src={image2} alt="img" className='background animation'/> } else if(heroCount === 2){ return <img src={image3} alt="img" className='background animation'/> } لاحظ أن العناصر هي نفسها الإختلاف فقط في ال src وهنا يمكن تحسين هذا الجزء فتخيل لو وجد أكثر من 5 صور لديك أو كان يوجد classes كثيرة فهنا أى تعديل أو إضافة سيتوجب نسخ وإستخدام نفس الأكواد لذلك الصحيح هو جعل عنصر واحد وجعل ال src يختلف بناء على الشرط مباشرة هكذا مثلا : import './Bg.css'; import video1 from '../../assets/EV-Web-Assets/Assets/video1.mp4'; import image1 from '../../assets/EV-Web-Assets/Assets/image1.png'; import image2 from '../../assets/EV-Web-Assets/Assets/image2.png'; import image3 from '../../assets/EV-Web-Assets/Assets/image3.png'; const Background = ({playStaus,heroCount}) => { const images = [image1, image2, image3]; if(playStaus){ return ( <video className='background animation' autoPlay loop muted> <source src={video1} type='video/mp4'/> </video> ) } return <img src={images[heroCount]} alt="img" className='background animation'/> } export default Background; لاحظ هنا أنشأنا مصفوفة وإستخدمنا الheroCount للحصول على هذا العنصر . ولكن باقي المشروع ممتاز ولا توجد أى مشكلة فيه.

أولا توجد مشكلة أساسية لديك . وهي أنك لم تقم بوضع معرف فريد لل task حيث يجب وضع id لل task وإعطائها رقم فريد لا يتكرر . حيث ستستخدم هذا الرقم في البحث عن المهمة أثناء تحديثها أو حذفها . يمكنك إضافته وفي دالة الحذف أو الحفظ تقوم بتمرير هذا ال id . وبعدها بداخل تلك الدالة تقوم بالبحث عن هذا ال id في مصفوفة tasks ومن ثم تقوم بحذفها . يمكنك محاولة إنشاء المنطق السابق وإرفاق الكود بعد كتابته.

المشكلة هنا أنك تمرر task.deleteTaskes ولكن هذا خاطئ . بل يجب تمرير دالة . وإنشاء تلك الدالة التي تقوم بحذف المهمة أو تعديلها . هذا الأمر كما تم شرحه في مشروع تطبيق الملاحظات . يمكنك مراجعة هذا الجزء لفهمه بشكل أفضل.

هل تقصد في دورة الألعاب الخاصة بالأكاديمية هنا في درس تثبيت محرك غودوت ؟ إذا كان كذلك فإنه لا يتم تنزيل ملف التثبيت بل يتم تنزيل ملف يحوي البرنامج بصيغة exe مباشرة يمكن فتح البرنامج منه. إذا ظلت المشكلة لديك يرجى وضع سؤالك أسفل الدرس في الدورة في صندوق التعليقات أسفل الدرس . وذلك لأن هنا هو قسم الأسئلة العامة ولا يتم الإجابة على أسئلة الدورات هنا.

نعم بالطبع لا توجد اى مشكلة يمكنك وضعها وهذا هو المكان المناسب . ولكن المنطق الخاص بتلك الأزرار يجب أن يكون في ملف App.jsx . حيث تقوم بتمرير دالة من App.jsx والتي يتم تنفيذها عند الحدث onClick في تلك الأزرار . <button onClick={deleteTask}>Delete</button> فهكذا الزر . ولكن الدالة deleteTask تقوم بتمريرها ك prop من الملف App.jsx

أولا في ملف src\Components\Data.jsx يجب أن تقوم بإعادة الجدول هكذا حيث يجب كتابة return : import React from "react"; const Data = (props) => { const { title, content } = props; return ( <table> <td>{title}</td> <td>{content}</td> </table> ) }; export default Data; بعد ذلك في ملف src\App.jsx يرجى وضع الكود التالي بعد سطر 58 مباشرة : {taskes.map((task) => ( <Data key={task.title} title={task.title} content={task.content} /> ))} الآن ستظهر لك المهام ولكن يتوجب إضافة تنسيقات جيدة لها حاليا يمكنك تغير اللون للأبيض حتى تظهر معك . أى في ملف src\index.css يرجى وضع الكود التالي في نهاية الملف : table { color: white; } App.jsx

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

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

نعم بالطبع يمكنك ربط 3 جداول معا باستخدام JOIN في SQL وبنفس الطريقة التي تربط بها جدولين، ولكن فقط تضيف جدول ثالث بنفس المبدأ. مثال : SELECT * FROM table1 JOIN table2 ON table1.id = table2.table1_id JOIN table3 ON table2.id = table3.table2_id حيث تقوم بربط الجدول الأول بالثاني بشرط معين ومن ثم تقوم بربط الجدول الثالث بأحد الجدولين الأخرين حسب العلاقة لديك. إذا أردت مساعدة في ربط جداول معينة يمكنك توضيح الجداول والعلاقات بينها لمساعدتك.

يمكنك محاولة بناء مدونة بسيطة فهو مشروع جيد للتعامل مع التوجيه (Routing) وعرض المحتوى حيث يجب على المشروع أن يحتوي على قائمة بالمقالات وعرضها حيث كل مقال له صفحته الخاصة به. يمكنك أيضا إضافة تعليقات للمقالات يمكنك محاولة تخزينها مؤقتا في ملف أو في localStorage إذا لم تكن تعلمت الواجهات الخلفية وإنشاء ال API. ويمكنك إنشاء مميزات متقدمة مثل لوحة تحكم لتعديل المقالات وعرضها وحذفها . يمكنك أيضا إنشاء خاصية عرض محتوى المقالات المكتوب بصيغة Markdown أى بلغة HTML . يمكنك أيضا محاولة بناء تطبيق الطقس (Weather App) حيث هو عبارة عن تطبيق يتفاعل ويرسل طلبات إلى واجهات برمجة التطبيقات (APIs) الخارجية فيمكنك عرض حالة الطقس لمدينة معينة وإضافة طريقة البحث عن المدن المختلفة. ويمكنك أيضا عرض توقعات الأيام القادمة . يمكنك أيضا توفير إمكانية : تبديل وحدات القياس بين مئوية وفهرنهايت. وميزة متقدمة وهي إضافة خاصية معرفة الطقس من خلال الموقع GPS. وأخيرا يمكنك إنشاء متجر إلكتروني بسيط (E-commerce Store) فهو مشروع ممتاز لتطبيق مفاهيم React و State Management. حيث يمكنك عرض المنتجات و إضافة المنتجات إلى سلة التسوق. وإدارة الحالة (State Management) من خلال استخدام Context API أو أى إدارة حالة أخرى لسلة التسوق. وأيضا صفحة منفصلة لكل منتج مع وصف وصور. وإضافة نظام التصفية والبحث عن المنتجات وتصفيتها حسب الفئة أو السعر. وإذا لم تتعلم إنشاء API يمكنكاستخدام Mock API لجلب بيانات المنتجات من Mock API مثل JSONPlaceholder أو Fake Store API.

كنت أقصد بيانات الطلب headers . ولكن لا مشكلة من المفترض أن ملف views لديك صحيح لا توجد به مشكلة حيث الكود سليم من ناحية parser_classes في ال ProductViewSet. وغالبا السبب في إعدادات REST_FRAMEWORK في settings.py. لذلك يرجى التحقق إذا كان لديك في settings.py هذا الجزء: REST_FRAMEWORK = { 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', ], } فإذا كان موجود فهذا يلغي إعداد parser_classes الموجود في الـ ViewSet ويجعل DRF يتوقع دائما JSON. لذلك الحل إما حذف هذا الإعداد أو تعديله وإضافة التالي به : 'DEFAULT_PARSER_CLASSES': [ 'rest_framework.parsers.JSONParser', 'rest_framework.parsers.MultiPartParser', 'rest_framework.parsers.FormParser', ]

لاداعي للشكر . نعم من المفترض أن الكود صحيح ويجب أن يتم إرسال الطلب بشكل صحيح . هل يمكنك إرسال صورة للطلب من خلال نافذة network في أدوات المطور مع بيانات الطلب . وأيضا يرجى إرسال كود Django view فمن الممكن أن المشكلة فيه

وعليكم السلام ورحمة الله وبركاته. لاحظ الخطأ يخبرك أنه لا يمكن قبول الصور من خلال الطلب من نوع application/json كما تفعل . فهذه المشكلة شائعة عند رفع ملفات كالصور باستخدام Django REST Framework. والسبب أنك عندما ترسل الطلب مع صورة يجب أن ترسل البيانات باستخدام multipart/form-data وليس application/json أو أى نوع أخر. ولا يجب أن تقوم بتعيين Content-Type يدويا إلى application/json حيث بما أنك تستخدم FormData فإنه يتم إضافة Content-Type المناسب (multipart/form-data). فمثلا لو قمت بإرسال طلب ال API من خلال java script فيجب أن يكون كالتالي: const formData = new FormData(); formData.append('name', 'example'); formData.append('image', fileInput.files[0]); fetch('/api/upload/', { method: 'POST', body: formData }); ولو كنت ترسل الطلب من خلال postman فيجب إختيار form-data من ال body وإرسال الصور منها :

نعم إن Next.js مبني بالفعل على React ويوفر العديد من الميزات الإضافية التي تجعله خيار جدي للعديد من المشاريع ولكن الاختيار بين React وNext.js يعتمد على ما تحتاجه في مشروعك وخصائصه. فأولا إن next هو إطار عمل كامل (Framework) وليس مكتبة فقط ويوفر .js حلول جاهزة لل (Routing) وجلب البيانات (Data Fetching) وتحسين الأداء مثل التحميل المسبق Pre-rendering. وإن React هي مكتبة وتحتاج إلى إضافة مكتبات أخرى مثل react-router لل (Routing) وaxios أو fetch لجلب البيانات. وnext يوجود به التصيير المسبق (Pre-rendering) لتحسين SEO والأداء حيث يدعم SSR (Server-Side Rendering) و SSG (Static Site Generation) بشكل مدمج مما يجعله مثالي للمواقع التي تحتاج إلى تحسين محركات البحث (SEO). ولكن React يعتمد عادة على CSR (Client-Side Rendering) مما قد يؤثر بشكل سئ على SEO إذا لم يتم تحسينه. ولكن إذا كنت تبني تطبيق Single-Page Application (SPA) ولا يحتاج إلى SEO مثل لوحات التحكم (Dashboards) أو التطبيقات الداخلية التي لا تحتاج إلى تصيير من الخادم فإن React هو الأفضل في هذا الجزء. وأيضا إذا كنت تريد تحكم كامل في إعدادات البناء (Custom Config) . وبينما next يقوم بفرض بعض القيود على هيكلة المشروع. فإن React مع Webpack يمكنك من تخصيص كل شيء. وأيضا إذا كان المشروع صغير ولا يحتاج إلى ميزات next فإن React هو الأفضل. وأيضا إضافة Next لمشروع بسيط قد يكون مبالغة إذا كنت لا تحتاج إلى SSR أو SSG. ويجب عليك معرفة أن React مخصص لبناء واجهات المستخدم فقط. أي أنه يركز على بناء المكونات (Components) وإدارة الحالة داخل الواجهة. وإذا لا نستعمل next دائما لأننا أحيانا لا نحتاج كل ما يقدمه Next خاصة في تطبيقات واجهات المستخدم البسيطة وإن Next كما وضحت لك يفرض بنية مشروع معينة وآليات عمل محددة وهذا قد يكون معقد على المشاريع الصغيرة . وأخير فإن Next.js لا يستبدل React بل يبني عليه ويوفر بيئة عمل كاملة حوله.