فریم‌ورک Next.js یکی از محبوب‌ترین فریم‌ورک‌ها برای ساخت اپلیکیشن‌های سمت سرور React است که قابلیت‌های فراوانی از جمله پشتیبانی از AMP را دارد. اما AMP چیه؟ این سؤالیه که خیلی‌ها شاید براشون پیش بیاد. AMP یا صفحات موبایل شتاب‌دار (Accelerated Mobile Pages) تکنولوژی ای است که هدف آن افزایش سرعت لود صفحات وب بر روی دستگاه‌های موبایل است.
ایده اصلی این است که با محدود کردن برخی امکانات و حذف مواردی که باعث کندی می‌شود، سرعت بارگذاری افزایش یابد.
وقتی AMP را با Next.js استفاده می‌کنید، می‌توانید صفحات خاصی از سایت‌تون رو بهینه کنید تا در سطح بالاتری از سرعت در دستگاه‌های موبایل نمایش داده شوند.
برای پیکربندی AMP در Next.js، مراحل ساده‌ای وجود دارد که به راحتی می‌توانید دنبال کنید. ابتدا مطمئن شوید که پروژه‌تان به دقت تنظیم شده و کامپوننت‌هایی که قرار است به AMP تبدیل شوند، به درستی ایزوله شده‌اند. برای اینکار، باید برچسب «accessibility» و کلاس‌های مناسب را اضافه کنید.
یکی از بزرگترین نکات کلیدی در استفاده از Next.js و AMP، استفاده مناسب از Head در صفحه است. تمامی اسکریپت‌ها و استایل‌ها به درستی باید مدیریت شوند تا تداخلی ایجاد نشود. همینطور، برای صفحه‌هایی که تحت AMP قرار می‌گیرند نیاز است که نسخه SSR آن صفحه ایجاد شود. این کمک می‌کند تا تجربه کاربری بهتری فراهم باشد.
AMP در واقع یک پروژۀ منبع باز است و همیشه به روزرسانی می‌شود. بنابراین خیلی مهم است که وقتی از این تکنولوژی استفاده می‌کنید مراقب باشید و APIها و امکانات جدید آن را بشناسید. با این حال، اگر به درستی AMP را در پروژه‌هایتان استفاده کنید، می‌توانید به بهبود چشمگیری در سرعت صفحات خود دست پیدا کنید.
در ادامه، نگاهی به نحوه استفاده از کد AMP در Next.js خواهیم داشت.
import React from 'react';
import Head from 'next/head';
export default function Page() {
return (
صفحه AMP با Next.js
این صفحه برای بارگذاری سریع بهینه شده است.
);
}
خط اول:
import React from 'react'; این خط React را برای استفاده در کامپوننت JSX وارد می‌کند.
خط دوم:
import Head from 'next/head'; این خط برای اضافه کردن تگ‌های HTML به head صفحه استفاده می‌شود.
خط چهارم:
export default function Page() {...} تعریف و صدور کامپوننتی به نام Page است که به عنوان یک صفحه AMP عمل می‌کند.
خط ششم:
<html amp=""> این خط برچسب HTML را مشخص می‌کند که برای AMP پیکربندی شده است.
خط هفتم تا دهم: اضافه کردن عناصر به head مانند charset و title و اسکریپت لازم برای AMP.
خط دوازدهم:
<body> محور محتواهای اصلی صفحه مانند تیتر و پاراگراف را تشکیل می‌دهد.