التصدير الثابت (Static Exports)

يتيح Next.js البدء كموقع ثابت أو تطبيق أحادي الصفحة (SPA)، ثم الترقية لاحقًا بشكل اختياري لاستخدام الميزات التي تتطلب خادمًا.

عند تشغيل next build، يقوم Next.js بإنشاء ملف HTML لكل مسار. من خلال تقسيم تطبيق SPA صارم إلى ملفات HTML فردية، يمكن لـ Next.js تجنب تحميل كود JavaScript غير الضروري على جانب العميل، مما يقلل حجم الحزمة ويسمح بتحميل الصفحات بشكل أسرع.

بما أن Next.js يدعم هذا التصدير الثابت، فيمكن نشره واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.

معلومة مفيدة: نوصي باستخدام موجه التطبيق للحصول على دعم محسن للتصدير الثابت.

التكوين

لتمكين التصدير الثابت، قم بتغيير وضع الإخراج داخل next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // اختياري: تغيير الروابط `/me` -> `/me/` وإنشاء `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // اختياري: منع التحويل التلقائي `/me` -> `/me/`، والحفاظ على `href` كما هو
  // skipTrailingSlashRedirect: true,

  // اختياري: تغيير دليل الإخراج `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

بعد تشغيل next build، سينشئ Next.js مجلد out الذي يحتوي على أصول HTML/CSS/JS لتطبيقك.

يمكنك استخدام getStaticProps و getStaticPaths لإنشاء ملف HTML لكل صفحة في دليل pages الخاص بك (أو أكثر لـ المسارات الديناميكية).

الميزات المدعومة

معظم ميزات Next.js الأساسية اللازمة لبناء موقع ثابت مدعومة، بما في ذلك:

• المسارات الديناميكية عند استخدام getStaticPaths
• الجلب المسبق مع next/link
• التحميل المسبق لـ JavaScript
• الاستيراد الديناميكي
• أي خيارات للتنسيق (مثل وحدات CSS، styled-jsx)
• جلب البيانات على جانب العميل
• getStaticProps
• getStaticPaths

تحسين الصور

يمكن استخدام تحسين الصور عبر next/image مع التصدير الثابت عن طريق تحديد محمل صور مخصص في next.config.js. على سبيل المثال، يمكنك تحسين الصور باستخدام خدمة مثل Cloudinary:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

سيحدد هذا المحمل المخصص كيفية جلب الصور من مصدر بعيد. على سبيل المثال، المحمل التالي سيقوم ببناء URL لـ Cloudinary:

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

ثم يمكنك استخدام next/image في تطبيقك، مع تحديد مسارات نسبية للصورة في Cloudinary:

import Image from 'next/image'

export default function Page() {
  return <Image alt="سلاحف" src="/turtles.jpg" width={300} height={300} />
}

import Image from 'next/image'

export default function Page() {
  return <Image alt="سلاحف" src="/turtles.jpg" width={300} height={300} />
}

الميزات غير المدعومة

الميزات التي تتطلب خادم Node.js، أو المنطق الديناميكي الذي لا يمكن حسابه أثناء عملية البناء، غير مدعومة:

• التوجيه الدولي
• مسارات API
• إعادة الكتابة
• إعادة التوجيه
• الرؤوس
• الوسيط
• التجديد الثابت التدريجي
• تحسين الصور مع المحمل الافتراضي loader
• وضع المسودة
• getStaticPaths مع fallback: true
• getStaticPaths مع fallback: 'blocking'
• getServerSideProps

النشر

مع التصدير الثابت، يمكن نشر Next.js واستضافته على أي خادم ويب يمكنه تقديم أصول ثابتة من نوع HTML/CSS/JS.

عند تشغيل next build، ينشئ Next.js التصدير الثابت في مجلد out. لم يعد هناك حاجة لاستخدام next export. على سبيل المثال، لنفترض أن لديك المسارات التالية:

• /
• /blog/[id]

بعد تشغيل next build، سينشئ Next.js الملفات التالية:

• /out/index.html
• /out/404.html
• /out/blog/post-1.html
• /out/blog/post-2.html

إذا كنت تستخدم خادمًا ثابتًا مثل Nginx، يمكنك تكوين إعادة كتابة للطلبات الواردة إلى الملفات الصحيحة:

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # هذا ضروري عندما `trailingSlash: false`.
  # يمكنك حذف هذا عندما `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

سجل الإصدارات