جدول المحتويات[يخفي][يعرض]
عند اختيار مكتبة برامج أو إطار عمل ، عادةً ما يتم أخذ تجربة المطور في الاعتبار.
عندما أذكر "تجربة المطور" ، فإنني أشير إلى كيفية قيام المطورين بالعمل فعليًا. يختار المطورون مكتبات أو أطر عمل ممتعة في الاستخدام.
هذا هو أحد الأسباب الرئيسية لامتلاكنا الآن أكثر المكتبات والأطر شيوعًا. كمطورين ، لا يتعين علينا البدء من الصفر عندما تكون هناك أدوات حالية تم إنشاؤها لمساعدتنا في مهامنا.
الأطر هي أجزاء من البرامج التي يتم إنشاؤها واستخدامها من قبل المطورين لبناء التطبيقات ، و NextJS هو واحد منهم.
في هذا المنشور ، سنستعرض Nextjs وميزاته الرئيسية وكيف يمكننا استخدامه لإنشاء تطبيق. دعنا نقفز مباشرة.
ما هو Next.js؟
Next.js هو إطار عمل JavaScript لإنشاء صفحات ويب ثابتة وتطبيقات عبر الإنترنت قائمة على التفاعل بسرعة وسهولة. يتيح لك تصميم تطبيقات ويب رائعة لمجموعة متنوعة من الأنظمة الأساسية ، بما في ذلك Windows و Linux و Mac.
يجب أن تكون على دراية بإطار عمل Next.js إذا كان لديك حد أدنى من الإلمام بالتفاعل وترغب في معرفة المزيد عن نظام التفاعل البيئي.
على الرغم من أن Next.js يأتي مع كل ما تحتاجه للبدء ، يمكنك الاختيار بين NPM و Yarn و JavaScript و TypeScript و CSS و SCSS والتصدير الثابت والنشر بدون خادم.
المميزات
- يتم التوجيه تلقائيًا - لست بحاجة إلى تكوين أي شيء لأنه يتم تعيين أي عنوان URL لنظام الملفات ، إلى الملفات الموجودة في مجلد الصفحات (لديك خيارات التخصيص ، بالطبع).
- مكونات الملف الفردي - من السهل إضافة أنماط محددة النطاق إلى المكون باستخدام style-jsx ، والذي يتكامل تمامًا وينتج بواسطة نفس الفريق.
- إعادة تحميل رمز ساخن - عندما يكتشف Next.js تعديلًا محفوظًا على القرص ، فإنه يعيد تحميل الصفحة.
- المكونات الديناميكية - يمكنك تحميل وحدات JavaScript ومكونات React ديناميكيًا.
- عمليات التصدير الثابتة - يتيح لك Next.js تصدير موقع ثابت تمامًا من تطبيقك باستخدام أمر التصدير التالي.
- التوافق مع البيئة - يتكامل Next.js بسلاسة مع أنظمة JavaScript و Node و React.
- تقسيم الرموز تلقائيًا - يتم استخدام المكتبات وجافا سكريبت المطلوبة فقط لعرض الصفحات. بدلاً من إنشاء ملف JavaScript واحد يحتوي على جميع رموز التطبيق ، يقسم Next.js التطبيق بذكاء إلى العديد من الموارد.
كيفية إنشاء تطبيق next.js؟
التنزيل
يمكنك استخدام الأمر node npx لتثبيت وبناء مشروع Next.js.
سيؤدي هذا إلى إنشاء مجلد وجميع الملفات والتكوينات والعناصر الأخرى المطلوبة لتشغيل مشروع Next.js.
يمكنك تشغيل التطبيق بمجرد إنشائه.
الصفحات والتوجيه
للتعامل مع المسارات باستخدام Next.js ، لا نحتاج إلى استخدام إطار عمل للتوجيه. التوجيه باستخدام Next.js سهل الإعداد. عند استخدام الأمر create-next-app لإنشاء تطبيق Next.js جديد ، يُنشئ التطبيق مجلدًا يسمى "الصفحات" افتراضيًا.
مجلد "الصفحات" هذا هو المكان الذي تحتفظ فيه بمساراتك. نتيجة لذلك ، سيتم التعامل مع كل ملف مكونات التفاعلات في الدليل الفرعي كطريق منفصل.
على سبيل المثال ، إذا كان المجلد يحتوي على تلك الملفات:
- index.js
- about.js
- aricles.js
سيتم تحويل هذا الملف تلقائيًا بثلاث طرق:
- صفحة الفهرس localhost / index
- حول الصفحة localhost / about
- صفحة المدونة localhost / articles
يظهر أدناه مثال لصفحة about.js. لم يتم توفير أي شيء عن الصفحة كما ترى. إنه ببساطة مكون وظيفي قياسي في React.
طرق
لإنشاء مسارات متداخلة ، يجب عليك أولاً إنشاء مجلد فرعي. على سبيل المثال: الصفحات / المقالات. قم بإنشاء مكون تفاعل "contact.js" الخاص بك داخل هذا المجلد ، وسيقوم بإنشاء الصفحة localhost / articles / contact.
إذا وضعت ملفًا واحدًا في pages / articles.js وملفًا آخر في Pages / articles / index.js. كلاهما يعكس نفس المسار localhost / blog. في هذه الحالة ، سيعرض Next.js ملف article.js فقط. ماذا عن المسارات الديناميكية ، حيث يكون لكل منشور مدونة مساره الخاص:
- localhost / blog / first-article
- localhost / blog / -second-article
باستخدام تدوين الأقواس ، يمكنك تحديد مسار ديناميكي في Next.js. على سبيل المثال: pages / article / [slug] .js
طرق الارتباط
لقد أكملت الآن مسارك الأول. أظن أنك تسأل عن كيفية ربط الصفحات بتلك المسارات. ستحتاج إلى "next / link" للقيام بذلك.
فيما يلي مثال لصفحة رئيسية تتضمن ارتباطًا إلى صفحة "حول":
إذا كنت ترغب في تحديد نمط الارتباط ، فاستخدم الصيغة التالية:
طرق إعادة التوجيه
ماذا لو كنت بحاجة إلى فرض إعادة توجيه إلى صفحة معينة؟ على سبيل المثال ، عندما يتم الضغط على زر؟ يمكنك تحقيق ذلك باستخدام "router.push":
تحسين محركات البحث
تتطلب الصفحات في تطبيقات الويب عناصر وصفية (رأس) بالإضافة إلى البيانات داخل نص HTML. سيتطلب ذلك تثبيت متطلب إضافي يسمى React Helmet في تطبيق React.
يمكننا استخدام مكون الرأس من التالي / العنوان التالي لإضافة البيانات الوصفية بسهولة إلى صفحات الويب الخاصة بنا التي سيتم عرضها في نتائج البحث وتضمينها:
المحتوى
ستحتاج بشكل متكرر إلى تطوير مكونات أو ملف تخطيط. على سبيل المثال ، أحد المكونات التي تعرض شريط التنقل. لقد استخدمنا للتو مجلد الصفحات حتى الآن. ماذا لو لم يكن من المفترض أن يكون المكون الخاص بك صفحة مسار؟
لا تريد أن ينتقل المستخدم إلى صفحة مثل مضيف محلي / شريط التنقل. إذا قمت بوضع مكون Navbar.js في مجلد الصفحات ، فهذا ما سيحدث. ماذا يجب ان تفعل في الموقف؟
ما عليك سوى تخزين جميع مكونات "ليست صفحة" في مجلد منفصل. تستخدم معظم مشاريع Next.js لقب "المكونات" ، ويتم إنشاء هذا المجلد في المجلد الجذر لمشروعك.
مكون الرأس
يتم تقديم تحميل الصفحة الأولي بواسطة Next.js من جانب الخادم. يقوم بذلك عن طريق تعديل HTML لصفحتك. يتم تضمين قسم الرأس.
يتم استخدام مكون رأس Next.js لإعطاء علامات قسم الرأس مثل العنوان والميتا. يتم استخدام مكون الرأس في هذا المثال لمكون التخطيط.
إنشاء صفحة 404 غير موجود
من الممكن إنشاء صفحة خطأ 404 الخاصة بك. قد ترغب في تخصيص الرسالة أو إضافة تصميم الصفحة الخاصة بك. في مجلد الصفحات ، قم بإنشاء ملف 404.js.
عند حدوث خطأ 404 ، سيعيد Next.js التوجيه تلقائيًا إلى هذه الصفحة. فيما يلي مثال على صفحة 404 مخصصة:
جلب البيانات من جانب الخادم
بدلاً من تنزيل البيانات من جانب العميل ، يتيح لك Next.js إجراء مجموعة بيانات أولية ، مما يعني إرسال الصفحة بالبيانات التي تم ملؤها بالفعل من الخادم.
لديك خياران لتنفيذ جلب البيانات من جانب الخادم:
- يجب جلب البيانات عند كل طلب.
- احصل على البيانات مرة واحدة فقط خلال عملية البناء (موقع ثابت)
إحضار البيانات عند كل طلب
يتم استخدام طريقة getServerSideProps لتقديم كل طلب من جانب الخادم. يمكن تضمين هذه الوظيفة في نهاية ملف المكون الخاص بك. سيقوم Next.js تلقائيًا بتعبئة خاصيات المكون الخاصة بك بكائن getServerSideProps إذا كانت هذه الوظيفة موجودة في ملف المكون الخاص بك.
إحضار البيانات في وقت البناء
تُستخدم طريقة getStaticProps لتقديم جانب الخادم في وقت الإنشاء. يمكن تضمين هذه الوظيفة في نهاية ملف المكون الخاص بك. تعمل هذه الطريقة على تشغيل رمز الخادم وإرسال طلب GET إلى الخادم ، ولكن مرة واحدة فقط عند انتهاء مشروعنا.
لماذا يجب أن تتعلم Next.js؟
أحد أسباب ذلك هو أن Next.js مبني على React ، وهي مجموعة أدوات تطوير الواجهة الأمامية لـ إنشاء واجهات المستخدم هذا هو خياري المفضل لتصميم تطبيقات الويب.
لكن لن يكون ذلك كافيًا إذا لم يكن Next.js جيدًا فيما فعله ... أليس كذلك؟
لذا ، ما الذي تفعله بالضبط؟
يجب علينا أولاً تحديد بعض المفاهيم لفهمها. اكتسب Next.js شهرة لأنه حل مشكلة واجهها العديد من مطوري الويب مع تطبيقات الويب من جانب العميل (في المتصفح). تتمتع تطبيقات الصفحة الواحدة (SPAs) بتجربة أفضل لأنها لم تكن بحاجة إلى أن يقوم المستخدم بإعادة تحميل الصفحة ويسمح بمزيد من التفاعل.
ومع ذلك ، نظرًا لأن الجزء الأكبر من المواد في تطبيق مثل هذا يصبح مرئيًا فقط عند تنفيذه في المتصفح ، فإن برامج زحف الويب تواجه صعوبة في فهم المحتوى النصي لهذا التطبيق.
نتيجة لذلك ، على الرغم من شعبيتها ، ظلت العديد من SPA مجهولة إلى حد كبير لمحركات البحث الكبيرة مثل Google. يتضمن Next.js الآن آلية مضمنة أكثر قوة للتصيير من جانب الخادم (SSR) لمكونات React.
يتيح Next.js للمطورين إنشاء كود JavaScript على الخادم أثناء عملية الإنشاء وتوفير HTML أساسي وقابل للفهرسة للمستخدم.
الايجابيات
- عظيم لتجربة المستخدم
- عظيم لكبار المسئولين الاقتصاديين
- قم ببناء موقع ويب ثابت فائق السرعة يتصرف مثل موقع ديناميكي
- المرونة في بناء واجهة المستخدم وتجربة المستخدم.
- العديد من مزايا التطوير
- دعم كبير من المجتمع
سلبيات
- مواقع الويب أو التطبيقات لديها قدر معين من الوقت للإنشاء أو التطوير.
- بالنسبة لبعض المهام ، يعد Next.js غير مناسب. يجب أن يكون المطورون قادرين على إنشاء مسارات ديناميكية باستخدام أدوات Node.js.
وفي الختام
كما ترى ، يبسط Next.js تطوير تطبيق React ويسمح لك بالتركيز على الأمور الأكثر أهمية - منطق التطبيق وواجهة المستخدم. يتضمن كل ما يلزم لإنشاء تطبيقات معاصرة غنية بالواجهة الأمامية وتعمل بواجهة برمجة التطبيقات.
كما أنها مناسبة لمشاريع المحتوى فقط ، مثل المدونات ومواقع الأعمال التجارية ، نظرًا لقدرتها على إنشاء صفحات HTML ثابتة.
مع الإصدارات الحالية ، لا يحافظ Next.js على مستوى عالٍ من تجربة المطور فحسب ، بل يوفر أيضًا أدوات لزيادة الأداء المرئي وتجربة المستخدم ، مما يضمن مستقبلًا مشرقًا لهذا الإطار.
اترك تعليق