الخطوة 4: حالة التحميل
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 42 من 47.
التحدي
سهلقم بإنشاء واجهة skeleton لمسار الطبق (dish route).
- قم بإنشاء الملف
app/menu/[slug]/loading.jsxبحيث يصدر مكوّنًا افتراضيًا (من دون props، وليسasync). - قم بإرجاع
<div className="detail">يحتوي على<div>بـid="dish-skeleton"وclassName="detail-thumb skeleton". - أضف عنصرًا ابنًا ثانيًا بـ
className="empty"وأي نص انتظار، شيء أفضل من كلمة Loading.
جرّب بنفسك
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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم