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

ملخص: التنقل

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

challenge icon

التحدي

متوسط

ملخص الفصل: تطبيق صغير واحد، يتجه إلى كلا الاتجاهين في URL: شريط التنقل (nav) الذي يقرأ مكانه الحالي، وصفحة قائمة (menu) مفلترة بواسطة سلسلة الاستعلام (query string).

  1. في components/Nav.jsx، قم باستدعاء usePathname() وامنح كل رابط الـ className التالي "nav-link active" عندما يطابق href الخاص به المسار الحالي، و "nav-link" العادي خلاف ذلك. الصفحة الرئيسية هي /، والـ Menu هي /menu.
  2. في app/menu/page.jsx، اقرأ الـ category من searchParams (تذكر أنه promise) واعرض أطباق الطعام المطابقة فقط، أو اعرضها كلها عندما لا يتم تحديد أي category.

الرابط /menu?category=pizza يجب أن يعرض 2 من أصل 4 أطباق، مع تمييز رابط الـ Menu.

جرّب بنفسك

import './globals.css';
import Nav from '../components/Nav.jsx';

export const metadata = {
    title: 'Coddy Eats',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <Nav />
                {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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم