صفحتك الأولى
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 3 من 47.
حان الوقت لتعديل صفحة. يُعد app/page.jsx مكون React عاديًا، تمامًا مثل المكونات التي قمت بكتابتها خلال قسم الأساسيات (Fundamentals):
export default function Home() {
return (
<main>
<h1>Welcome!</h1>
</main>
);
}قاعدتان صغيرتان لا تتغيران أبدًا:
- يجب أن تكون الصفحة هي الـ default export للملف: فهذه هي الطريقة التي يعثر بها Next.js عليها
- اسم المكون يعود إليك؛ فقط اسم الملف والمجلد هما من يحددان الـ URL
لاحظ ما هو مفقود: لا يوجد تسجيل للمسار (route registration)، ولا استيراد لموجه (router)، ولا وجود لـ ReactDOM.render. كل ما عليك فعله هو كتابة مكون في الملف الصحيح، وسيكون هو الصفحة.
التحدي
مبتدئاجعل الصفحة الرئيسية تقول مرحباً.
- في
app/page.jsx، وداخل<main>، أضف<h1>معid="title". - يجب أن يكون النص الخاص به بالتحديد
Welcome to Next.js.
جرّب بنفسك
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)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم