Next.js 13: Tutorial Membuat Sitemap Dinamis untuk Website Anda

Mungkin Anda sudah mengetahui bahwa saya memiliki blog pribadi bernama Irsyad Notes. Karena ini adalah blog, saya berpikir untuk membuat sitemapnya juga. Ikuti saya dan pelajari cara mudah membuat sitemap dengan Next.js 13 untuk blog Anda sendiri nantinya.

¶Sitemap

Sitemap adalah file yang berisi daftar URL pada sebuah situs web. File ini memungkinkan mesin pencari untuk membaca dan mengindeks halaman-halaman situs secara lebih efisien. Dengan memiliki sitemap, Anda membantu mesin pencari seperti Google untuk lebih mudah menemukan, merayapi, dan menampilkan semua konten pada situs Anda dalam hasil pencarian.

Sitemap bisa berbentuk XML untuk mesin pencari, atau HTML untuk memudahkan pengguna manusia dalam menjelajahi struktur situs. Bagi mesin pencari, sitemap memberikan petunjuk tentang struktur dan konten situs, sementara bagi pengguna manusia, sitemap HTML membantu mereka menavigasi situs dengan lebih mudah.

Dalam konteks web development, membuat sitemap adalah langkah penting dalam optimasi mesin pencari (SEO) yang membantu meningkatkan peringkat situs dalam hasil pencarian.

¶Next.js 13

Dengan kemunculan Next.js 13, khususnya saat Anda menggunakan fitur appDir, proses pembuatan sitemap telah menjadi jauh lebih sederhana. Anda hanya perlu menambahkan satu file dalam folder app, dengan nama sitemap.js.

Atau jika Anda menggunakan TypeScript, Anda bisa dengan mudah membuat file tersebut sebagai sitemap.ts. Langkah ini membuka jalan untuk optimasi SEO yang lebih efisien, memungkinkan mesin pencari untuk merayapi situs Anda dengan lebih mudah.

export default function sitemap() {
    return [
        {
            url: 'https://irsyadnotes.com',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/about',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/articles',
            lastModified: new Date(),
        },
       ...
    ];
}

¶Route Dinamis

Seperti yang kita ketahui, bahwa saya di sini mempunyai route yang dinamis, yaitu route untuk setiap artikel yang saya punya. Untuk itu, ada beberapa perubahan yang perlu kita lakukan.

Pertama, sudah pasti saya punya function untuk mengambil semua artikel dari folder yang saya punya. Seperti misalnya pada saat ini, saya mempunyai article.ts yang mana tugasnya untuk mem-fetch semua artikel yang ada di folder ./src/app/articles. Untuk itu, saya akan buat function yang kurang lebih seperti:

export async function getAllArticles() {
    let articleFilenames = await glob('*/page.mdx', {
        cwd: './src/app/articles',
    });

    let articles = await Promise.all(articleFilenames.map(importArticle));

    return articles.sort((a, z) => +new Date(z.date) - +new Date(a.date));
}

Kemudian setelah itu, maka saya akan memanggil function ini tepat pada file sitemap.ts tadi. Namun, karena ini sifatnya promise, maka saya perlu merubah default export menjadi async. Dan berhubung saya menggunakan typescript, jadi saya juga perlu mendefinisikan props nya di sini seperti:

interface PropsArticle {
    slug: string;
    date: string;
}

Perlu di ketahui, bahwa kita akan mengikuti format dari sitemap yang telah ada seperti:

{
    url: 'https://irsyadnotes.com',
    lastModified: new Date(),
}

Oleh karena itu, di sini kita lakukan map yang itu bisa kita lakukan dengan cara:

...articles.map((article: PropsArticle) => ({
    url: `https://irsyadnotes.com/articles/${article.slug}`,
    lastModified: new Date(article.date),
})),

Untuk komplit nya, sekarang sitemap sudah akan seperti:

import { getAllArticles } from '@/lib/articles';

interface PropsArticle {
    slug: string;
    date: string;
}

export default async function sitemap() {
    const articles = await getAllArticles();
    return [
        {
            url: 'https://irsyadnotes.com',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/about',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/articles',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/projects',
            lastModified: new Date(),
        },
        {
            url: 'https://irsyadnotes.com/uses',
            lastModified: new Date(),
        },
        ...articles.map((article: PropsArticle) => ({
            url: `https://irsyadnotes.com/articles/${article.slug}`,
            lastModified: new Date(article.date),
        })),
    ];
}

Dengan begitu, maka nanti setelah project ini di build, kita akan mendapatkan file dengan format sitemap.xml, itu semua di lakukan Next.js behind the scene, sehingga kita tidak perlu melakukan apa-apa lagi.

¶Build

Buka terminal Anda dan silakan jalankan perintah berikut:

npm run build

Jika sudah selesai, atau memang tidak ada error. Harusnya sekarang bisa kita langsung mulai dengan menjalankan perintah:

npm run start

Dengan begitu, maka sekarang harusnya Anda bisa melihat outputnya tepat pada localhost:3000/sitemap.xml. Jika berhasil, ouput akan kurang lebih menjadi seperti:

<urlset>
    <url>
        <loc>https://irsyadnotes.com</loc>
        <lastmod>2023-08-24T15:05:06.764Z</lastmod>
    </url>
    ...
    <url>
        <loc>
            https://irsyadnotes.com/articles/completely-remove-laravel-herd-on-the-mac
        </loc>
        <lastmod>2023-07-31T00:00:00.000Z</lastmod>
    </url>
    <url>
        <loc>
            https://irsyadnotes.com/articles/integrating-openai-with-laravel
        </loc>
        <lastmod>2023-07-14T00:00:00.000Z</lastmod>
    </url>
</urlset>

Setelah itu, maka waktunya mendaftarkan sitemap ini dalam Google Search Console.

¶Kesimpulan

Next.js 13 telah membawa inovasi yang signifikan dalam memudahkan proses pengembangan web, terutama dalam pembuatan sitemap.

Dengan fitur-fitur baru yang intuitif dan fleksibel, seperti penggunaan appDir, Next.js 13 memungkinkan kita untuk menciptakan sitemap dengan lebih cepat dan efisien.

Hal ini tidak hanya menghemat waktu tetapi juga membantu dalam optimasi SEO. Semoga artikel ini bermanfaat, saya Irsyad dan sampai jumpa di Artikel selanjutnya.