Mastering Sitemaps: Why it is important in websites?

import type { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    // Fetch dynamic data for the sitemap : (Optional)
    const response = await fetch('https://your-api-url.com/sitemap-data', {
        next: { revalidate: 0 }
    });

    if (!response.ok) {
        console.error('Failed to fetch sitemap data');
        return [];
    }
    return [
        // Sitemap with alternative urls
        {
            url: 'http://localhost:3000',
            lastModified: new Date(),
            changeFrequency: 'daily',
            priority: 1,
            alternates: {
                languages: {
                    es: 'https://acme.com/es',
                    de: 'https://acme.com/de',
                },
            },
        },
        // Inage & video Sitemap Example
        {
            url: 'https://example.com',
            lastModified: new Date(),
            changeFrequency: 'weekly',
            priority: 0.5,
            images: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
            videos: [
                {
                    title: "Video Title",
                    description: "Video description providing details about the content.",
                    publication_date: new Date().toISOString(),
                    thumbnail_loc: "https://example.com/video.mp3",
                    uploader: {
                        content: "uploader@example.com",
                        info: "https://uploaderwebsite.com"
                    }
                }
            ]
        },
    ];
}

import { GetServerSidePropsContext } from "next";

type SitemapLocation = {
  url: string;
  changefreq?:
    | "always"
    | "hourly"
    | "daily"
    | "weekly"
    | "monthly"
    | "yearly"
    | "never";
  priority: number;
  lastmod?: Date;
  alternates?: { [language: string]: string };
  images?: string[];
  videos?: {
    title: string;
    description: string;
    publication_date: string;
    thumbnail_loc: string;
    uploader: {
      content: string;
      info: string;
    };
  }[];
};

// Default static routes
const defaultUrls: SitemapLocation[] = [
  {
    url: "/",
    changefreq: "daily",
    priority: 1,
    lastmod: new Date(),
    alternates: {
      es: "https://example.com/es",
      de: "https://example.com/de",
    },
    images: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
    videos: [
      {
        title: "Video Title",
        description: "Video description providing details about the content.",
        publication_date: new Date().toISOString(),
        thumbnail_loc: "https://example.com/video.jpg",
        uploader: {
          content: "uploader@example.com",
          info: "https://uploaderwebsite.com",
        },
      },
    ],
  },
];

const createSitemap = (locations: SitemapLocation[]) => {
  const siteUrl = "https://localhost:3000";
  const baseUrl = siteUrl.endsWith("/")
    ? siteUrl.slice(0, siteUrl.length - 1)
    : siteUrl;

  return `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml">
    ${locations
      .map((location) => {
        const encodedPath = location?.url
          .split("/")
          .map((i) => encodeURIComponent(i))
          .join("/");
        return `
        <url>
          <loc>${baseUrl}${encodedPath.endsWith("/") ? encodedPath : `${encodedPath}/`}</loc>
          <priority>${location.priority}</priority>
          ${location.lastmod ? `<lastmod>${location.lastmod.toISOString()}</lastmod>` : ""}
          ${location.changefreq ? `<changefreq>${location.changefreq}</changefreq>` : ""}
          ${
            location.alternates
              ? Object.entries(location.alternates)
                  .map(
                    ([lang, altUrl]) =>
                      `<xhtml:link rel="alternate" hreflang="${lang}" href="${altUrl}" />`
                  )
                  .join("\n")
              : ""
          }
          ${
            location.images
              ? location.images
                  .map((image) => `<image:image><image:loc>${image}</image:loc></image:image>`)
                  .join("\n")
              : ""
          }
          ${
            location.videos
              ? location.videos
                  .map(
                    (video) => `
                  <video:video>
                    <video:title>${video.title}</video:title>
                    <video:description>${video.description}</video:description>
                    <video:publication_date>${video.publication_date}</video:publication_date>
                    <video:thumbnail_loc>${video.thumbnail_loc}</video:thumbnail_loc>
                    <video:uploader info="${video.uploader.info}">${video.uploader.content}</video:uploader>
                  </video:video>`
                  )
                  .join("\n")
              : ""
          }
        </url>`;
      })
      .join("")}
  </urlset>`;
};

export default function SiteMap() {
  // getServerSideProps handles sitemap generation
}

export async function getServerSideProps({ res }: GetServerSidePropsContext) {
  // Fetch dynamic data (Optional)
  const dynamicUrls = await fetch("https://your-api-url.com/sitemap-data");


  // Transform dynamic data into SitemapLocation structure
  const dynamicLocations = dynamicUrls.map((route) => ({
    url: `${route.slug}`,
    priority: 0.5,
    lastmod: new Date(),
  }));

  // Combine default URLs with dynamic URLs
  const locations = [...defaultUrls, ...dynamicLocations];

  // Set response headers and serve XML
  res.setHeader("Content-Type", "text/xml");
  res.setHeader("Cache-Control", "stale-while-revalidate, s-maxage=60");
  res.end(createSitemap(locations));

  return {
    props: {}, // No props required
  };
}