【Nuxt3】sitemap.xmlを自動生成する方法

投稿日

2022/10/05

- 技術
- 個人開発
- Nuxt.js

概要

この記事ではNuxt3で構築した私のポートフォリオサイトにsitemap.xmlを自動生成する機能を実装したので、その方法をまとめます。
Nuxtでは「@nuxtjs/sitemap」などでsitemap.xmlを生成できますが、Nuxt3やSSRに対応しているものがなかったので、今回機能を自作しました。
Nuxtのバージョンは「3.0.0-rc.10」となります。

実装方法

Nuxtでは「/server」ディレクトリ配下にファイルを作成するとAPIを簡単に制作することができます。
今回はこの機能を使うため、まず「/server/routes」に「sitemap.xml.ts」を作成します。
通常、「/server/api」内のファイルには自動的に「/api」というプレフィックスを付けてルーティングが行われます。
プレフィックスが「/api」ではないサーバールートを追加する場合は、代わりに「/server/routes」ディレクトリに置くことができます。
このようにすることで「/sitemap.xml」でアクセスした時に「/server/routes/sitemap.xml.ts」の処理結果が返却されるようになります。

あとは「sitemap.xml.ts」にサイトマップの内容を出力する処理を記述すれば完了となります。

export default defineEventHandler(async (event) => {
  const sitemapInfos: {
    loc: string;
    lastmod: string;
    priority: string;
  }[] = [
    {
      loc: 'https://sample.com/',
      lastmod: '2022-10-05T18:35:28+09:00',
      priority: '1.00',
    },
  ];

  let sitemapString = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  `;

  for (let i = 0, iLength = sitemapInfos.length; i < iLength; i = (i + 1) | 0) {
    const sitemapInfo = sitemapInfos[i];
    sitemapString += `
      <url>
        <loc>${sitemapInfo.loc}</loc>
        <lastmod>${sitemapInfo.lastmod}</lastmod>
        <priority>${sitemapInfo.priority}</priority>
      </url>
    `;
  }

  sitemapString += `</urlset>`;

  event.res.setHeader('content-type', 'text/xml');
  event.res.end(sitemapString);
});

基本的にxmlの内容を文字列として作成した後にそれを返却しています。
ポイントとしては、「event.res.setHeader」でレスポンスヘッダーを設定した後に「event.res.end」でxmlを返却しています。
ソースの詳細はGitHubにあるので参考にしていただければ幸いです。