الفرق بين المراجعتين ل"Next.js/static html export"
< Next.js
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط |
|||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:تصدير التطبيق إلى صفحات HTML ساكنة في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:تصدير التطبيق إلى صفحات HTML ساكنة في Next.js}}</noinclude> | ||
| − | يتيح لك الأمر <code>next export</code> تصدير تطبيق Next.js إلى صفحات HTML ساكنة قائمة بحد ذاتها دون الحاجة إلى خادم Node.js. ننصحك فقط باستخدام <code>next export</code> إن لم تكن بحاجة إلى أية ميزات غير مدعومة | + | يتيح لك الأمر <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|التجديد التدريجي الساكن]]. | + | إن كنت تنوي إنشاء تطبيق هجين تُصيّر فيه بعض الصفحات مسبقًا فقط إلى صفحات HTML ساكنة، فهذا ما تفعله Next.js تلقائيًا. لمزيد من المعلومات اطلع أكثر على [[Next.js/automatic static optimization|التحسين الساكن التلقائي]] و<nowiki/>[[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>next export</code> == | ||
| سطر 11: | سطر 11: | ||
</syntaxhighlight>نفّذ بعد ذلك الأمر <code>npm run build</code> الذي يولّد المجلد <code>out</code>. | </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>. | + | يبني الأمر <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.config.js|<code>exportPathMap</code>]] في حالات متقدمة أكثر ضمن الملف <code>next.config.js</code> لتحديد الصفحات التي ستُولَّد. |
| + | |||
| + | '''تحذير''': تجنب استعمال <code>exportPathMap</code> لتعريف وجهات routes مع أي مسارات <code>getStaticPaths</code> لصفحات مولدة، فلا ننصح أبدًا بفعل ذلك بعد الآن. | ||
== الميزات المدعومة == | == الميزات المدعومة == | ||
| − | تُدعم الغالبية العظمى من ميزات | + | تُدعم الغالبية العظمى من ميزات Next.js الضرورية لبناء موقع ساكن بما في ذلك: |
| − | * | + | * الوجهات الديناميكية عند استخدام الدالة <code>getStaticPaths</code>. |
* الإحضار المسبق باستخدام المكوّن <code>next/link</code>. | * الإحضار المسبق باستخدام المكوّن <code>next/link</code>. | ||
* التحميل المسبق لشيفرة JavaScript. | * التحميل المسبق لشيفرة JavaScript. | ||
| سطر 28: | سطر 30: | ||
== الميزات غير المدعومة == | == الميزات غير المدعومة == | ||
| − | وهي الميزات التي تحتاج خادم | + | وهي الميزات التي تحتاج خادم Next.js أو منطق ديناميكي لا يمكن حسابه أثناء عملية البناء: |
* تحسين الصورة (المحمِّل الافتراضي) | * تحسين الصورة (المحمِّل الافتراضي) | ||
| سطر 37: | سطر 39: | ||
* [[Next.js/next.config.js|Redirects]] | * [[Next.js/next.config.js|Redirects]] | ||
* [[Next.js/next.config.js|Headers]] | * [[Next.js/next.config.js|Headers]] | ||
| − | * [[Next.js/middleware| | + | * [[Next.js/middleware|البرمجيات الوسطية 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|التجديد التدريجي الساكن]] | * [[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>fallback: true</code> | ||
| سطر 43: | سطر 45: | ||
=== الدالة <code>getInitialProps</code> === | === الدالة <code>getInitialProps</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>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>req</code> و <code>res</code> العائدين للمعامل <code>context</code> فارغان لعدم وجود خادم أثناء التصدير. | ||
| − | * تُستدعى الدالة <code>getInitialProps</code> عند أية تنقلات في جانب العميل، لهذا عليك التبديل إلى | + | * تُستدعى الدالة <code>getInitialProps</code> عند أية تنقلات في جانب العميل، لهذا عليك التبديل إلى <code>getStaticProps</code> إن أردت إحضار البيانات أثناء بناء التطبيق. |
| − | * تحضر الدالة <code>getInitialProps</code> البيانات من الواجهة البرمجية ولا يمكنها استخدام مكتبات | + | * تحضر الدالة <code>getInitialProps</code> البيانات من الواجهة البرمجية ولا يمكنها استخدام مكتبات خاصة أو منظومة الملفات كما تفعل <code>getStaticProps</code>. |
لهذا ننصحك باستخدام <code>getStaticProps</code> بدلًا من <code>getInitialProps</code> ما أمكن. | لهذا ننصحك باستخدام <code>getStaticProps</code> بدلًا من <code>getInitialProps</code> ما أمكن. | ||
| + | |||
| + | == أمثلة == | ||
| + | |||
| + | * [https://github.com/vercel/next.js/tree/canary/examples/with-static-export Static Export] | ||
== المصادر == | == المصادر == | ||
| − | * الصفحة | + | * الصفحة [https://nextjs.org/docs/advanced-features/static-html-export Static HTML Export] من توثيق Next.js الرسمي. |
| + | [[تصنيف:Next.js|{{SUBPAGENAME}}]] | ||
| + | [[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 17:09، 3 يناير 2023
يتيح لك الأمر 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 لتحديد الصفحات التي ستُولَّد.
تحذير: تجنب استعمال exportPathMap لتعريف وجهات routes مع أي مسارات getStaticPaths لصفحات مولدة، فلا ننصح أبدًا بفعل ذلك بعد الآن.
الميزات المدعومة
تُدعم الغالبية العظمى من ميزات Next.js الضرورية لبناء موقع ساكن بما في ذلك:
- الوجهات الديناميكية عند استخدام الدالة
getStaticPaths. - الإحضار المسبق باستخدام المكوّن
next/link. - التحميل المسبق لشيفرة JavaScript.
- الإدراج الديناميكي.
- أي خيارات لتنسيق الصفحة.
- إحضار البيانات من جانب العميل.
- استخدام الدالتين
getStaticPropsوgetStaticPaths. - تحسين الصورة باستخدام المُحمِّلات المخصصة.
الميزات غير المدعومة
وهي الميزات التي تحتاج خادم Next.js أو منطق ديناميكي لا يمكن حسابه أثناء عملية البناء:
- تحسين الصورة (المحمِّل الافتراضي)
- الوجهات العالمية
- مسارات API
- Rewrites
- Redirects
- Headers
- البرمجيات الوسطية Middleware
- التجديد التدريجي الساكن
fallback: truegetServerSideProps
الدالة getInitialProps
يمكنك استخدام الواجهة البرمجية للدالة getInitialProps بدلًا من استخدامها نفسها، لكن مع بعض التحذيرات:
- لا يمكن استخدام
getInitialPropsمعgetStaticPropsأوgetStaticPathsفي أي صفحة. فإن كان لديك وجهات ديناميكية، هيئ المعاملexportPathMapفي ملفnext.config.jsبدلًا من استخدامgetStaticPaths، لتخبر المُصدِّر أية ملفات يجب توليدها.
- عندما تُستدعى الدالة
getInitialPropsأثناء التصدير سيكون الكائنانreqوresالعائدين للمعاملcontextفارغان لعدم وجود خادم أثناء التصدير. - تُستدعى الدالة
getInitialPropsعند أية تنقلات في جانب العميل، لهذا عليك التبديل إلىgetStaticPropsإن أردت إحضار البيانات أثناء بناء التطبيق. - تحضر الدالة
getInitialPropsالبيانات من الواجهة البرمجية ولا يمكنها استخدام مكتبات خاصة أو منظومة الملفات كما تفعلgetStaticProps.
لهذا ننصحك باستخدام getStaticProps بدلًا من getInitialProps ما أمكن.
أمثلة
المصادر
- الصفحة Static HTML Export من توثيق Next.js الرسمي.