ملخص: التوجيه
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 10 من 47.
التحدي
متوسطملخص الفصل: قم بتحويل تطبيق من صفحة واحدة إلى موقع صغير، باستخدام كل ما تعلمته في هذا الفصل.
- أنشئ
app/about/page.jsx. قم بتصدير مكون بافتراض (Default-export) يُرجع<h1>معid="about-title"والنص المحدد تمامًاAbout us. - في
app/page.jsx، قم باستيرادLinkمنnext/linkوأضف رابطًا إلى/aboutمعid="to-about". - أنشئ المسار الديناميكي
app/menu/[slug]/page.jsx: مكونasyncينتظرparamsويعرض الـslugالمطابق داخل<h1>معid="dish".
ستقوم الاختبارات بالنقر على الرابط الخاص بك، ثم زيارة أكلتين مختلفين وتوقع عنوانين مختلفين.
جرّب بنفسك
import './globals.css';
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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم