Nuxt3でgenerate時にsitemapを動的に作る方法

たった2STEPです。

以下の英語のブログから必要なところのみ抜粋しています。
https://roe.dev/blog/creating-your-own-sitemap-module

STEP1

/modules/sitemap.tsを作成し以下のコードをコピペ。

※https://yourdomain.comのところは書き換えてください。
※モジュールが足りなくてエラーが出たら追加してください。

import { writeFile } from 'node:fs/promises'
import { gzipSync } from 'node:zlib'
import { defineNuxtModule, useNuxt } from '@nuxt/kit'
import { join } from 'pathe'
export default defineNuxtModule({
  meta: {
    name: 'sitemap',
  },
  setup() {
    const nuxt = useNuxt()
    nuxt.hook('nitro:init', nitro => {
      nitro.hooks.hook('close', async () => {
        const routes = nitro._prerenderedRoutes
          ?.filter(r => r.fileName?.endsWith('.html'))
          .map(r => r.route)
        if (!routes?.length) returnconst timestamp = new Date().toISOString()
        const sitemap = [
          `<?xml version="1.0" encoding="UTF-8"?>`,
          `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`,
          ...routes.map(
            route =>`<url><loc>https://yourdomain.com${route}</loc><lastmod>${timestamp}</lastmod></url>`
          ),
          `</urlset>`,
        ].join('')
        const dir = nitro.options.output.publicDirawait writeFile(join(dir, 'sitemap.xml'), sitemap)
        await writeFile(join(dir, 'sitemap.xml.gz'), gzipSync(sitemap))
      })
    })
  },
})

STEP2

nuxt.config.tsに以下の記述を追加

export default defineNuxtConfig({
  modules: ['~/modules/sitemap'],
})

以上です。