الإصدار 8.1 من Next.js

اليوم، نحن متحمسون للإعلان عن توسيع تجربة Next.js لدعم إنشاء صفحات AMP.

• ما هو AMP
• AMP في Next.js
• صفحات AMP الهجينة
• صفحات AMP الأساسية
• التحقق من صحة AMP

ما هو AMP؟

AMP هو معيار لبناء مواقع ويب عالية الأداء تقلل من حمل التصيير ويمكن فهرستها في محركات البحث المعروفة بسلوك محسن. على سبيل المثال، يتم تحميل صفحات AMP مباشرة في نتائج بحث جوجل للهواتف المحمولة ويتم تمييزها بأيقونة برق.

نتيجة بحث جوجل لـ Next.js

AMP HTML هو نسخة أكثر صرامة من HTML تفرض بعض القيود لتحقيق أداء أكثر موثوقية وقابلية أفضل للتوسع. يتم استبدال بعض علامات HTML بعلامات AMP محددة لتوفير تجربة أفضل من نظيراتها في HTML. على سبيل المثال، توفر علامة amp-img دعمًا كاملاً لـ srcset حتى في المتصفحات التي لا تدعمها بعد.

يتم اكتشاف صفحات AMP تلقائيًا بواسطة محركات البحث التي تدعمها. هذه المحركات تنفذ بشكل عام ذاكرة تخزين مؤقت لـ AMP (مثل جوجل و بينج). تساعد ذاكرة التخزين المؤقت لـ AMP في عرض الصفحة بشكل أسرع من نتائج البحث.

AMP في Next.js

اليوم، نحن متحمسون للإعلان عن توسيع تجربة Next.js لدعم إنشاء صفحات AMP. هذا يعني أنه يمكنك الآن الاستفادة من قوة مكونات React لإنشاء صفحات AMP. يتم تعريف دعم AMP على أساس كل صفحة، مما يسمح بتبني تدريجي لـ AMP. هناك طريقتان لتمكين AMP في Next.js: صفحة AMP هجينة أو صفحة AMP أساسية.

صفحات AMP الهجينة

تسمح صفحات AMP الهجينة بأن يكون لديك نسخة مصاحبة من AMP لصفحة تقليدية حتى تتمكن محركات البحث من عرض نسخة AMP من الصفحة في نتائج البحث للهواتف المحمولة مع الحفاظ على النسخة الحالية من الصفحة. هذا يتيح استخدام AMP في تطبيقك مع الاستمرار في استخدام ميزات Next.js مثل التوجيه من جانب العميل لتجربة المستخدم الرئيسية.

لتفعيل صفحة AMP هجينة، استخدم الدالة withAmp مع توفير خيار hybrid: true:

function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

مثال على نمط AMP الهجين المستخدم في الإنتاج هو Reddit. يتم تخزين كل موضوع في ذاكرة التخزين المؤقت لـ AMP من جوجل لتوفير تجربة مستخدم سريعة عبر الويب للهواتف المحمولة مع الاستمرار في توفير النسخة الكاملة من Reddit لأجهزة الكمبيوتر والتوجيه اللاحق.

صورة لـ Reddit يستخدم AMP لتحسين SEO

صورة لـ Reddit في عارض AMP

صفحات AMP الأساسية

يتم تقديم صفحات AMP الأساسية لحركة المرور الرئيسية للموقع وكذلك لحركة مرور محركات البحث. باستخدام صفحات AMP الأساسية، نقدم تجربة AMP السريعة إلى الموقع الرئيسي، بما في ذلك أجهزة الكمبيوتر المكتبية.

لتنفيذ صفحات AMP الأساسية، تقوم بلف الصفحات باستخدام الدالة withAmp:

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

إذا لم تكن بحاجة إلى وقت تشغيل Next.js، فإن استخدام صفحات AMP الأساسية يمكن أن يساعد في تسريع التطوير. يتطلب AMP الأساسي استخدام مكونات متوافقة مع AMP فقط لبناء صفحاتك. صفحات AMP الأساسية موجودة حاليًا في الإنتاج على nextjs.org/docs و nextjs.org/blog.

تمييز عرض AMP في المكونات

يمكن لأي مكون React في مشروعك الاستفادة من useAmp للتمييز بين وضعي عرض AMP وغير AMP. هذا يسمح لك بتنفيذ مكون <Image> يشارك المنطق بين <img> و <amp-img>:

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hello! Welcome to AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

إعادة التحميل التلقائي لتطوير AMP

في وضع التطوير، بدلاً من استخدام استبدال الوحدة النمطية الساخن، نتتبع أي تغييرات على الصفحة التي أنت عليها حاليًا ونقوم فقط بإعادة تحميل الصفحة عند تغييرها. السبب في استخدامنا لإعادة التحميل الكاملة بدلاً من استبدال الوحدة النمطية الساخن هو التأكد من أنك ترى دائمًا عرضًا جديدًا من جانب الخادم لصفحة AMP الخاصة بك.

التحقق من صحة AMP

للمساعدة في التأكد من إنتاج صفحات AMP صالحة فقط، نقوم بالتحقق منها تلقائيًا باستخدام amphtml-validator أثناء التطوير. ستظهر الأخطاء والتحذيرات في الطرفية حيث بدأت Next.js.

يتم أيضًا التحقق من الصفحات أثناء next export وسيتم طباعة أي مشكلات في الطرفية. أي أخطاء في AMP ستؤدي إلى فشل next export لأن التصدير ليس AMP صالحًا.

تعلم استخدام AMP مع Next.js

بالإضافة إلى تعلم كيفية استخدام Next.js، قمنا بإضافة قسم جديد لـ تعلم كيفية استخدام AMP في Next.js.

بدلاً من ذلك، يمكنك البدء باستخدام مثال AMP:

npx create-next-app --example amp amp-app