How to create a sitemap in Nextjs?

1 - Create a file ./scripts/generate-sitemap.js

import prettier from "prettier";
import { globby } from "globby";
import { writeFileSync } from "fs";

async function generate() {
  const prettierConfig = await prettier.resolveConfig("./.prettierrc.js");

  const pages = await globby([
    "pages/*.tsx",
    "!pages/_*.tsx",
    "!pages/api",
    "!pages/404.tsx",
  ]);

  const blogPosts = await globby(["contents/blog/**/index.mdx"]);

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${pages
          .map((page) => {
            const path = page
              .replace("pages", "")
              .replace("data", "")
              .replace(".tsx", "")
              .replace(".mdx", "");

            const route = path === "/index" ? "" : path;

            return `
              <url>
                  <loc>${`https://selahattinunlu.com${route}`}</loc>
              </url>
            `;
          })
          .join("")}

          ${blogPosts
            .map((post) => {
              const path = post
                .replace("contents/blog/", "")
                .replace("/index.mdx", "");

              return `
              <url>
                  <loc>${`https://selahattinunlu.com/blog/${path}`}</loc>
              </url>
            `;
            })
            .join("")}
    </urlset>
    `;

  const formatted = prettier.format(sitemap, {
    ...prettierConfig,
    parser: "html",
  });

  // eslint-disable-next-line no-sync
  writeFileSync("public/sitemap.xml", formatted);
}

generate();

2 - update package.json

{
  "scripts": {
    "build": "next build",
    "postbuild": "npm run generate-sitemap",
    "generate-sitemap": "npx node ./scripts/generate-sitemap.mjs"
  }
}

3 - add robots.txt in public

User-agent: *
Allow: /
Disallow: /api

Sitemap: https://selahattinunlu.com/sitemap.xml

Useful Links