🗺Cara Mudah Buat Sitemap di Next.js 13 dengan next-sitemap

Halo teman-teman dev, lagi bingung buat sitemap di next.js ya? selamat karena telah menemukan web yang tepat.

Sitemap merupakan file yang berisi struktur halaman-halaman yang ada di sebuah situs web. File sitemap biasanya ditulis dalam format XML dan digunakan untuk memberikan informasi kepada mesin pencari tentang struktur dan hierarki sebuah situs web.

Tujuan utama dari sitemap adalah membantu mesin pencari (seperti Google, Bing, atau Yahoo) untuk mengindeks situs web dengan lebih efisien, terutama untuk pengoptimalan mesin pencari (SEO).

Dengan menggunakan sitemap, mesin pencari dapat lebih mudah menemukan dan memahami halaman-halaman yang ada di situs, termasuk halaman-halaman yang mungkin sulit dijangkau oleh proses pengindeksan biasa.

Di artikel ini, saya akan sharing cara membuat sitemap pada project Next.js, bahan yang diperlukan sebagai berikut:

• Project Next.js
• Library Next-sitemap

Disini saya tidak akan menjelaskan bagaimana setup project Next.js dan saya anggap teman-teman sudah mempunyai project Next.js. Oke, kalau begitu kita ke TKP.

Install Library Next-sitemap

Langkah pertama adalah install library Next-sitemap, dengan library ini, kita dapat dengan mudah men generate sitemap ke project Next.js ketika proses Build.

Library ini bisa diinstall menggunakan package manager npm, yarn atau pnpm:

npm i next-sitemap

yarn add next-sitemap

pnpm add next-sitemap

Buat File Next Sitemap

Buat file konfigurasi next-sitemap di direktori root project Next.js dengan nama **next-sitemap.config.js**

Setelah itu, isi file dengan baris kode berikut ini:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
    siteUrl: "https://www.ferryops.dev",
    generateRobotsTxt: true, // (optional)
    // ...other options
  };

Ganti value siteUrl dengan url project Anda dan pada value lainnya biarkan default.

Konfigurasi Script package.json

Selanjutnya kita konfigurasi script package.json, agar ketika proses build project, file konfigurasi sitemap juga ikut dijalankan secara otomatis.

Tambahkan baris postbuild dibawah baris build, seperti contoh dibawah ini:

"build": "next build",
"postbuild": "next-sitemap --config next-sitemap.config.js",

Selesai, ketika project di build, misal dengan perintah

npm run build

Sitemap juga akan tergenerate secara otomatis dan akan terus terupdate ketika project di build ulang.

File sitemap bisa dilihat di direktori public.

Sekian tutorial singkat Cara Buat Sitemap di Next.js 13 dengan next-sitemap, semoga bermanfaat. Jangan lupa tinggalkan jejak.

Lampiran