wado

wado

ブログの改良 (サイトマップの動的生成)

参考記事通りやっていこー。

pages/sitemap.xml.tsx を以下の内容で作成した。

import { GetServerSidePropsContext } from 'next';
import { getAllPostIds } from '../lib/posts'

export const getServerSideProps = async ({ res }: GetServerSidePropsContext) => {
  const xml = await generateSitemapXml();

  res.statusCode = 200;
  res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate'); // 24時間のキャッシュ
  res.setHeader('Content-Type', 'text/xml');
  res.end(xml);

  return {
    props: {},
  };
};

async function generateSitemapXml():Promise<string> {
  const appHost = "https://blog.wado.dev/";
  let xml = `<?xml version="1.0" encoding="UTF-8"?>\n`;
  xml += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;

  // site root
  xml += `
      <url>
        <loc>${appHost}</loc>
      </url>
    `
  
  // ここでurlを足していく
  const posts = getAllPostIds();
  posts.forEach(({ params: { id } }) => {
    xml += `
      <url>
        <loc>${appHost}posts/${id}</loc>
        <lastmod>${id.slice(0,-2)}</lastmod>
      </url>
    `
  })
  
  xml += `</urlset>`;
  return xml;
}

const Page = () => null;
export default Page;

とりあえずこんな感じで良いでしょう。マークダウンのメタ情報から取得するのもありだけど、これでいいや。

参考