ما الفرق بين react و next.js؟

يعتمد Next JS على React ليسهّل العمل على المطورين ويختصر الكثير من الوقت عن طريق ما يقدمّه من توجيه routing وفصل الكود ببنية متينة، ودعمه ل webpack بشكل افتراضي والعديد من الميزات الأخرى التي تكون متاحة بشكل تلقائي بمجرد إنشاء مشروع عن طريقه. وبالتالي لا يحتاج المطوّر لتضمين هذه الأمور من الصفر في المشروع الذي يعمل عليه.

فمثلاً من أهم الفروقات الموجودة بينهما:

عند إنشاء مشروع جديد باستخدام react يتم إنشاء مجلدين أساسيين هما public و src بالمحتويات التالية:

├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
└── yarn.lock

أما إنشاء مشروع عن طريق Next فيتم تلقائياً تهئية بنية ملفات المشروع لتكون جاهزة مباشرةً للعمل كالتالي:

.
├── README.md
├── package.json
├── node_modules
├── pages
│   ├── _app.js
│   ├── api
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock

حيث تم إضافة مجلد pages ويمكنك مباشرةً البدء بتنسيق الوجهات وتكون جاهزة للربط والتوجيه routing، وأيضاً مجلد public الذي سيحوي الملفات الثابتة لمشروعك مثل الصور ولن تحتاج لإجراء require في كل مرة لإدخال الصور إلى المكونات على سبيل المثال.

وبالنسبة للتوجيه تستطيع مباشرةً استخدام Link للتنقل بين الصفحات:

<Link href="/">
                <a className="header__anchor">Home</a>
            </Link>

وأيضاً، بالنسبة للتعامل مع البيانات، يقدّم Next بشكل افتراضي آليات data fetch للتعامل مع API وجلب البيانات إلى الواجهات بدلاً من تعريفها من الصفر وقبل تحميل الوجهات مما يتيح سهولة للمستخدم في استعراض الموقع والبيانات.

يوجد العديد من الخصائص والميزات الأخرى التي يقدمها Next والتي يمكنك التعرف عليها وعن كيفية استخدامها من الموقع الرسمي.

أخيراً، مع استخدام Next سيبقى بإمكانك استخدام جميع خصائص React ولا يتم الاستغناء عن أي شيء أو تبديله، فهو فقط يبسط الأمور ويسرّع العمل للانطلاق بالمشروع.