نشر مواقع الويب Next.js على Azure Static Web Apps

يمكن تصنيف دعم Next.js على Azure Static Web Apps كنموذجين للتوزيع:

• Hybrid: Hybrid Next.js sites، والتي تتضمن دعما لجميع ميزات Next.js مثل App Router وموجه الصفحات ومكونات React Server

• ثابت: مواقع Next.js ثابتة، والتي تستخدم خيار تصدير HTML الثابت Next.js.

تطبيقات Next.js المختلطة (معاينة)

تدعم Static Web Apps نشر مواقع الويب Next.js المختلطة. يتيح هذا الدعم لجميع ميزات Next.js، مثل App Router ومكونات React Server.

تتم استضافة تطبيقات Next.js المختلطة باستخدام مضيف المحتوى الثابت الموزع عالميا ل Static Web Apps ووظائف الواجهة الخلفية المدارة. تتم استضافة Next.js وظائف الواجهة الخلفية على مثيل خدمة التطبيقات المخصص لضمان توافق الميزات الكاملة.

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

الميزات الرئيسية المتوفرة في المعاينة هي:

• موجه التطبيق وموجهالصفحات
• مكونات خادم React
• العرض المختلط
• معالجات المسار
• تحسين الصورة
• تدويل
• البرامج الوسيطة
• المصادقة

اتبع البرنامج التعليمي نشر تطبيقات Next.js المختلطة لمعرفة كيفية نشر تطبيق Next.js مختلط إلى Azure.

الميزات غير المعتمدة في المعاينة

الميزات التالية لتطبيقات الويب الثابتة غير مدعومة Next.js مع العرض المختلط:

• حدد خدمات Azure: واجهات برمجة التطبيقات المرتبطة باستخدام Azure Functions أو Azure App Service أو Azure Container Apps أو Azure API Management.
• ميزات SWA CLI: المحاكاة المحلية ل SWA CLI ونشرها.
• دعم الميزات الجزئية: الخصائص التالية في staticwebapp.config.json الملف غير مدعومة:
  • لا يتم دعم التنقل الاحتياطي.
  • يجب تكوين عمليات إعادة كتابة التوجيه إلى المسارات داخل تطبيق Next.js داخل next.config.js.
  • التكوين داخل staticwebapp.config.json الملف له الأسبقية على التكوين داخل next.config.js.
  • يجب معالجة تكوين موقع Next.js باستخدام next.config.js لتوافق الميزات الكاملة.
• تخطي البنية: بالنسبة للتطبيقات Next.js إذا لم skip_api_build=trueتقم تطبيقات الويب الثابتة بإزالة تبعيات التطوير أو إضافة الحزمة الحادة بشكل افتراضي. إذا كنت تريد هذه التحسينات، أضفها إلى خطوات الإنشاء المخصصة قبل تمرير skip_app_build=true.
• إعادة إنشاء ثابتة تزايدية (ISR):التخزين المؤقت للصور غير مدعوم.

عرض جانب الخادم

توضح لك الخطوات التالية كيفية إقران خلفية مخصصة بخطتك القياسية وتطبيقات الويب الثابتة أعلاه.

1. انتقل إلى تطبيق الويب الثابت في مدخل Microsoft Azure.

2. حدد الإعدادات ثم واجهات برمجة التطبيقات من القائمة الجانبية.

3. حدد تكوين الواجهة الخلفية المرتبطة.

4. إما إنشاء خطة App Service جديدة أو تحديد خطة App Service موجودة.

   يجب أن تستخدم خطة خدمة التطبيقات المحددة S1 SKU على الأقل.

5. انقر فوق ارتباط.

تصدير HTML ثابت

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

تتم استضافة مواقع Next.js الثابتة على شبكة Azure Static Web Apps الموزعة عالميا للحصول على الأداء الأمثل. بالإضافة إلى ذلك، يمكنك إضافة واجهات خلفية مرتبطة لواجهات برمجة التطبيقات الخاصة بك.

لتمكين التصدير الثابت لتطبيق Next.js، أضف output: 'export' إلى NextConfig في next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
 
  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}
 
module.exports = nextConfig

يجب عليك أيضا تحديد output_location في تكوين GitHub Actions/Azure DevOps. بشكل افتراضي، يتم تعيين هذه القيمة إلى out وفقا للإعدادات الافتراضية Next.js. إذا تمت الإشارة إلى موقع إخراج مخصص في تكوين Next.js، يجب أن تتطابق القيمة المقدمة للبنية مع القيمة التي تم تكوينها في تصدير Next.js.

إذا كنت تستخدم برامج نصية مخصصة للبناء، فقم بتعيين IS_STATIC_EXPORT إلى true في مهمة Static Web Apps لملف GitHub Actions/Azure DevOps YAML.

يوضح المثال التالي مهمة GitHub Actions التي تم تمكينها للتصديرات الثابتة.

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

اتبع البرنامج التعليمي نشر مواقع الويب Next.js الثابتة لمعرفة كيفية نشر تطبيق Next.js تم تصديره بشكل ثابت إلى Azure.