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

ملخص: الخادم والعميل

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

challenge icon

التحدي

متوسط

ملخص الفصل: ارسم الحد الفاصل بين الخادم والعميل (server/client) بنفسك.

تعرض الصفحة قائمة الأطباق على الخادم، ولكنها تضع أيضًا onClick مباشرة على زر، لذلك لن يتم عرض التطبيق على الإطلاق. قم بإصلاح ذلك دون تعليم الصفحة كـ client component:

  1. في components/OpenHours.jsx، قم بإنشاء client component ('use client' في السطر 1) يحتوي على حالة بولينية open ويعرض زرًا يحمل id="toggle". يجب أن يكون النص الخاص به Show hours عندما يكون مغلقًا و Hide hours عندما يكون مفتوحًا.
  2. عندما يكون مفتوحًا، فإنه يعرض أيضًا <p> يحمل id="hours" والنص Open 9am-5pm. عندما يكون مغلقًا، يجب ألا تكون تلك الفقرة موجودة.
  3. في app/page.jsx، استبدل الزر المعطل والفقرة المرئية دائمًا بـ <OpenHours />، المستورد من '../components/OpenHours'. يبقى العنوان وقائمة الأطباق dishes كما هي تمامًا: تظل الصفحة server component.

جرّب بنفسك

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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم