Next.js 8.1 | Next.js

امروز ما مشتاقیم اعلام کنیم که تجربه Next.js را برای ساخت صفحات AMP گسترش داده ایم.

AMP یک استاندارد ساخت وب سایت با کارایی بالا است که هزینه های رندر را به حداقل می رساند و می تواند در موتورهای جستجوی معروف با رفتار بهبود یافته ایندکس شود. برای مثال، صفحات AMP مستقیماً در نتایج جستجوی موبایل گوگل بارگیری می شوند و با نماد رعد و برق مشخص می شوند.

AMP HTML نسخه سخت گیرانه تری از HTML است که برای دستیابی به عملکرد قابل اعتمادتر و مقیاس پذیری بهتر، محدودیت های متعددی را اعمال می کند. برخی از تگ های HTML با تگ های HTML خاص AMP جایگزین می شوند تا تجربه بهتری نسبت به تگ HTML مربوطه ارائه دهند. به عنوان مثال، در amp-img برچسب کامل ارائه می دهد srcset حتی در مرورگرهایی که هنوز از آن پشتیبانی نمی کنند.

صفحات AMP به طور خودکار توسط موتورهای جستجویی که از آن پشتیبانی می کنند کشف می شوند. این موتورهای جستجو معمولاً کش AMP را پیاده سازی می کنند (مثلاً گوگل و بینگ). حافظه پنهان AMP به صفحه کمک می کند سریعتر از نتایج جستجو ارائه شود.

امروز ما مشتاقیم اعلام کنیم که تجربه Next.js را برای ساخت صفحات AMP گسترش داده ایم. این بدان معناست که اکنون می توانید از قدرت اجزای React برای ایجاد صفحات AMP استفاده کنید. پشتیبانی AMP بر اساس هر صفحه تعریف می‌شود و امکان پذیرش تدریجی AMP را فراهم می‌کند. دو راه برای فعال کردن AMP در Next.js وجود دارد: صفحه 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 Google ذخیره می شود تا از تجربه کاربری سریع در وب تلفن همراه اطمینان حاصل شود و در عین حال نسخه دسکتاپ کامل Reddit و ناوبری بعدی را ارائه می دهد.

لینک را به عنوان کپی کنیدAMP-First Pages

صفحات اول 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-First مستلزم این است که فقط از اجزای سازگار با AMP برای ساخت صفحات خود استفاده کنید. صفحات AMP-first در حال حاضر در nextjs.org/docs و nextjs.org/blog تولید می شوند.

لینک را به عنوان کپی کنیدرندر AMP را به اجزا تقسیم کنید

هر جزء React در پروژه شما می تواند سودمند باشد useAmp برای تمایز بین حالت رندر AMP و غیر AMP. این به شما اجازه می دهد که پیاده سازی کنید مؤلفه ای که منطق را بین آنها به اشتراک می گذارد و :

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 معتبر ایجاد می‌شوند، ما به‌طور خودکار آنها را تأیید می‌کنیم amphtml-validator در طول توسعه خطاها و هشدارها در ترمینالی که Next.js را اجرا کرده اید ظاهر می شود.

صفحات نیز از طریق اعتبارسنجی می شوند next export و تمام مشکلات در ترمینال چاپ می شود. همه خطاهای AMP باعث می شود next export به دلیل اینکه صادرات یک AMP معتبر نیست، شکست بخورد.

علاوه بر یادگیری نحوه استفاده از Next.js، بخش جدیدی برای یادگیری نحوه استفاده از AMP در Next.js اضافه کرده‌ایم.

از طرف دیگر، استفاده از مثال AMP را شروع کنید:

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