هذه المقالة بمثابة دليل للمبتدئين وخطوات العمل على Next.js.

Next.js هو إطار عمل مرن لبناء تطبيقات الويب. بل هو إطار تفاعل مبني على Node.js.

إعداد مشروع Next.js الخاص بك
لبدء مشروع Next.js جديد، ستحتاج إلى تثبيت Node.js على جهازك.

تثبيت
عند التثبيت، افتح الوحدة الطرفية وقم بتشغيل الأمر التالي لإنشاء مشروع Next.js جديد: npx create-next-app@latest my-nextjs-app
يوفر Next.js تعليمات برمجية مكتوبة بالفعل تعكس التطور الواقعي للتعرف على قواعد التعليمات البرمجية الموجودة.
بمجرد اكتمال التثبيت، انتقل إلى دليل المشروع وقم بتشغيل خادم التطوير:
القرص المضغوط my-nextjs-app
تشغيل npm للتطوير

بنية المجلد
يتكون هيكل مشروع Next.js النموذجي من عدة مجلدات رئيسية:

• الصفحات/: يحتوي هذا المجلد على الملفات التي تحدد مسارات التطبيق الخاص بك. كل ملف في هذا المجلد يتوافق مع المسار.
• public/: هذا هو المكان الذي يمكنك فيه تخزين الأصول الثابتة مثل الصور والخطوط والأيقونات. يمكن الوصول إلى الملفات هنا عبر عناوين URL.
• الأنماط/: يحتوي هذا المجلد على الأنماط العامة والمكونة الخاصة بك. بشكل افتراضي، يحتوي على ملف CSS عام.
• المكونات/: مكونات React القابلة لإعادة الاستخدام.
• api/: مسارات واجهة برمجة التطبيقات (API)، تُستخدم للوظائف من جانب الخادم (اختياري).

يعد Nextjs إطار العمل المفضل لأنه يقدم مجموعة متنوعة من الميزات المضمنة مثل:

1. تقسيم التعليمات البرمجية تلقائيًا لتحميل الصفحات بشكل أسرع. - يقوم Next.js بتقسيم التعليمات البرمجية تلقائيًا، بحيث تقوم كل صفحة بتحميل ما هو ضروري لتلك الصفحة فقط. بمعنى أن الكود الخاص بالصفحات الأخرى لا يتم تقديمه في البداية.

2. التوجيه من جانب العميل مع الجلب المسبق الأمثل.

   • يقوم بإنشاء مسارات كملفات ضمن الصفحات ويستخدم مكون الارتباط المدمج للارتباط بها. لا توجد مكتبات توجيه مطلوبة.
   • عندما يظهر مكون الرابط (إصدار Next.js من علامة ) في إطار عرض المتصفح، يقوم Next.js تلقائيًا بجلب الكود الخاص بالصفحة المرتبطة في الخلفية. وبالتالي، بحلول الوقت الذي ينقر فيه المستخدم على الرابط، سيتم بالفعل تحميل رمز الصفحة الوجهة في الخلفية، وسيكون انتقال الصفحة شبه فوري.

3. نظام توجيه بديهي يعتمد على الصفحة (مع دعم للمسارات الديناميكية)

4. يتم دعم العرض المسبق، كل من التوليد الثابت (SSG) والعرض من جانب الخادم (SSR) على أساس كل صفحة. - يُنشئ HTML لكل صفحة مقدمًا، بدلاً من تنفيذ ذلك بواسطة جافا سكريبت من جانب العميل.

5. إذا لم نكن بحاجة إلى عرض البيانات مسبقًا، فيمكننا أيضًا استخدام إستراتيجية تسمى العرض من جانب العميل، والتي:

   1. ينشئ بشكل ثابت (عرضًا مسبقًا) أجزاء من الصفحة لا تتطلب بيانات خارجية.
   2. عند تحميل الصفحة، يتم جلب البيانات الخارجية من العميل باستخدام JavaScript وملء الأجزاء المتبقية.

6. يتوفر دعم CSS وSass المدمج لأي مكتبة CSS-in-JS.

7. بيئة التطوير مع دعم التحديث السريع.

8. مسارات واجهة برمجة التطبيقات (API) لإنشاء نقاط نهاية واجهة برمجة التطبيقات (API) بوظائف بدون خادم

9. يحتوي Next.js على دعم لمسارات API، مما يتيح لنا بسهولة إنشاء نقطة نهاية API كوظيفة Node.js بدون خادم. يمكننا القيام بذلك عن طريق إنشاء وظيفة داخل دليل الصفحات/واجهة برمجة التطبيقات.

10. قابلة للتمديد بالكامل.

خاتمة
يعد بدء استخدام Next.js أمرًا بسيطًا ومباشرًا، ويوفر إطار العمل توازنًا ممتازًا بين المرونة وسهولة الاستخدام. سواء كنت تقوم بإنشاء مدونة شخصية، أو موقع ويب خاص بشركة، أو تطبيق ويب معقد، فإن Next.js يقدم الأدوات والميزات لمساعدتك في إنشاء تطبيقات قابلة للتطوير وعالية الأداء بسرعة.