إن كنت مطور ويب سواء Front End او Back End، فإنه من بين المصطلحات التي مرت عليك أو سمعت بها هو مصطلح الـ Next.Js. وهي تقنية تهافت عليها المطورين بشكل كبير لقوتها، الخصائص الجديدة التي تقدمها، وحتى سهولة استخدامها. لكن قد نلتمس المزيد من المعلومات حول الـ Next.js وآلية عملها وحالات استخدامها، بل وحتى الإطلاع على الجهات التي تعتمد على الـ Next.js في مشاريعها البرمجية.
لذلك، دعني أربح بك في مقال جديد يضمن مقالات أكوا ويب الخاصة بشرح المصطلحات البرمجية، واليوم سنقوم بشرح مفهوم الـ Next.s وأبرز استخداماته وخصائصه. ومتى يجب عليك استخدامه، والغرض منه، والمعارف التي يجب ان تكون لديك للشروع في استخدامه.
ما هو الـ Next.js ؟
الـ Next.js هو عبارة عن إطار مبني على الـ React مخصص للـ Front End وداعم للـ Back End يهدف إلى مساعدة المطور على صناعة مواقع الويب ذات الصفحات الواحدة (Single Page Application) مثل الـ React بالضبط أو غريمتها Angular و Vuejs. يساعدك على جلب تقنيات مختلفة لصفحات الويب التابثة مثل الـ Server Side Rendering. يجلب الـ Nextjs أيضا مجموعة من التقنيات الأخرى التي تجعله يتفوق على React في هذا المجال، كالسرعة والآداء اللذان يتفوق فيهما الـ Next.js على باقي الإطارات والفريمووركات الأخرى. يمكن للـ Next.js ان يعتمد على مبدأ التقديم من جانب الخادم أو كما يعرف اختصاراً بالـ MVP، الذي يعتمد على فصل الواجهة مع قواعد البيانات والتعامل مع جلب البيانات عبر خاصية العرض المُتحكم فيه عن طريق الـ Routing، الـ Next.js يجلب لك كل هذا.
حتى نسهل عليك الأمر أكثر نختصره لك، الـ Next.js هو إطار يعتمد على الـ React ( من الضروري إيجاد الـ React لاستخدامه ) يمكنك من خلاله بناء صفحات ويب ومواقع ويب ذات صفحة واحدة يتم تغيير محتواها مع تغيير الـ Routing المستخدم. بافتراض لديك موقع ويب به صفحتين: صفحة الواجهة (Home) وصفحة التسجيل (Sign up)، سيمكنك في الـ Next.js صناعة موقع ويب واحد يستعرض عليك الواجهة في routing بعنوان example.com ثم بدون إعادة تحميل الصفحة سيستعرض عليك صفحة التسجيل بـ Routing بعنوان example.com/signup . مع جلب آداء وسرعة وخصائص داخلية عالية، وتوافق كبير للصفحة مع محركات البحث.
ما الذي يجب علي معرفته لبدء التعامل مع الـ Next.js؟
من أجل بناء برمجيات ويب باستخدام الـ Next.js أنت بحاجة إلى بعض المعارف الأساسية في تطوير الويب التي تتضمن قصراً:
- لغة الهيكلة HTML: الـ Nextjs مخصص أساسا للويب، وستتعامل به في الويب فقط. ومن بين التقنيات الأساسية في الويب هي لغة الهيكلة HTML التي تحتاج إلى معرفتها. يجدر بالذكر أنك ستتعامل مع Custom Tags او وسوم جديدة أثناء استخدامك للـ Next.js
- لغة التنسيق CSS: يأتي الـ Next.js بخاصية الـ Built in CSS، مما يعني أنه يأتي بإطاره الخاص في الـ CSS الذي يمكنك استخدامه. يدعم كذلك تقنيات CSS متقدمة مثل الـ Preprocessors كالـ SASS و STYLUS التي يمكنك استخدامها.
- أساسيات الـ Javascript و Typescript: ليس بشكل معمق، لكن معرفة الأساسيات في الجافاسكربت العادية، ثم إطار TypeScript خاصتها أمران ضروريان من أجل فهم الأكواد البرمجية وتجسيد وصناعة أكواد أخرى.
- إطار React: لأن الـ Next.js هو إطار React في الأساس، يجب عليك أن تجيد أولا التعامل مع إطار الـ React، أو على الأقل فكرة جيدة حول كيفية صناعة صفحات الويب باستخدامه.
- تقنيات أخرى يفضل أن تكون لديك فكرة عنها: من الأشياء الأخرى التي يفضل أن تكون لديك دراية عنها نجد التعامل مع الـ API's، التعامل مع الـ Module Bundlers مثل Webpack او Gulp، لديك فكرة عن الـ JSON.
كيف يختلف الـ Next.js عن إطار React؟
الـ Next.js هو إطار مندرج من الـ React أساساً، وفي تعريفنا للـ Next.js ستجد أنه لا يوجد اختلافات كبيرة من حيث الهدف من الإطارين، فلما على المطور استخدام الـ Next.js بدل الـ React؟ ومتى يجب عليه فعل ذلك؟ الأمر عائد للكثير من التفاصيل والكثير من المميزات والتطويرات التي تجلبها الـ Next.js على الـ React، أهمها:
- سرعة وآداء أفضل: الـ Next.js إطار ذكي مبني على فكرة تحميل الـ Js/Css المطلوبة فقط في صفحة الويب أو حتى جزء الويب الذي يستخدمه المستخدم. وهذا يجلب سرعة كبيرة جداً في التعامل مع صفحات الويب وتسريعها.
- استخدام مجموعة من الـ Libraries: تهدف الـ React أساساً إلى بناء واجهات الويب عبر تصميم Components أو عناصر واحداً تلو الآخر. لكن الـ Next.js تأتي بمجموعة كبيرة من المكتبات الداخلية التي تتيح لك بناء صفحة ويب متكاملة، مثل مكتبات الـ Routings على سبيل المثال.
- تعامل أفضل مع محتوى الصفحة خصوصا الصور: تأتي الـ Next.js بخاصية الـ Image optimization، والتي تهدف إلى تحسين آداء وتحميل الصور في مواقع الويب، وجعلها متوافقة مع الصفحة بما هو مطلوب.
- توافق أفضل مع خصائص الـ SEO: الـ SEO او تحسين مواقع الويب لمحركات البحث، أمر من الصعب إنجازه إن كنت تستخدم إطار React مثلا، بل حتى أنه عليك تتبيث مكتبات مختلفة لذلك. الـ Next.js يدعم الـ SEO بشكل كبير لتحسين صفحة الويب لديك وتصدرها محركات البحث.
الـ Next.js هو تخصيص أفضل وأكثر احترافية حين يتعلق الأمر بتصميم صفحات الويب الأحادية أو الـ SAP، وينصح بها إن كنت تريد تطوير تطبيق ويب متكامل يعتمد عليها.
كيف أبدأ في الـ Next.js؟
إن قررت البدء في تعلم واكتساب واستخدام الـ Next.js، فيمكنك استخدام الدلائل التالية لتساعدك في تعلم هذه التقنية:
- استخدم الـ Documentation الرسمي: أول النصائح التي ننصحك باتباعها لتعلم الـ Next.js هو اتباع التوثيق الرسمي للإطار. توجه للرابط التالي، ثم اتبع الخطوات الخاصة بصناعة المشروع وبناء أول برمجية بسيطة لك، واكتساب الأساسيات في الـ Next.js. ثم بعدها أطلق العنان لمخيلتك لبناء البرمجية التي تريدها.
- تعلم Next.js من قناة The Net Ninja: كورس متميز لتعلم الـ Next.js من البداية حتى النهاية عبر صناعة برمجية ويب بسيطة بالإعتماد الكلي على هذه الأخيرة. كما يشرح لك بعض التفاصيل الإضافية حول الـ Next.js وخصائصها، تابع الدورة على اليوتيوب من الرابط التالي .
- كورس كراش كورس بالعربية لتعلم الـ Next.js: نعلم جميعاً شح الكورسات العربية التي تشرح مثل هذه التقنيات، لكن هذه القناة توفر لك كورس كراش كورس ( كورس سريع لتعلم الأساسيات ) الخاصة بالـ Next.js في فيديو واحد مدته 40 دقيقة. تابع الكورس من هنا .
- كورس كامل لتعلم الـ Next.js و أساسيات الـ React مع مشروع كامل: كورس متكامل على منصة يوديمي لتعلم كل أساسيات الـ Next.js من البداية مع بعض المفاهيم أيضا في الـ React مع نتيجة نهائية لصناعة بورتفوليو خاص بك. رابط الكورس .
- كورس توجيهي لتعلم الـ Next.js مع صناعة موقع شبيه بتويتر: كورس من منصة Coursera عبارة عن مشروع توجيهي (Guided Project) يسمح لك بتعلم الـ Next.js من الصفر لمطور Full Stack مع صناعة مشروع في الأخير لشبيه تويتر. مدة المشروع كاملة ساعة و 40 دقيقة. تابع الكورس من هنا .