Menu
Coddy logo textTech
ابدأ التعلم
flag Ar iconالعربيةdown icon

ملخص: جلب البيانات

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 28 من 47.

challenge icon

التحدي

متوسط

ملخص الفصل: قائمة طعام تقوم بتحميل كل شيء على الـ server.

ملف lib/data.js مغلق ومزود بـ: getDishes() والتي ترجع promise لمصفوفة من كائنات { id, name, price }، و getDish(slug) التي تبحث عن عنصر واحد.

  1. في app/page.jsx، اجعل Home دالة async واستخدم await getDishes() داخل متغير باسم dishes.
  2. داخل <ul id="dish-list">، قم بعرض عنصر <li> واحد لكل dish، مع key={dish.id} و id={dish.id} والـ name الخاص بالـ dish كنص له.
  3. يعرض app/menu/[slug]/page.jsx النص Unknown dish لكل عنوان URL: فهو يقوم بفك تركيب (destructures) الـ params بدون استخدام await له. قم بعمل await لـ params حتى يحصل البحث على slug حقيقي. زيارة /menu/carbonara يجب أن تعرض Carbonara في #dish-name وسعره في #dish-price.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}

جميع دروس أساسيات Next.js

1لماذا Next.js

ما الذي يضيفه Next.jsمجلد Appصفحتك الأولىملخص: لماذا Next.js

4الخادم والعميل (Server & Client)

نوعان من المكوناتقراءة الخطأسطر 'use client'الحفاظ على أجزاء العميل صغيرةخادم داخل عميلملخص: الخادم والعميل

7التنقل من جانب العميل

الرابط النشطالتوجيه البرمجيالتصفية باستخدام URLمعالجات المسارملخص: التنقل

2التوجيه والروابط

المجلدات هي مسارات التوجيهالمسارات المتداخلةربط الصفحاتالمسارات الديناميكيةصفحات غير موجودةملخص: التوجيه

5البيانات على الخادم

المكونات غير المتزامنة (Async Components)انتظار معلمات المسار (Route Params)جلب البيانات مرتين في وقت واحدحالات التحميلالتعامل مع الأخطاءملخص: جلب البيانات

8مشروع: كودي يأكل (Coddy Eats)

الخطوة 1: الهيكل الأساسيدرس مشروعالخطوة 2: شبكة قائمة الطعامدرس مشروعالخطوة 3: صفحات الأطباقدرس مشروعالخطوة 4: حالة التحميلدرس مشروعالخطوة 5: عناوين الصفحاتدرس مشروعالخطوة 6: الإضافة إلى السلةدرس مشروعالخطوة 7: تصفية الفئاتدرس مشروعالخطوة 8: إبداء رأيدرس مشروعالخطوة 9: البحث المباشردرس مشروع

3التخطيطات والبيانات الوصفية

التخطيط الرئيسيالتنقل المشتركالتخطيطات المتداخلةالبيانات الوصفية للصفحةالبيانات الوصفية الديناميكيةملخص: التخطيطات

6إجراءات الخادم (Server Actions)

ما هو إجراء الخادم (Server Action)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم