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