ملخص: التخطيطات
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 16 من 47.
التحدي
متوسطملخص الفصل: إعطاء Coddy Eats هيكله الخارجي: قائمة تنقل مشتركة وعناوين علامات تبويب حقيقية.
- في
app/layout.jsx، بداخل<body>وأعلى{children}، أضف<nav>بـid="nav"يحتوي على<Link>إلى/بـid="home-link"والنصHome، و<Link>إلى/menuبـid="menu-link"والنصMenu. - لا نزال في تخطيط الصفحة (layout)، قم بتغيير عنوان
metadataليكون بالضبطCoddy Eats. - في
app/menu/page.jsx، قم بتصديرexportلكائنmetadataمع العنوانOur Menu، لكي تسمى علامة تبويب القائمة نفسها.
تقوم الاختبارات بقراءة عنوان علامة التبويب في كلا الصفحتين وتتحقق من أن شريط التنقل nav ما زال موجوداً بعد الانتقال إلى /menu.
جرّب بنفسك
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}جميع دروس أساسيات Next.js
4الخادم والعميل (Server & Client)
نوعان من المكوناتقراءة الخطأسطر 'use client'الحفاظ على أجزاء العميل صغيرةخادم داخل عميلملخص: الخادم والعميل2التوجيه والروابط
المجلدات هي مسارات التوجيهالمسارات المتداخلةربط الصفحاتالمسارات الديناميكيةصفحات غير موجودةملخص: التوجيه
3التخطيطات والبيانات الوصفية
التخطيط الرئيسيالتنقل المشتركالتخطيطات المتداخلةالبيانات الوصفية للصفحةالبيانات الوصفية الديناميكيةملخص: التخطيطات6إجراءات الخادم (Server Actions)
ما هو إجراء الخادم (Server Action)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم