ブログ
2023.01.07

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

Nuxt3でJamstackなサイトを作っている時に動的なページも含めてsitemap.xmlを作りたいと思ったのですが、ググってもなかなか出てこなかったので記事にしておきます。

たった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'],
})


以上です。

ブログの執筆者

toshiya
workTechnical Director
フロントエンドクラブの代表です。広告業界でテクニカルディレクターをしてます。プログラミングとプランニングがちょっとできます。広告とサッカーが好きです。

その他の記事

  1. 2023.09.22
    新興のJavaScriptフレームワークNueとは?公式サイトざっくりまとめ
  2. 2023.09.20
    テクニカルディレクターとは?現役テクニカルディレクターが解説
  3. 2023.09.16
    netlify formで送信後に404になる
  4. 2023.03.27
    GitHubにRSA SSHでgit push、git fetch、git pullをしようとするとエラーになる問題の解決方法
  5. 2023.02.25
    Astroでサブフォルダにbuildする方法
  6. 2023.02.19
    Astroでプロジェクトルートを基準にコンポーネントなどのパスを記述する方法
  7. 2023.02.19
    Astroでstylusファイルからglobalスタイルをimportする方法
  8. 2023.02.12
    「web制作におけるパスの書き方」絶対パス・ルート相対パス・相対パスの違いについて
  9. 2023.01.09
    フロントエンドクラブの新しい企みについて
  10. 2022.12.30
    なぜフロントエンドエンジニア向けコミュニティ「フロントエンドクラブ」を始めたのか
  11. 2022.12.28
    よく使うGitコマンド
  12. 2022.11.04
    HeadlessCMSを使った3つのサイト構築手法
  13. 2022.11.22
    WEB制作会社でエンジニアとして働くために必要なスキルについて
  14. 2022.10.27
    現役エンジニアから見るリアルなHeadlessCMS
一覧へ戻る