الفرق بين المراجعتين لصفحة: «Next.js/amp support»
< Next.js
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:دعم صفحات AMP في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:دعم صفحات AMP في Next.js}}</noinclude> | ||
تتيح لك Next.js تحويل صفحات React إلى [https://amp.dev/ صفحات AMP] بأقل قدر من الإعدادات ودون أن | تتيح لك Next.js تحويل صفحات React إلى [https://amp.dev/ صفحات AMP] بأقل قدر من الإعدادات ودون أن تتخلى عن React. ولتمكين دعم Next.js لصفحات AMP والتعرّف على الإعدادات المختلفة لهذه الصفحات راجع [[Next.js/next amp|توثيق الواجهة البرمجية للمكوّن <code>next/amp</code>]]. | ||
== | إن لم تكن تعرف AMP، فارجع إلى موقعها الرسمي [https://amp.dev/ amp.dev]. | ||
== محاذير على دعم AMP في Next.js == | |||
* لا تدعم Next.js سوى CSS-in-JS لأن [[Next.js/build in css support|وحدات CSS]] غير مدعومة من قبل صفحات AMP حاليًا. | * لا تدعم Next.js سوى CSS-in-JS لأن [[Next.js/build in css support|وحدات CSS]] غير مدعومة من قبل صفحات AMP حاليًا. | ||
== إضافة مكوّنات AMP في Next.js == | == إضافة مكوّنات AMP في Next.js == | ||
يقدِّم مجتمع العديد من [https://amp.dev/documentation/components/ المكوِّنات] لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في | يقدِّم مجتمع Next.js العديد من [https://amp.dev/documentation/components/ المكوِّنات] لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في الصفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:<syntaxhighlight lang="javascript"> | ||
export const config = { amp: true } | export const config = { amp: true } | ||
| سطر 29: | سطر 31: | ||
export default MyAmpPage | export default MyAmpPage | ||
</syntaxhighlight>يستخدم المثال السابق المكوّن | </syntaxhighlight>يستخدم المثال السابق المكوّن <code>[https://amp.dev/documentation/components/amp-timeago/?format=websites amp-timeago]</code> الذي تُدرج Next.js النسخة الأحدث منه افتراضيًا. وبإمكانك أن تخصص النسخة التي تريد من خلال المكوّن <code>next/head</code> كما في المثال التالي:<syntaxhighlight lang="javascript"> | ||
import Head from 'next/head' | import Head from 'next/head' | ||
| سطر 64: | سطر 66: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== التحقق من صفحات AMP | == التحقق من صفحات AMP == | ||
يجري التحقق من صفحات AMP تلقائيًا باستخدام [https://www.npmjs.com/package/amphtml-validator amphtml-validator] خلال مرحلة التطوير، وستظهر الأخطاء | يجري التحقق من صفحات AMP تلقائيًا باستخدام [https://www.npmjs.com/package/amphtml-validator amphtml-validator] خلال مرحلة التطوير، وستظهر الأخطاء والتنبيهات على الطرفية حيثما تُشغّل Next.js. كما يجري التحقق من الصفحات أيضًا أثناء [[Next.js/static html export|التصدير الساكن لصفحات HTML]] وستُطبع أية أخطاء أو تنبيهات على شاشة الطرفية. ستسبب أخطاء AMP إنهاء التصدير مع رمز الحالة <code>1</code> نظرًا لفشل تصدير AMP. | ||
=== | === مدققات مخصصة === | ||
بإمكانك استخدام | بإمكانك استخدام مدقق AMP مخصص عبر الملف <code>next.config.js</code> كما في الشيفرة التالية:<syntaxhighlight lang="javascript"> | ||
module.exports = { | module.exports = { | ||
amp: { | amp: { | ||
| سطر 76: | سطر 78: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== تجاوز | === تجاوز التدقيق عن صفحات AMP === | ||
لتعطيل | لتعطيل التدقيق في صفحات AMP أضف الشيفرة التالية إلى ملف <code>next.config.js</code>:<syntaxhighlight lang="javascript"> | ||
experimental: { | experimental: { | ||
amp: { | amp: { | ||
| سطر 86: | سطر 88: | ||
== دعم صفحات AMP أثناء التصدير الساكن لملفات HTML == | == دعم صفحات AMP أثناء التصدير الساكن لملفات HTML == | ||
عندما تستخدم <code>next export</code> لتنفيذ عملية التصيير المسبق للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة <code>pages/about.js</code> في خرجها ما يلي: | عندما تستخدم <code>next export</code> لتنفيذ عملية التصيير المسبق prerender للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة <code>pages/about.js</code> في خرجها ما يلي: | ||
* <code>out/about.html</code>: صفحة HTML مع دعم لشيفرة React من ناحية العميل أثناء التشغيل. | * <code>out/about.html</code>: صفحة HTML مع دعم لشيفرة React من ناحية العميل أثناء التشغيل. | ||
| سطر 101: | سطر 103: | ||
</syntaxhighlight>وعندما يُفعّل الخيار [[Next.js/next.config.js|<code>trailingSlash</code>]] ستكون الصفحات المصدّرة عن <code>pages/about.js</code> كالتالي: | </syntaxhighlight>وعندما يُفعّل الخيار [[Next.js/next.config.js|<code>trailingSlash</code>]] ستكون الصفحات المصدّرة عن <code>pages/about.js</code> كالتالي: | ||
* <code>out/about/index.html</code> : صفحة HTML. | * <code>out/about/index.html</code>: صفحة HTML. | ||
* <code>out/about.amp/index.html</code>: صفحة AMP. | * <code>out/about.amp/index.html</code>: صفحة AMP. | ||
== استخدام TypeScript مع صفحات AMP في Next.js == | == استخدام TypeScript مع صفحات AMP في Next.js == | ||
لا تدعم AMP حاليًا أنواعًا مدمجة خاصة بلغة TypeScript لكنها [https://github.com/ampproject/amphtml/issues/13791 قيد التطوير]. وللالتفاف على هذا | لا تدعم AMP حاليًا أنواعًا مدمجة خاصة بلغة TypeScript لكنها [https://github.com/ampproject/amphtml/issues/13791 قيد التطوير]. وللالتفاف على هذا النقص، بإمكانك أن تنشأ يدويًا ملفًا يُدعى <code>amp.d.ts</code> في مشروعك ومن ثم إضافة [https://stackoverflow.com/a/50601125 أنواع مخصصة تجريبية]. | ||
== أمثلة == | |||
* [https://github.com/vercel/next.js/tree/canary/examples/amp AMP] | |||
== المصادر == | == المصادر == | ||
* صفحات [https://nextjs.org/docs/advanced-features/amp-support/introduction AMP Support] من توثيق Next.js الرسمي. | * صفحات [https://nextjs.org/docs/advanced-features/amp-support/introduction AMP Support] من توثيق Next.js الرسمي. | ||
[[تصنيف:Next.js|{{SUBPAGENAME}}]] | |||
[[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 16:59، 4 يناير 2023
تتيح لك Next.js تحويل صفحات React إلى صفحات AMP بأقل قدر من الإعدادات ودون أن تتخلى عن React. ولتمكين دعم Next.js لصفحات AMP والتعرّف على الإعدادات المختلفة لهذه الصفحات راجع توثيق الواجهة البرمجية للمكوّن next/amp.
إن لم تكن تعرف AMP، فارجع إلى موقعها الرسمي amp.dev.
محاذير على دعم AMP في Next.js
- لا تدعم Next.js سوى CSS-in-JS لأن وحدات CSS غير مدعومة من قبل صفحات AMP حاليًا.
إضافة مكوّنات AMP في Next.js
يقدِّم مجتمع Next.js العديد من المكوِّنات لتحسين تفاعلية صفحات AMP. وتُدرج Next.js تلقائيًا جميع المكوّنات المستخدمة في الصفحة ولا حاجة لإدراج شيفرة مكونات AMP يدويًا:
export const config = { amp: true }
function MyAmpPage() {
const date = new Date()
return (
<div>
<p>Some time: {date.toJSON()}</p>
<amp-timeago
width="0"
height="15"
datetime={date.toJSON()}
layout="responsive"
>
.
</amp-timeago>
</div>
)
}
export default MyAmpPage
يستخدم المثال السابق المكوّن amp-timeago الذي تُدرج Next.js النسخة الأحدث منه افتراضيًا. وبإمكانك أن تخصص النسخة التي تريد من خلال المكوّن next/head كما في المثال التالي:
import Head from 'next/head'
export const config = { amp: true }
function MyAmpPage() {
const date = new Date()
return (
<div>
<Head>
<script
async
key="amp-timeago"
custom-element="amp-timeago"
src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
/>
</Head>
<p>Some time: {date.toJSON()}</p>
<amp-timeago
width="0"
height="15"
datetime={date.toJSON()}
layout="responsive"
>
.
</amp-timeago>
</div>
)
}
export default MyAmpPage
التحقق من صفحات AMP
يجري التحقق من صفحات AMP تلقائيًا باستخدام amphtml-validator خلال مرحلة التطوير، وستظهر الأخطاء والتنبيهات على الطرفية حيثما تُشغّل Next.js. كما يجري التحقق من الصفحات أيضًا أثناء التصدير الساكن لصفحات HTML وستُطبع أية أخطاء أو تنبيهات على شاشة الطرفية. ستسبب أخطاء AMP إنهاء التصدير مع رمز الحالة 1 نظرًا لفشل تصدير AMP.
مدققات مخصصة
بإمكانك استخدام مدقق AMP مخصص عبر الملف next.config.js كما في الشيفرة التالية:
module.exports = {
amp: {
validator: './custom_validator.js',
},
}
تجاوز التدقيق عن صفحات AMP
لتعطيل التدقيق في صفحات AMP أضف الشيفرة التالية إلى ملف next.config.js:
experimental: {
amp: {
skipValidation: true
}
}
دعم صفحات AMP أثناء التصدير الساكن لملفات HTML
عندما تستخدم next export لتنفيذ عملية التصيير المسبق prerender للصفحات خلال التصدير الساكن لملفات HTML، تكتشف Next.js إن كانت صفحات AMP مدعومة ومن ثم تغيّر سلوك التصدير وفقًا لذلك. إذ ستعطي مثلًا الصفحة الهجينة pages/about.js في خرجها ما يلي:
out/about.html: صفحة HTML مع دعم لشيفرة React من ناحية العميل أثناء التشغيل.out/about.amp.html: وهي صفحة AMP.
وإن كانت الصفحة pages/about.js هي صفحة AMP فقط سيكون الخرج هو:
out/about.html: صفحة AMP محسّنة.
تضع Next.js تلقائيًا رابطًا إلى نسخة AMP من صفحتك ضمن نسخة HTML كالتالي:
<link rel="amphtml" href="/about.amp.html" />
كما ستضم نسخة AMP من صفحتك رابطًا إلى نسخة HTML:
<link rel="canonical" href="/about" />
وعندما يُفعّل الخيار trailingSlash ستكون الصفحات المصدّرة عن pages/about.js كالتالي:
out/about/index.html: صفحة HTML.out/about.amp/index.html: صفحة AMP.
استخدام TypeScript مع صفحات AMP في Next.js
لا تدعم AMP حاليًا أنواعًا مدمجة خاصة بلغة TypeScript لكنها قيد التطوير. وللالتفاف على هذا النقص، بإمكانك أن تنشأ يدويًا ملفًا يُدعى amp.d.ts في مشروعك ومن ثم إضافة أنواع مخصصة تجريبية.
أمثلة
المصادر
- صفحات AMP Support من توثيق Next.js الرسمي.