Cara Memasang dan Menggunakan `next-sitemap` dalam Apl Next.js: Panduan Langkah demi Langkah

Jika anda membina tapak web dengan Next.js, anda mungkin mahu enjin carian menemui dan mengindeks halaman anda dengan cekap. Satu cara untuk menambah baik proses ini ialah dengan mencipta peta laman. Peta laman ialah fail yang menyenaraikan semua URL di tapak web anda, membantu enjin carian seperti Google merangkak dan mengindeks tapak anda dengan lebih pantas.

Dalam panduan ini, kami akan membincangkan cara memasang dan mengkonfigurasi peta tapak seterusnya dalam projek Next.js. Kami juga akan merangkumi faedah memiliki peta laman dan menyertakan kod sampel dengan apl Next.js "Hello World" untuk menggambarkan cara ia berfungsi.

Faedah Menggunakan next-sitemap

Sebelum kita menyelami proses pemasangan, mari kita bincangkan secara ringkas faedah utama menggunakan peta tapak seterusnya:

1. SEO yang dipertingkatkan: Peta laman yang tersusun dengan baik membantu enjin carian seperti Google menemui halaman anda dengan lebih cekap, yang membawa kepada pengindeksan yang lebih baik dan kedudukan carian yang berpotensi lebih tinggi.

2. Merangkak Lebih Pantas: Dengan menyediakan enjin carian dengan peta jalan tapak web anda, anda membenarkan mereka merangkak dan mengindeks halaman anda dengan lebih pantas.

3. Mengendalikan Laluan Dinamik: Untuk tapak web dengan laluan dinamik, peta tapak seterusnya memudahkan untuk menjana URL untuk kandungan dinamik, memastikan semua halaman anda boleh ditemui.

4. Peta Laman Tersuai: peta laman seterusnya membolehkan anda menyesuaikan peta laman anda dengan pilihan seperti menetapkan keutamaan, menukar kekerapan dan juga mengecualikan halaman tertentu.

Langkah 1: Pasang peta tapak seterusnya

Untuk bermula, anda perlu memasang pakej peta laman seterusnya dalam projek Next.js anda. Jalankan arahan berikut dalam terminal anda:

npm install next-sitemap

Atau, jika anda menggunakan Benang:

yarn add next-sitemap

Langkah 2: Buat Fail Konfigurasi next-sitemap.js

Selepas memasang pakej, langkah seterusnya ialah mencipta fail konfigurasi bernama next-sitemap.config.js pada akar projek anda. Fail ini akan mengandungi tetapan untuk menjana peta laman anda.

Berikut ialah konfigurasi asas:

// 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
}

Dalam kod di atas, kami menyatakan URL asas untuk tapak anda menggunakan siteUrl. Pilihan generateRobotsTxt menjana fail robots.txt bersama peta laman dan SitemapSize menentukan bilangan URL untuk disertakan dalam setiap fail peta laman.

Langkah 3: Kemas kini package.json dengan Skrip Peta Laman

Sekarang, anda perlu menambah skrip pada fail package.json anda untuk menjana peta laman setiap kali anda membina projek anda.

Begini cara melakukannya:

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

Ini akan memastikan bahawa selepas setiap binaan, peta tapak dijana secara automatik berdasarkan konfigurasi anda.

Langkah 4: Bina dan Jana Peta Laman

Sekarang semuanya telah disediakan, jalankan arahan berikut untuk membina projek anda dan menjana peta laman web:

npm run build

Atau dengan Benang:

yarn build

Selepas binaan selesai, fail sitemap.xml (dan secara pilihan fail robots.txt) akan dijana dalam folder awam/ projek anda. Fail ini akan mengandungi semua URL apl Next.js anda, sedia untuk dirangkak oleh enjin carian.

Contoh: Apl Next.js "Hello World" dengan peta tapak seterusnya

Untuk menunjukkan cara peta tapak seterusnya berfungsi, mari buat apl Next.js "Hello World" yang mudah. Berikut ialah halaman Next.js asas:

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

Sekarang, konfigurasikan peta laman seterusnya.config.js anda seperti ini:

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

Seterusnya, tambahkan yang berikut pada package.json anda:

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

Selepas menjalankan binaan npm run, anda akan menemui peta laman anda dalam direktori awam/, yang mengandungi URL untuk halaman utama "Hello World" anda.

Demo Langsung

Tapak web saya https://rajeshkumaryadav.com menggunakan pakej ini untuk menjana secara automatik peta laman semasa proses binaan. Di bawah ialah robot.txt yang mengandungi sitemap.xml

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

Kesimpulan

Dengan mengikut langkah yang digariskan dalam panduan ini, anda kini telah menyepadukan peta tapak seterusnya ke dalam projek Next.js anda. Alat ini menyediakan cara mudah untuk menjana peta laman dan fail robots.txt, yang boleh meningkatkan SEO tapak web anda dengan ketara dan memastikan enjin carian dapat menemui semua kandungan anda dengan cekap.

Dengan persediaan ini, anda sedang dalam perjalanan untuk menjadikan apl Next.js anda lebih mesra enjin carian dan diindeks dengan lebih baik!

Atas ialah kandungan terperinci Cara Memasang dan Menggunakan `next-sitemap` dalam Apl Next.js: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!