Next.jsで手っ取り早くsitemap.xmlを生成するAPIを用意する

Next.jsで作ったwebサイトを検索エンジンにインデックスさせる。
ここでは、SSGするためのデータソースからsitemap.xmlを作ってしまう方法を書く。

sitemap.xmlを生成して返すAPI

sitemaps.orgを確認してフォーマットを確認してほしい。
Next.jsでAPIを用意する方法はいくつかあるが自由に読み替えて使えるとおもう。

sitemap.xmlを生成する

// Example
type post = {
  date: number
  slug: string 
}

const generateSitemap = (posts: post[], location: string): string => {
  let xml: string = "";

  posts.map(post => {
    // YYYY-MM-DD
    const postDate: string = new Date(date).toISOString().split('T')[0];
    const projectURL = location + post.slug;

    xml += `<url>
        <loc>${projectURL}</loc>
        <lastmod>${postDate}</lastmod>
        <priority>0.50</priority>
      </url>`;
  });

  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${xml}
    </urlset>`;
};

Next.jsのAPIを使いたい場合

{project}/pages/api/sitemap.ts

import { NextApiRequest, NextApiResponse } from 'next';
export default async (req: NextApiRequest, res: NextApiResponse) => {
  // Replace your code
  const location = "https://{domain}/"
  const posts = await getPosts()
  const sitemap: string = generateSitemap(posts, location)
  res.setHeader('content-type', 'application/xml');
  res.write(sitemap);
  res.end();
}

http://{domain}/api/sitemapにGETリクエストでsitemapを生成して返すapiが出来る。

Next.jsのgetServerSidePropsを使いたい場合

getServerSidePropsはサーバーサイドで実行されるので、こっちでもok。
Next.jsで生成した記事だけインデックスさせたいとかならこっちの方がよいかも。

{project}/pages/{dir}/sitemap.ts

import { GetServerSideProps } from 'next'
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  // Replace your code
  const location = "https://{domin}/{dir}/"
  const posts = await getPosts()
  const sitemap: string = generateSitemap(posts, location)
  res.setHeader('content-type', 'application/xml');
  res.write(sitemap);
  res.end();

  return { props: {} }
}

const sitemap = () => null
export default sitemap

http://{domain}/blog/sitemapにGETリクエストでsitemapを生成して返すapiが出来る。

Google Serch Consoleからsitemapを追加する

Google Serch Consoleの管理画面から追加する。sitemap.xmlが正しければ、URLを検出してインデックスされるはず。

おまけ robots.txtを書いて配置する

robots.txtは、Googlebotなどのクローラーに対して、クロールの制御をするためのファイル。sitemap.xmlのパスを記述することで、適切にクロールしてもらえる。

name	概要
Sitemap	sitemap.xmlの絶対パスを書く
User-agent	制御したいクローラーの名前を入れる。全てokなら*
Allow	クロールを許可するディレクトリ
DisAllow	クロールを許可しないディレクトリ

記述例

Sitemap: http://{domain}/api/sitemap
User-agent: *
Allow: /*
Disallow: /api/*

参考

Create a robots.txt file
sitemaps.org
Sitemap with Next.js

今回は手っ取り早くsitemapを作ったが、dynamic routesから生成も出来そう。
Generate sitemap for static site with dynamic routes · Discussion #12403 · vercel/next.js