Sitemap digunakan untuk memuat semua informasi link yang ada pada website. Fungsinya adalah untuk memudahkan Search Engine memetakan sebuah website.

Pada kesempatan kali ini saya akan membagikan cara membuat sitemap pada Next.js. Untuk memudahkan dalam pembuatan sitemap, kali ini saya akan menggunakan package next-sitemap.

Berikut ini adalah langkah-langkahnya

1. Install package

Langkah pertama silahkan install package next-sitemap menggunakan package manager favorit kalian

# NPM
npm install next-sitemap

# Yarn
yarn add next-sitemap

# PNPM
pnpm add next-sitemap

2. Membuat config file

Langkah kedua yaitu membuat config file dengan nama file next-sitemap.config.js di dalam project Next.js anda. Setelah config file dibuat silahkan tulis kode di bawah ini pada file tadi

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true,
}

Perhatikan bahwa sebelumnya anda harus mengatur SITE_URL pada .env file project untuk menyimpan url situs.

3. Update file package.json

Selanjutnya silahkan tambahkan script postbuild pada file package.json anda sehingga akan menjadi seperti di bawah ini

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

Script postbuild akan otomatis dijalankan setelah proses build selesai. Script ini digunakan untuk meng-generate otomatis file robots.txt dan sitemap.xml di dalam folder public project anda.

4. Terakhir, build project anda

Setelah langkah-langkah di atas diikuti dengan benar, maka dasar pembuatan sitemap untuk Next.js sudah selesai. Langkah terakhir adalah tinggal kita jalankan build pada project kita. Seperti biasanya saat kita mem-build sebuah project Next.js

# NPM
npm run build

# Yarn
yarn build

# PNPM
pnpm build

Setelah proses build selesai, maka pada folder public akan terdapat file baru bernama robots.txt dan sitemap.xml. Sehingga kita telah berhasil membuat sitemap untuk project Next.js kita. Sebagai tambahan, jika anda menggunakan git, sebaiknya masukkan file robots.txt dan sitemap.xml pada .gitignore anda.

5. (Opsional) Membuat server side index sitemap

Sampai langkah 4, sebenarnya kita sudah berhasil membuat sitemap. Namun informasi url yang terdapat pada sitemap hanya berupa halaman yang menggunakan static route. Jika kita ingin menambahkan informasi url untuk halaman yang menggunakan dynamic route, sebagai contoh kita ingin menambahkan informasi url untuk semua halaman blog maka dibutuhkan langkah tambahan.

Berikut ini adalah langkah-langkahnya

Buat page pages/server-sitemap-blog.xml/index.tsx dan isikan kode di bawah ini

// pages/server-sitemap-blog.xml/index.tsx
import { getServerSideSitemap, ISitemapField } from 'next-sitemap'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {
  let totalPage = 1;
  let fields: ISitemapField[] = [];

  const loadBlogPage = async (page: number = 1) => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/posts?page=${page}&limit=25`)
    const body = await res.json()
    totalPage = body.pagination.totalPage;
    body.data.forEach((post: Post) => {
      fields.push({
        loc: `${process.env.SITE_URL}/blog/${post.slug}`,
        lastmod: new Date(post.updatedAt).toISOString(),
        changefreq: "daily",
        priority: 0.6,
      })
    });
  }

  await loadBlogPage()

  if (totalPage > 1) {
    for (let i = 2; i <= totalPage; i++) {
      await loadBlogPage(i);
    }
  }

  return getServerSideSitemap(context, fields)
}


// Default export to prevent next.js errors
export default function ServerSitemapBlog() { }

Anda dapat mengubah proses pada function loadBlogPage sesuai kebutuhan anda. Pada intinya adalah tujuan akhir kita adalah untuk melakukan push pada variable fields berisi object dengan loc, lasmod, changefreq dan priority.

Terakhir untuk mengkustomisasi sitemap anda lebih jauh, silahkan baca dokumentasinya pada halaman package di https://github.com/iamvishnusankar/next-sitemap