Next.js
إطار React للإنتاج: توجيه وعرض على الخادم وأداء
App Router والتوجيه بالملفات، التخطيطات، مكوّنات الخادم والعميل، جلب البيانات، مسارات API وServer Actions، وتحسين الظهور في محركات البحث والنشر.
- عدد الدروس: 22
- عدد الفصول: 4
- بالعربية والإنجليزية
تقدّمك
محتوى التوثيق
الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.
الفصل 1
البداية
- 1مقدمة إلى Next.jsإطار Next.js مبني على React، ويضيف إليها التوجيه المعتمد على الملفات والتصيير على الخادم وواجهات API، فتبني به تطبيق ويب متكاملًا من الواجهة حتى الخادم في مشروع واحد.
- 2إنشاء مشروع Next.jsأنشئ أول مشروع لك باستخدام الأمر npx create-next-app@latest، وتعرّف على أسئلة الإعداد، ثم شغّل خادم التطوير بالأمر npm run dev.
- 3بنية المشروعتعرّف على المجلدات والملفات التي أنشأتها الأداة: المجلد app/ للمسارات، والمجلد public/ للملفات الثابتة، والملفان الأساسيان layout.tsx وpage.tsx.
الفصل 2
التوجيه
- 4التوجيه المعتمد على الملفاتفي App Router يصبح كل مجلد داخل app/ جزءًا من عنوان URL، ويجعل الملف page.tsx ذلك المسار صفحة يمكن زيارتها.
- 5التخطيطات (Layouts)التخطيط واجهة مشتركة تحيط بعدة صفحات، مثل الرأس والقائمة الجانبية، وتبقى ثابتة أثناء التنقل دون أن تفقد حالتها.
- 6التنقل بين الصفحاتانتقل بين الصفحات بالمكوّن Link دون إعادة تحميل الموقع، وتحكّم في التنقل من الكود بالخطاف useRouter، وأعد توجيه المستخدم من الخادم بالدالة redirect.
- 7المسارات الديناميكيةأنشئ صفحة واحدة تخدم عددًا غير محدود من العناوين باستخدام المقاطع الديناميكية مثل [slug]، واقرأ قيمتها من params، وولّد الصفحات مسبقًا بالدالة generateStaticParams.
- 8مجموعات المسارات والملفات الخاصةنظّم مشروعك بمجموعات المسارات (folder) والمجلدات الخاصة _folder، واستخدم الملفات الخاصة loading.tsx وerror.tsx وnot-found.tsx لحالات التحميل والأخطاء والصفحات غير الموجودة.
الفصل 3
التصيير والبيانات
- 9مكوّنات الخادم ومكوّنات العميلكل مكوّن في App Router هو مكوّن خادم افتراضيًا. تعلّم متى تضيف التوجيه 'use client' لتحصل على التفاعل في المتصفح، وكيف تجمع بين النوعين بذكاء.
- 10جلب البياناتاجلب البيانات مباشرة داخل مكوّنات الخادم باستخدام async/await وfetch، وتحكّم في التخزين المؤقت وإعادة التحقق، واجلب عدة مصادر بالتوازي.
- 11استراتيجيات التصييرافهم متى يصيّر Next.js صفحتك: مرة واحدة وقت البناء (ثابت)، أو مع كل طلب (ديناميكي)، أو بشكل ثابت مع تحديث دوري (ISR)، وكيف تختار الأنسب لكل صفحة.
- 12معالجات المسارات (واجهات API)ابنِ واجهات API داخل مشروع Next.js باستخدام الملف route.ts والدالتين GET وPOST، واقرأ جسم الطلب ومعاملاته، وأرجع JSON مع رموز الحالة المناسبة.
- 13إجراءات الخادم (Server Actions)نفّذ كود الخادم مباشرة من النماذج والأزرار باستخدام التوجيه 'use server' دون كتابة واجهة API، ثم حدّث الصفحة، وأظهر حالة الإرسال والأخطاء.
- 14التحميل والبث التدريجياعرض واجهة تحميل فورية بالملف loading.tsx، وقسّم الصفحة إلى أجزاء تصل تدريجيًا باستخدام <Suspense>، فلا ينتظر المستخدم أبطأ جزء ليرى الصفحة.
الفصل 4
ميزات أساسية
- 15التنسيق: CSS وTailwindنسّق تطبيقك بالطرق الثلاث الأكثر استخدامًا في Next.js: ملفات CSS العامة، ووحدات CSS ذات النطاق المحلي، وأصناف Tailwind CSS.
- 16الصور والخطوطاستخدم المكوّن Image من next/image لتحسين الصور تلقائيًا، وحمّل خطوط Google أو الخطوط المحلية بالوحدة next/font دون إبطاء الصفحة أو اهتزاز النص.
- 17البيانات الوصفية وتحسين محركات البحثحدّد عنوان كل صفحة ووصفها وصورة المشاركة باستخدام الكائن metadata والدالة generateMetadata، وأنشئ ملفي sitemap.xml وrobots.txt بالكود.
- 18الوسيط (Middleware)نفّذ كودًا قبل وصول الطلب إلى صفحتك باستخدام الملف middleware.ts: أعد توجيه الزوار غير المسجلين، أو أعد كتابة العناوين، أو أضف ترويسات إلى الاستجابة.
- 19متغيرات البيئةاحفظ الأسرار والإعدادات خارج الكود في ملفات .env، وافهم الفرق بين المتغيرات الخاصة بالخادم والمتغيرات التي تبدأ بـ NEXT_PUBLIC_ ويراها المتصفح.
- 20المصادقة: نظرة عامةافهم مفاهيم المصادقة في Next.js: الجلسات وملفات تعريف الارتباط، وأين تتحقق من هوية المستخدم وصلاحياته، وكيف تساعدك مكتبة Auth.js (NextAuth) على إضافة تسجيل الدخول بسرعة.
- 21البناء والنشرجهّز تطبيقك للإنتاج بالأمر next build، وشغّله بالأمر next start، ثم انشره على Vercel ببضع نقرات أو على خادمك الخاص.
- 22مشروع: مدونة مصغّرةاجمع ما تعلمته في مشروع حقيقي: مدونة فيها صفحة رئيسية، وقائمة مقالات، وصفحة مولّدة مسبقًا لكل مقال، وزر إعجاب تفاعلي، وواجهة API، وبيانات وصفية لمحركات البحث.