الخطوة 6: الإضافة إلى السلة
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 44 من 47.
التحدي
سهلأضف زر سلة التسوق، وأبقِ الصفحة على الخادم (Server).
- أنشئ
components/CartButton.jsxمبتدئًا بـ'use client';. - احتفظ بـ
countفيuseState(0). قم بتقديم<button id="add-to-cart" className="primary">يعرض النصAdd to cartوالذي يزيد قيمته عند النقر. - أسفله قم بتقديم
<p id="cart-count" className="cart">يقرأ العدد، ثمx، ثم خاصيةname، ثمin the cart، على سبيل المثال2 x Street Tacos in the cart. - في
app/menu/[slug]/page.jsx، قم بتقديم<CartButton name={dish.name} />تحت السعر. لا تضف'use client'إلى الصفحة.
جرّب بنفسك
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}جميع دروس أساسيات Next.js
4الخادم والعميل (Server & Client)
نوعان من المكوناتقراءة الخطأسطر 'use client'الحفاظ على أجزاء العميل صغيرةخادم داخل عميلملخص: الخادم والعميل2التوجيه والروابط
المجلدات هي مسارات التوجيهالمسارات المتداخلةربط الصفحاتالمسارات الديناميكيةصفحات غير موجودةملخص: التوجيه5البيانات على الخادم
المكونات غير المتزامنة (Async Components)انتظار معلمات المسار (Route Params)جلب البيانات مرتين في وقت واحدحالات التحميلالتعامل مع الأخطاءملخص: جلب البيانات8مشروع: كودي يأكل (Coddy Eats)
الخطوة 1: الهيكل الأساسي
الخطوة 2: شبكة قائمة الطعامالخطوة 3: صفحات الأطباقالخطوة 4: حالة التحميلالخطوة 5: عناوين الصفحاتالخطوة 6: الإضافة إلى السلةالخطوة 7: تصفية الفئاتالخطوة 8: إبداء رأيالخطوة 9: البحث المباشر3التخطيطات والبيانات الوصفية
التخطيط الرئيسيالتنقل المشتركالتخطيطات المتداخلةالبيانات الوصفية للصفحةالبيانات الوصفية الديناميكيةملخص: التخطيطات6إجراءات الخادم (Server Actions)
ما هو إجراء الخادم (Server Action)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم