إضافة التفاعل الحي وتسهيل تجربة الزائر (JavaScript)
كيف يستجيب الموقع لضغطات الزائر: تصفية البطاقات، القائمة، وإرسال الطلب عبر واتساب
ماذا ستتعلم وتنجز في هذه الجلسة؟ (اضغط للعرض)▼
- ربط صفحات المنتجات والتنقل السريع بين أقسام الموقع دون إعادة تحميل
النشاط 01: إنشاء مسار صفحة المنتج الديناميكية app/products/[slug]
أنشئ صفحة واحدة ذكية تعرض أي منتج ينقر عليه العميل بناءً على رابطه في المتصفح
أتعلم هيكلة المجلدات في Next.js لإنشاء مسار ديناميكي وقراءة params.slug لعرض تفاصيل الوجبة أو المنتج.
لا ننشئ صفحة منفصلة لكل منتج إذا كان لدينا 1000 منتج، بل ننشئ قالباً ديناميكياً واحداً يستقبل معرّف المنتج ويعرضه.
2. خطوات التنفيذ خطوة بخطوة:
أنشئ المسار: app/products/[slug]/page.tsx.
استقبل params في دالة الصفحة: ({ params }: { params: { slug: string } }).
ابحث عن المنتج المطابق للـ slug واعرض اسمه وسعره ووصفه المفصل.
صفحة تفاصيل تفتح عند زيارة /products/burger أو /products/pizza وتعرض بيانات المنتج المطابق.
📄 قالب البداية أو الكود المساعد (اضغط للعرض أو النسخ)▼
// app/products/[slug]/page.tsx
export default async function ProductDetailPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return (
<div className="max-w-4xl mx-auto p-6 space-y-4">
<h1 className="text-2xl font-bold">تفاصيل المنتج: {slug}</h1>
<p className="text-slate-600">هنا تظهر كافة مواصفات ومكونات المنتج وصوره وسعره.</p>
</div>
);
}تلميحات مساعدة (1)▼
- • 💡 استخدم مكون Link من next/link للتنقل الفوري بين الصفحات دون وميض إعادة التحميل.
4. مساحة الحل وتسليم النتيجة عبر واتساب
اكتب إجابتك أو الكود أو رابط عملك في الصندوق أدناه. تُحفظ مسودتك تلقائيًا في متصفحك، وعند الضغط على «إرسال النتيجة عبر واتساب» سيتم حفظ الإجابة في سجل تقدمك وفتح رسالة واتساب جاهزة لإرسالها للمدرب (+90 538 201 50 72).