نحوه نصب و استفاده از “next-sitemap” در برنامه Next.js: راهنمای گام به گام

Summarize this content to 400 words in Persian Lang
اگر در حال ساختن یک وب سایت با Next.js هستید، احتمالاً می خواهید که موتورهای جستجو صفحات شما را به طور موثر کشف و فهرست کنند. یکی از راه های بهبود این فرآیند، ایجاد نقشه سایت است. نقشه سایت فایلی است که تمام URL های موجود در وب سایت شما را فهرست می کند و به موتورهای جستجو مانند گوگل کمک می کند تا سایت شما را سریعتر خزیده و ایندکس کنند.

در این راهنما، نحوه نصب و پیکربندی را توضیح خواهیم داد next-sitemap در پروژه Next.js ما همچنین مزایای داشتن نقشه سایت را پوشش می دهیم و کد نمونه را با برنامه Next.js “Hello World” اضافه می کنیم تا نحوه عملکرد آن را نشان دهیم.

مزایای استفاده از next-sitemap

قبل از اینکه به فرآیند نصب بپردازیم، اجازه دهید به طور خلاصه در مورد مزایای کلیدی استفاده صحبت کنیم next-sitemap:

سئو بهبود یافته: یک نقشه سایت با ساختار مناسب به موتورهای جستجو مانند گوگل کمک می کند تا صفحات شما را به طور موثرتری کشف کنند، که منجر به نمایه سازی بهتر و رتبه بندی جستجوی بالقوه بالاتر می شود.
خزیدن سریعتر: با ارائه نقشه راه به موتورهای جستجو از وب سایت خود، به آنها اجازه می دهید صفحات شما را سریعتر بخزند و ایندکس کنند.
مدیریت مسیرهای پویا: برای وب سایت هایی با مسیرهای پویا، next-sitemap تولید URL برای محتوای پویا را آسان می کند و اطمینان می دهد که همه صفحات شما قابل کشف هستند.
نقشه های سایت سفارشی: next-sitemap به شما این امکان را می دهد که نقشه های سایت خود را با گزینه هایی مانند تنظیم اولویت، تغییر فرکانس و حتی حذف برخی صفحات خاص سفارشی کنید.

مرحله 1: نصب کنید next-sitemap

برای شروع، باید آن را نصب کنید next-sitemap بسته در پروژه Next.js شما. دستور زیر را در ترمینال خود اجرا کنید:

npm install next-sitemap

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یا اگر از نخ استفاده می کنید:

yarn add next-sitemap

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: ایجاد کنید next-sitemap.js فایل پیکربندی

پس از نصب بسته، مرحله بعدی ایجاد یک فایل پیکربندی به نام است next-sitemap.config.js در ریشه پروژه شما این فایل حاوی تنظیماتی برای ایجاد نقشه سایت شما خواهد بود.

در اینجا یک پیکربندی اولیه وجود دارد:

// next-sitemap.config.js
module.exports = {
siteUrl: process.env.SITE_URL || ‘http://localhost:3000’, // Your website’s URL
generateRobotsTxt: true, // (Optional) Generates a robots.txt file
sitemapSize: 7000, // Number of URLs per sitemap file
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در کد بالا، ما URL پایه سایت شما را با استفاده از آن مشخص می کنیم siteUrl. را generateRobotsTxt گزینه a ایجاد می کند robots.txt فایل در کنار نقشه سایت و sitemapSize تعداد URL هایی که باید در هر فایل نقشه سایت گنجانده شود را تعیین می کند.

مرحله 3: به روز رسانی package.json با اسکریپت نقشه سایت

اکنون، باید یک اسکریپت به خود اضافه کنید package.json هر زمان که پروژه خود را می سازید، فایلی را برای ایجاد نقشه سایت ایجاد کنید.

در اینجا نحوه انجام آن آمده است:

{
“scripts”: {
“build”: “next build”,
“postbuild”: “next-sitemap”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این اطمینان حاصل می کند که پس از هر ساخت، نقشه سایت به طور خودکار بر اساس پیکربندی شما تولید می شود.

مرحله 4: نقشه سایت را بسازید و ایجاد کنید

اکنون که همه چیز تنظیم شده است، دستور زیر را برای ساخت پروژه خود و تولید نقشه سایت اجرا کنید:

npm run build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یا با نخ:

yarn build

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از اتمام ساخت، الف sitemap.xml فایل (و به صورت اختیاری a robots.txt فایل) در ایجاد خواهد شد public/ پوشه پروژه شما این فایل‌ها حاوی تمام URL‌های برنامه Next.js شما هستند که برای خزیدن توسط موتورهای جستجو آماده هستند.

مثال: “Hello World” Next.js App with next-sitemap

برای نشان دادن چگونه next-sitemap کار می کند، بیایید یک برنامه Next.js ساده “Hello World” ایجاد کنیم. در اینجا یک صفحه اصلی Next.js وجود دارد:

// pages/index.js
export default function Home() {
return (
<div>
<h1>Hello World</h1>
<p>Welcome to my Next.js app!</p>
</div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، خود را پیکربندی کنید next-sitemap.config.js مانند این:

// next-sitemap.config.js
module.exports = {
siteUrl: process.env.SITE_URL || ‘http://localhost:3000’,
generateRobotsTxt: true,
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد، موارد زیر را به خود اضافه کنید package.json:

{
“scripts”: {
“build”: “next build”,
“postbuild”: “next-sitemap”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بعد از دویدن npm run build، نقشه سایت خود را در قسمت پیدا خواهید کرد public/ فهرست، حاوی URL صفحه اصلی “Hello World” شما.

نسخه نمایشی زنده

وب سایت من https://rajeshkumaryadav.com از این بسته برای تولید خودکار نقشه سایت در فرآیند ساخت استفاده می کند. در زیر robot.txt است که حاوی sitemap.xml است

https://rajeshkumaryadav.com/robots.txthttps://www.rajeshkumaryadav.com/sitemap.xmlhttps://www.rajeshkumaryadav.com/sitemap-0.xml

نتیجه گیری

با دنبال کردن مراحل ذکر شده در این راهنما، اکنون یکپارچه شده اید next-sitemap وارد پروژه Next.js خود شوید. این ابزار یک راه آسان برای تولید نقشه سایت و robots.txt فایل، که می تواند به طور قابل توجهی سئوی وب سایت شما را بهبود بخشد و اطمینان حاصل کند که موتورهای جستجو می توانند به طور موثر تمام محتوای شما را کشف کنند.

با این راه‌اندازی، به خوبی می‌توانید برنامه Next.js خود را برای موتورهای جستجو سازگارتر کنید و فهرست‌بندی بهتری داشته باشید!

npm install next-sitemap

yarn add next-sitemap

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

npm run build

yarn build

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to my Next.js app!</p>
    </div>
  );
}

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}