NextJS Framework

تعلّم إنشاء مواقع مختلفة من خلال استخدام إطار عمل NextJS وذلك بإنشاء مشاريع مصغرة ومبسطة.

stairsأساسيات NextJS
stairsأساسيات استخدام Strapi CMS (اختياري)
stairsبناء مشروع متكامل(Recipes Project) - الجزء الأول
stairsبناء مشروع متكامل(Recipes Project) - الجزء الثاني
stairsDashboard App Project
stairsDashboard Backend

developer_modeتطوير الويب

access_timeتاريخ الإنشاء 1-12-2022
access_timeتاريخ التحديث 19-9-2023

أساسيات NextJS

تعلّم أساسيات استخدام إطار عمل NextJS بخطوات بسيطة.

ٍOur Space Project

Random Advice Project

Courses Project

Courses Project 2

Gallery Project

Next Font

أساسيات استخدام Strapi CMS (اختياري)

الرجاء الذهاب لمسار تعلم Headless CMS، وتتبع الفيديوهات الخاصة بـــِ بأساسيات تعلم Strapi Headless CMS. في الخطوات القادمة، سنقوم ببناء مشروع NextJS متكامل مبني على Strapi Backend.

linkمسار تعلم Strapi Headless CMS

بناء مشروع متكامل(Recipes Project) - الجزء الأول

سنقوم ببناء مشروع NextJS متكامل ووصله مع سيرفر Strapi. سنبدأ مع ربط الموقع مع نقاط Strapi API. وثم بناء نظام تسجيل دخول للموقع مبسط، مع إدارة لصور الموقع.

مقدمة المشروع وعرض كل الوصفات

إنشاء صفحة الوصفة الأحادية

إضافة وصفة جديدة

حذف وصفة

صفحة وطلب تعديل الوصف

بناء Header Component

بناء صفحة تسجيل الدخول

التعامل مع localStorage

HTTP Only Cookie

ُAdd Recipe API Point

Edit & Delete Recipe API Point

isLoggedIn API Point

useUser & Redirect

My Recipes API Point

ٍSave User in Cookies

بناء مشروع متكامل(Recipes Project) - الجزء الثاني

في هذا الجزء من مشروع Recipes سنقوم ببناء الواجهة الأمامية (FrontEnd). يشمل ذلك استخدام CSS Styles والقيام بـــِ Form Validation.

Layout Component & Theme

Recipe Card Styling

التعامل مع الكلمات والترجمات

Fonts & formatDate & Single Recipe Page

Edit Recipe Form & Header

Style Recipe Form

مقدمة حول Validation and Sanitization

Recipe Form Validation

Refactor & Thumbnail Field Preview

رفع الصورة للسيرفر

Display Thumbnails

مفهوم Pagination

Pagination Functionality

الترتيب حسب التاريخ

ٍمربع البحث | Search Box

الفلترة حسب المدة الكلية والوجبة

تحسين Filter Box

Dashboard App Project

سنبدأ بمشروع جديد يختص ببناء لوحة تحكم لإضافة مقالات المستخدم، ستبدأ الدروس بتوضيح حول كيفية استخدام app Directory بإصدار NextJS الجديد.

NextJS App Directory

ٌRoutes and Pages

بناء صفحة لوحة التحكم الأساسية

بناء صفحة المقالات و Data Grid Component

مكون Filter Box

إنشاء مكوّن Pagination

بناء نقاط API

إدارة المقالات من إضافة، تعديل وحذف

إضافة خاصية تسجيل الدخول

إضافة خاصية تسجيل الخروج

Dashboard Backend

في هذا القسم سنقوم بإنشاء Backend لتطبيق NextJS باستخدام لغة PHP وقاعدة بيانات MySQL. ثم سنقوم بوصل هذه Backend مع تطبيق NextJS.

إنشاء قاعدة بيانات و PHP Backend

ربط تطبيق NextJS مع Backendالخطوة الأخيرة

التقدم في مسار التعلم(NextJS Framework): 0%

NextJS Framework

خطوات مسار التعلم

تصنيفات مسار التعلم

مصادر مسار التعلم

تفاصيل مسار التعلم

حول الموقع

الموضوعات الرئيسية

روابط مفيدة

التواصل