الخطوة 5: عناوين الصفحات
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 43 من 47.
التحدي
سهلقم بتقديم عنوان تبويب خاص بكل وجبة.
- في
app/menu/[slug]/page.jsx، قم بتصديرasync function generateMetadata({ params }). - انتظر باستخدام
awaitللحصول علىparamsالخاصة بـ slug، ثمawait getDish(slug). - إذا لم تكن هناك وجبة، أرجع
{ title: 'Not on the menu' }. - بخلاف ذلك، أرجع
nameالخاص بالوجبة كـtitleوdescriptionالخاص بها كـdescription.
جرّب بنفسك
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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم