نشر مواقع الويب 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):التخزين المؤقت للصور غير مدعوم.
إشعار
الحد الأقصى لحجم التطبيق لتطبيق Next.js المختلط هو 250 ميغابايت. استخدم ميزة مستقلة من خلال Next.js لأحجام التطبيقات المحسنة. إذا لم يكن هذا كافيا، ففكر في استخدام HTML الثابت المصدر Next.js إذا كان متطلبات حجم التطبيق الخاص بك أكثر من 250 ميغابايت.
عرض جانب الخادم
توضح لك الخطوات التالية كيفية إقران خلفية مخصصة بخطتك القياسية وتطبيقات الويب الثابتة أعلاه.
إشعار
تتوفر الواجهات الخلفية المرتبطة فقط للمواقع التي تستخدم الخطة القياسية أو أعلى.
انتقل إلى تطبيق الويب الثابت في مدخل Microsoft Azure.
حدد الإعدادات ثم واجهات برمجة التطبيقات من القائمة الجانبية.
حدد تكوين الواجهة الخلفية المرتبطة.
إما إنشاء خطة App Service جديدة أو تحديد خطة App Service موجودة.
يجب أن تستخدم خطة خدمة التطبيقات المحددة S1 SKU على الأقل.
انقر فوق ارتباط.
تصدير 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.