الفرق بين المراجعتين لصفحة: «Next.js/static html export»

من موسوعة حسوب
التعديل اللاحق ←
مرئينص الويكي
أنشأ صفحة فارغة
 
لا ملخص تعديل
سطر 1: سطر 1:


= تصدير التطبيق إلى صفحات HTML ساكنة في Next.js =
يتيح لك الأمر <code>next export</code> تصدير تطبيق Next.js إلى صفحات HTML ساكنة قائمة بحد ذاتها دون الحاجة إلى خادم Node.js. ننصحك فقط باستخدام <code>next export</code> إن لم تكن بحاجة إلى أية ميزات غير مدعومة  تحتاج إلى خادم.
إن كنت تنوي إنشاء تطبيق هجين تُصيّر فيه بعض الصفحات مسبقًا فقط إلى صفحات HTML ساكنة، فهذا ما تفعله Next.js تلقائيًا. لمزيد من المعلومات اطلع أكثر على [[Next.js/automatic static optimization|التحسين الساكن التلقائي]] و [[Next.js/data fetching#.D8.A7.D9.84.D8.AA.D8.AC.D8.AF.D9.8A.D8.AF%20.D8.A7.D9.84.D8.AA.D8.AF.D8.B1.D9.8A.D8.AC.D9.8A%20.D8.A7.D9.84.D8.B3.D8.A7.D9.83.D9.86%20.D9.81.D9.8A%20Next.js|التجديد التدريجي الساكن]].
== استخدام الأمر <code>next export</code> ==
حدِّث سكربت بناء التطبيق في الملف <code>package.json</code> لاستخدام <code>next export</code>:<syntaxhighlight lang="json">
"scripts": {
  "build": "next build && next export"
}
</syntaxhighlight>نفّذ بعد ذلك الأمر <code>npm run build</code> الذي يولّد المجلد <code>out</code>.
يبني الأمر <code>next export</code> نسخة من التطبيق . إذ ستوّلد الدالتين <code>getStaticProps</code> و <code>getStaticPaths</code> أثناء بناء التطبيق <code>next build</code> ملف HTML لكل صفحة موجودة في المجلد <code>pages</code> (أو لكل وجهة ديناميكية). ثم ينسخ <code>next export</code> بعد ذلك الملفات التي صُدِّرت إلى المجلد الصحيح. وستوّلد الدالة <code>getInitialProps</code> ملفات HTML خلال تنفيذ الأمر <code>next export</code> بدلًا من توليدها عند تنفيذ الأمر <code>next build</code>.
يمكنك تعريف المعامل [[Next.js/next.config.js|<code>exportPathMap</code>]] في حالات متقدمة أكثر ضمن الملف <code>next.config.js</code> لتحديد  الصفحات التي ستُولَّد.
== الميزات المدعومة ==
تُدعم الغالبية العظمى من ميزات  Next.js الضرورية لبناء موقع ساكن بما في ذلك:
* [[Next.js/dynamic routes|الوجهات الديناميكية]] عند استخدام الدالة <code>getStaticPaths</code>.
* الإحضار المسبق باستخدام المكوّن <code>next/link</code>.
* التحميل المسبق لشيفرة JavaScript.
* [[Next.js/dynamic import|الإدراج الديناميكي]].
* أي خيارات لتنسيق الصفحة.
* [[Next.js/data fetching#.D8.A5.D8.AD.D8.B6.D8.A7.D8.B1%20.D8.A7.D9.84.D8.A8.D9.8A.D8.A7.D9.86.D8.A7.D8.AA%20.D9.85.D9.86%20.D8.AC.D8.A7.D9.86.D8.A8%20.D8.A7.D9.84.D8.B9.D9.85.D9.8A.D9.84%20.D9.81.D9.8A%20Next.js%202|إحضار البيانات من جانب العميل]].
* استخدام الدالتين <code>getStaticProps</code> و <code>getStaticPaths</code>.
* [[Next.js/image optimization|تحسين الصورة]] باستخدام المُحمِّلات المخصصة.
== الميزات غير المدعومة ==
وهي الميزات التي تحتاج خادم  Next.js أو منطق ديناميكي لا يمكن حسابه أثناء عملية البناء:
* تحسين الصورة (المحمِّل الافتراضي)
* [[Next.js/i18n routing|الوجهات العالمية]]
* [[Next.js/api routes|مسارات API]]
* [[Next.js/next.config.js|Rewrites]]
* [[Next.js/next.config.js|Redirects]]
* [[Next.js/next.config.js|Headers]]
* [[Next.js/middleware|الأدوات الوسطية]]
* [[Next.js/data fetching#.D8.A7.D9.84.D8.AA.D8.AC.D8.AF.D9.8A.D8.AF%20.D8.A7.D9.84.D8.AA.D8.AF.D8.B1.D9.8A.D8.AC.D9.8A%20.D8.A7.D9.84.D8.B3.D8.A7.D9.83.D9.86%20.D9.81.D9.8A%20Next.js|التجديد التدريجي الساكن]]
* <code>fallback: true</code>
* <code>getServerSideProps</code>
=== الدالة <code>getInitialProps</code> ===
يمكنك استخدام الواجهة البرمجية للدالة <code>getInitialProps</code> بدلًا من استخدامها نفسها، لكن مع بعض التحفظات:
* لا يمكن استخدام <code>getInitialProps</code> مع <code>getStaticProps</code> أو <code>getStaticPaths</code> في أي صفحة. فإن كان لديك وجهات ديناميكية، هيئ المعامل <code>exportPathMap</code> في ملف <code>next.config.js</code> بدلًا من استخدام <code>getStaticPaths</code>، لتخبر المُصدِّر أية ملفات يجب توليدها.
* عندما تُستدعى الدالة <code>getInitialProps</code> أثناء التصدير سيكون الكائنان <code>req</code> و <code>res</code> العائدين للمعامل <code>context</code> فارغان لعدم وجود خادم أثناء التصدير.
* تُستدعى الدالة <code>getInitialProps</code> عند أية تنقلات في جانب العميل، لهذا عليك التبديل إلى  <code>getStaticProps</code> إن أردت إحضار البيانات أثناء بناء التطبيق.
* تحضر الدالة <code>getInitialProps</code> البيانات من الواجهة البرمجية ولا يمكنها استخدام مكتبات الخاصة أو منظومة الملفات كما تفعل <code>getStaticProps</code>.
لهذا ننصحك باستخدام <code>getStaticProps</code> بدلًا من <code>getInitialProps</code> ما أمكن.
== المصادر ==
* الصفحة Export Static HTML من توثيق Next.js الرسمي.

مراجعة 03:43، 1 يونيو 2022

تصدير التطبيق إلى صفحات HTML ساكنة في Next.js

يتيح لك الأمر next export تصدير تطبيق Next.js إلى صفحات HTML ساكنة قائمة بحد ذاتها دون الحاجة إلى خادم Node.js. ننصحك فقط باستخدام next export إن لم تكن بحاجة إلى أية ميزات غير مدعومة تحتاج إلى خادم.

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

استخدام الأمر next export

حدِّث سكربت بناء التطبيق في الملف package.json لاستخدام next export:

"scripts": {
  "build": "next build && next export"
}

نفّذ بعد ذلك الأمر npm run build الذي يولّد المجلد out.

يبني الأمر next export نسخة من التطبيق . إذ ستوّلد الدالتين getStaticProps و getStaticPaths أثناء بناء التطبيق next build ملف HTML لكل صفحة موجودة في المجلد pages (أو لكل وجهة ديناميكية). ثم ينسخ next export بعد ذلك الملفات التي صُدِّرت إلى المجلد الصحيح. وستوّلد الدالة getInitialProps ملفات HTML خلال تنفيذ الأمر next export بدلًا من توليدها عند تنفيذ الأمر next build.

يمكنك تعريف المعامل exportPathMap في حالات متقدمة أكثر ضمن الملف next.config.js لتحديد الصفحات التي ستُولَّد.

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

تُدعم الغالبية العظمى من ميزات Next.js الضرورية لبناء موقع ساكن بما في ذلك:

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

وهي الميزات التي تحتاج خادم Next.js أو منطق ديناميكي لا يمكن حسابه أثناء عملية البناء:

  • تحسين الصورة (المحمِّل الافتراضي)

الدالة getInitialProps

يمكنك استخدام الواجهة البرمجية للدالة getInitialProps بدلًا من استخدامها نفسها، لكن مع بعض التحفظات:

  • لا يمكن استخدام getInitialProps مع getStaticProps أو getStaticPaths في أي صفحة. فإن كان لديك وجهات ديناميكية، هيئ المعامل exportPathMap في ملف next.config.js بدلًا من استخدام getStaticPaths، لتخبر المُصدِّر أية ملفات يجب توليدها.
  • عندما تُستدعى الدالة getInitialProps أثناء التصدير سيكون الكائنان req و res العائدين للمعامل context فارغان لعدم وجود خادم أثناء التصدير.
  • تُستدعى الدالة getInitialProps عند أية تنقلات في جانب العميل، لهذا عليك التبديل إلى getStaticProps إن أردت إحضار البيانات أثناء بناء التطبيق.
  • تحضر الدالة getInitialProps البيانات من الواجهة البرمجية ولا يمكنها استخدام مكتبات الخاصة أو منظومة الملفات كما تفعل getStaticProps.

لهذا ننصحك باستخدام getStaticProps بدلًا من getInitialProps ما أمكن.

المصادر

  • الصفحة Export Static HTML من توثيق Next.js الرسمي.
مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/static_html_export&oldid=31967»