بررسی نکات موجود در فریمورک Next.js

اگر می‌خواهید وبسایت‌های رندر شده سریع، پر سرعت در سمت سرور ایجاد کنید که از سرعت بالایی برخوردار باشند و همچنین ماهیت واقعی آن‌ها نیز پویا باشد، Next.js در سال 2020 انتخاب شگفت انگیزی است. در این مقاله، نگاهی خواهیم انداخت به 5 نکته و چک لیست تولید Next.js و چک لیست‌هایی که باید به خاطر داشته باشید تا بهترین تجربه کار با Next.js را داشته باشید.

بهینه سازی SEO

اگر با Next.js نسبتا جدی کار می‌کنید، از SEO غافل نشوید. Next.js ابزاری عالی است که مراقبت از پروژه شما را بر عهده دارد و سئو (SEO) همان چیز کوچکی است که واقعا می‌تواند به شما در گرفتن ترافیک رایگان و قرار دادن شما روی نقشه کمک کند.

شما دو گزینه برای افزودن سئو به برنامه‌های Next.js دارید.

۱)Next.js باعث افزایش SEO می‌شود

از متا تگ‌های زیر در هر صفحه Next.js با مقادیر سفارشی استفاده کنید:

import Head from 'next/head'

// at the end of your render function
<Head>
	<title>Your page title</title>
	<meta name="description" content="<page description>" />

	<meta name="image" content="<page cover image>" />

	<meta itemProp="name" content="codedamn" />
	<meta itemProp="description" content="<page description>" />
	<meta itemProp="image" content="<your page cover>" />

	<meta property="twitter:card" content="summary" />
	<meta property="twitter:title" content="<page title>" />
	<meta property="twitter:description" content="<page description>" />
	<meta property="twitter:site" content="<your twitter handle>" />
	<meta property="twitter:creator" content="<your twitter handle>" />
	<meta property="twitter:image:src" content="<your page cover>" />

	<meta property="og:title" content="<page title>" />
	<meta property="og:description" content="<page description>" />
	<meta property="og:image" content="<your page cover>" />
	<meta property="og:url" content="<your url>" />
	<meta property="og:site_name" content="codedamn" />
	<meta property="fb:admins" content="<fb admin id>" />
	<meta property="fb:app_id" content="<fb app id>" />
	<meta property="og:type" content="website" />
</Head>

اینها برخی از تگ‌های متا رایج هستند که برای مدیریت اشتراک شبکه‌های اجتماعی و تگ‌های سئو مهم هستند.

۲)Next.js باعث افزایش SEO می‌شود

خوشبختانه با Next.js همچنین یک راه‌حل دیگر با استفاده از پلاگین next-seo داریم. این افزونه به شما امکان می‌دهد به طور خودکار از تگ‌های HTML و ویژگی‌های صحیح مراقبت کنید، فقط باید اطلاعات مربوطه را پر کنید.

در اینجا مثالی برای استفاده از پلاگین Next.js آورده شده است:

import { NextSeo } from 'next-seo'
 
export default function MyPage() {
  return <>
    <NextSeo
      title="Simple Usage Example"
      description="A short description goes here."
    />
    <p>Simple Usage</p>
  </>
}

ویژگی‌های بیشتری وجود دارد که می‌توانید آن‌ها را شخصی‌سازی کرده و اضافه کنید.

اعتبارسنجی مجدد صفحات پویا

Next.js به شما امکان می‌دهد صفحات پویای خود را هر از چندگاهی اعتبار مجدد دهید. معنی آن چیست؟ این یک ویژگی شگفت‌انگیز است که در واقع به شما کمک می‌کند اعتبار سنجی کنید، یعنی دوباره صفحات را بعد از یک بازه مشخص ایجاد کنید.

به علاوه این امکان را برای شما فراهم می‌کند که صفحات را به صورت پویا تغییر دهید در حالی که HTML ثابت را در قسمت بک‌اند ارائه می‌دهید. این یک مزیت برای سرور و کلاینت است. کلاینت یک فایل HTML از قبل ارائه شده را بلافاصله دریافت می‌کند. سرور لازم نیست صفحه واقعی را برای هر درخواست محاسبه کند، فقط یک بار در یک بازه مشخص انجام می‌شود.

این مثال را از اینجا بررسی کنید.

نسخه نمایشی صفحه استاتیک (ثابت):

توضیح: این صفحه با واکشی داده‌ها به صورت آماری با Next.js تولید می‌شود که در Vercel's Edge Network (CDN) مستقر شده است. نکته مهم این است که این صفحه با استفاده از بازسازی استاتیک افزایشی (که در Next.js 9.5 منتشر شده است) دوباره تولید می‌شود. نحوه کار آن به شرح زیر است.

اگر کد منبع صفحه را بررسی کنید، خواهید دید که در واقع داده‌های HTML ثابت از سرور بازگردانده می‌شوند. پارامتر اعتبارسنجی مجدد روی 1 ثانیه تنظیم شده است، این بدان معنی است که:

هر صفحه Next.js می‌تواند مهلت زمانی را تعیین کند. برای صفحه فوق، 1 ثانیه تنظیم شده است.
وقتی درخواست جدیدی وارد می‌شود، صفحه ایجاد شده مستقیما از سیستم فایل ارائه می‌شود، مثل اینکه یک صفحه ثابت و ساکن را می‌بینید.
سپس وقتی درخواست دیگری پس از گذشت مدتی از زمان تعیین شده انجام شد:
- صفحه تولید شده به صورت ثابت ارائه می‌شود.
- Next.js نسخه جدیدی از صفحه را در پس زمینه تولید می‌کند و صفحه ثابت را برای درخواست‌های آینده به روز می‌کند.
هنگامی که درخواست دیگری پس از انجام تولید مجدد وارد می‌شود: صفحه ثابت به روز شده به آن درخواست و به کلیه درخواست‌های بعدی از آن نقطه ارائه می‌شود.
در صورت عدم موفقیت تولید مجدد به هر دلیلی (مانند فراخوانی API ناموفق)، Next.js آخرین صفحه در دسترس را ارائه می‌دهد تا به دلیل وجود خرابی در سرور، از کار نیفتد.
این ویژگی موجب بازسازی استاتیک افزایشی به صورت صفحه‌ای بدون بازسازی کامل برنامه می‌شود که همیشه سریع خواهد بود زیرا کاربران همیشه پاسخ ایستایی دریافت می‌کنند.

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

از TypeScript در Next.js استفاده کنید

تنظیم TypeScript با Next.js بسیار راحت و آسان است. برای تبدیل پروژه Next.js خود از جاوااسکریپت به تایپ‌اسکریپت تنها کاری که باید انجام دهید به شرح زیر است:

تغییر نام تمام فایل‌های jsx. به tsx. (درصورت کامپوننت بودن) و فایل‌های js. به ts. (اگر API یا فایل‌های معمولی هستند).
دستور زیر را در ترمینال خود اجرا کنید:
# npm
npm i typescript @types/node @types/react --save-dev
# or yarn
yarn add typescript @types/node @types/react --dev
دوباره پروژه خود را با استفاده از yarn dev یا npm run dev اجرا کنید. این یک فایل جدید به نام tsconfig.json ایجاد می‌کند و آن را با بهترین تنظیمات انجام می‌دهد.
برای دریافت فایل جدید tsconfig.json ممکن است لازم باشد موتور تایپ ویرایشگر خود را مجددا راه‌اندازی کنید. ساده‌ترین راه این است که خود ویرایشگر را ریستارت کنید.

بهینه سازی فونت‌ها و تصاویر

Next.js یک فریمورک عالی برای کد شما است. اما در مورد بخش‌های ثابت شما چطور؟ آن‌ها به همان اندازه در ارائه بهترین تجربه به کاربر نقش مهمی دارند. مثلا یک وبسایت فوق‌العاده سریع با بارگذاری تصویر ۵ مگابایتی روی می‌دهد و کل صفحه را کند می‌کند که کمتر مورد استفاده قرار می‌گیرد.

باز هم روش‌های مختلفی برای حل این مسئله وجود دارد، بیایید با آنچه در آینده نزدیک امکان‌پذیر است شروع کنیم.

پشتیبانی بهینه‌سازی آزمایشی

Next.js 9.5.2 شامل پشتیبانی آزمایشی است. این بدان معناست که شما می‌توانید فونت‌ها و تصاویر خود را بدون صرف هرگونه وقت برای پیکربندی بهینه کنید، اجازه دهید Next.js این کار را برای شما انجام دهد.

همه ما از فونت‌های گوگل استفاده می‌کنیم. بسیار راحت است که لینک را می‌گیریم و آن را داخل هدر می‌اندازیم و مانند CSS از آن در صفحه استفاده می‌کنیم. اما واقعیت این است که بارگذاری فونت فقط یک مسیر رفت و برگشت دیگر به سرور گوگل است، به این معنی که وبسایت شما باید یک درخواست خارجی ایجاد کند و این باعث کندی می‌شود. در اینجا یک PR ادغام شده برای آن وجود دارد.

برای فعال کردن هر دو مورد، حداقل از نسخه 9.5.2 استفاده کنید و موارد زیر را به فایل next.config.js اضافه کنید:

module.exports = {
  experimental: {
    optimizeFonts: true,
    optimizeImages: true
  }
}

با این کار اطمینان حاصل می‌کنید که برای بهترین عملکرد فونت‌های درون خطی دارید و تصاویر شما بهینه می‌شوند.

از tinypng استفاده کنید

اگر به هر دلیلی می‌خواهید تصاویر را به صورت دستی بهینه کنید، tinypng یک راه‌حل عالی است و من شخصا بارها از آن استفاده می‌کنم. بخش رایگان آن‌ها بسیار سخاوتمندانه است و شما هرگز نیازی به پرداخت هزینه‌های کم و متوسط برای آن‌ها نخواهید داشت.

در اینجا سایت tinypng وجود دارد: tinypng.com

روی Vercel مستقر شوید

من تقریبا همیشه توصیه می‌کنم که پروژه را در Vercel مستقر کنید مگر اینکه دلیل محکمی برای استقرار آن به صورت دستی داشته باشید. اگر پروژه شخصی دارید 100٪ آن را توصیه می‌کنم.

پلن ارائه شده آن‌ها فوق‌العاده سخاوتمندانه است و با زیرساخت CDN / Edge، وبسایت خود را به طرز چشم‌گیری سریع به مشتریان تحویل می‌دهید. وبسایت codedamn نیز در Vercel نیز میزبانی می‌شود و امیدوارم که شما تجربه خوبی در مرور و خواندن مطالب اینجا داشته باشید.

در اینجا مراحل استقرار وبسایت در vercel وجود دارد:

یک حساب کاربری رایگان در vercel.com ایجاد کنید.
این دستور را در ترمینال خود بنویسید: npm i vercel -g
در ترمینال خود، vc login را بنویسید.
آدرس ایمیل خود را وارد کنید و ایمیل ارسال شده را تأیید کنید.
در روت پروژه Next.js خود، vc را بنویسید.
منتظر بمانید تا پروژه ساخته و بارگذاری شود. به زودی دامنه‌ای به پروژه شما در شبکه vercel edge تعلق می‌گیرد.

اگر مایل به یادگیری next.js هستید؛ پیشنهاد ما این است که آموزش next.js وبسایت راکت را ببینید.

جمع‌بندی

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

منبع