الخطوة 1: الهيكل الأساسي
جزء من قسم أساسيات Next.js في رحلة React على Coddy. الدرس 39 من 47.
التحدي
سهلأنشئ الهيكل في app/layout.jsx.
- استورد
./globals.cssوLinkمنnext/link. - صدّر
metadataمع كائنtitle: تكون قيمةdefaultهيCoddy Eatsوقيمةtemplateهي%s | Coddy Eats. - داخل
<body>، أضف<nav className="nav">يحتوي على ثلاثة روابط:className="brand"إلى/ويعرضCoddy Eats، وid="nav-menu"إلى/ويعرضMenu، وid="nav-desserts"إلى/?category=dessertويعرضDesserts. - أسفل شريط التنقل، غلّف
{children}داخل<div className="container">.
جرّب بنفسك
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم