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.
Top comments (0)