ما الفرق بين next build و next export

"Next build" و"Next export" هما أمرين في نستخدمهم في إطار Next.js، وإليك شرح لكل منهما:

أمر Next Build:

• يستخدم لبناء تطبيق Next.js.
• عند تشغيل next build، يتم إنشاء نسخة مجمعة ومحسنة من تطبيق Next.js.
• يقوم بتحسين وتجميع الملفات والمكتبات وتحسين أداء التطبيق.
• الهدف هو إعداد تطبيق جاهز للإنتاج.

أمر Next Export:

• يستخدم لتصدير تطبيق Next.js كـ "تطبيق ثابت" (Static Application).
• عند تشغيل next export، يتم إنشاء مجلد يحتوي على ملفات HTML و CSS و JavaScript التي يمكن نشرها كمجلد ثابت.
• يتيح لك استضافة التطبيق كموقع ويب ثابت دون الحاجة إلى خوادم خاصة بـ Next.js.
• يفيد في تقديم تجربة تفاعلية سريعة للمستخدمين بفضل الصفحات الثابتة.

هذا مثال بسيط يوضح الفرق بين "Next build" و "Next export" باستخدام بعض الكود :

- مثال على "Next build":

• فرضًا أن لديك تطبيق Next.js بسيط يحتوي على ملف pages/index.js  يحتوي على الصفحة الرئيسية للتطبيق. قم بتحرير الملف index.js على النحو التالي:

export default function Home() {
  return <h1>Hello, Next.js!</h1>;
}

• بعد ذلك، قم بفتح محرر الأوامر (Command Line) واكتب الأمر التالي:

next build

سيقوم هذا الأمر ببناء التطبيق المحلي وتجميعه. ستظهر رسائل الإخراج في سطر الأوامر توضح عملية البناء والتجميع. بعد الانتهاء، ستكون لديك مجلد /.next يحتوي على الملفات المجمعة (مثل HTML وCSS وJavaScript) جاهزة للتشغيل على الخادم المحلي.

- مثال على "Next export":

• في هذا المثال، سنستخدم نفس الملف pages/index.js المذكور أعلاه. قم بتحريره مرة أخرى إلى المحتوى التالي:

export default function Home() {
  return <h1>Hello, Next.js!</h1>;
}

• ثم، قم بتحرير ملف next.config.js في الجذر الخاص بمشروعك وأضف الكود التالي:

module.exports = {
  exportPathMap: function () {
    return {
      '/': { page: '/' },
    };
  },
};

هذا التكوين يحدد العنوان (route) الذي سيتم تصديره، وفي هذه الحالة هو `/` (الصفحة الرئيسية).

• ثم، قم بفتح محرر الأوامر واكتب الأمر التالي:

next build
next export

سيقوم الأمر الأول next build ببناء التطبيق المحلي وتجميعه، والأمر الثاني next export سيقوم بتصدير التطبيق بناءً على التكوين المحدد في next.config.js. ستظهر رسائل الإخراج في سطر الأوامر توضح عملية التصدير. بعد الانتهاء، ستكون لديك مجلد  out يحتوي على الملفات الثابتة (مثل HTML وCSS وJavaScript) التي يمكن نشرها على أي خادم ويب يدعم الملفات الثابتة.

الفرق الرئيسي بين next build و next export هو في رفع المشروع للاستخدام.
اذا كان موقعك الالكتروني ديناميكيا ويعتمد على مفاهيم ال server-side rendering و ال dynamic routes، فيجب عليك الرفع على استضافة من النوع serverless، وبالتالي استخدام next build قبل الرفع، وهذا في الحقيقة مايحصل عند الرفع على منصة vercel وغيرها.
أما اذا كان موقعك الالكترني لايستخدم هذه المفاهيم، فالخيار الأفضل هو استخدام الأمر next export لتصدير الموقع الخاص بك على أنه موقع ثابت (HTML, CSS, JS).

بالإضافة للشرح السابق سأحاول توضيح متى تستخدم`next build` و `next export`

حيث يعتمد على متطلبات التطبيق وكيفية نشره. إليك بعض الحالات التي يمكن فيها استخدام كل منهما:

next build

• عندما يكون لديك تطبيق يتطلب ديناميكية على الواجهة الأمامية وتفاعلات متقدمة.
• عندما تحتاج إلى استخدام الخواص الديناميكية لـ Next.js مثل Server-side Rendering (SSR) أو Incremental Static Regeneration (ISR).
• عندما تحتاج إلى سيرفر Next.js للتعامل مع الطلبات وتحسين أداء التطبيق.

next export

• عندما ترغب في نشر تطبيقك كموقع ويب ثابت (Static Site) وتحتاج إلى تسريع تحميل الصفحات.
• عندما تحتاج إلى نشر تطبيقك على خدمات استضافة ذات تكاليف منخفضة، مثل GitHub Pages أو Netlify، التي لا تدعم خواص السيرفر.
• عندما لا تحتاج إلى دعم SSR أو ISR وتفضل تقديم الصفحات كـ HTML و CSS استاتيكية.