2020-12-26

Next.jsでSSGを使用してsitemap.xmlを生成する

Next.js

Javascript

SSGを適用したNext.jsで,sitemap.xmlを生成する方法を紹介します.
こちらのブログはNext.jsで作成しており,sitemap.xmlを生成しています.具体的なコードを見たい方は,こちらのリポジトリを参考にしてください.
https://github.com/kawa1214/micro-cms-nextjs-blog-boiler-template

NextjsでSSGを適用する

Next.jsではgetStaticPropsを用いることで,静的なファイルを事前に生成することができます.
./pages/blogs/[id].tsx

export const getStaticProps: GetStaticProps = async context => {  
  const id = context.params.id;
  const key = {
    headers: { 'X-API-KEY': process.env.API_KEY },
  }

  const res = await fetch(process.env.ENDPOINT + '/blogs/' + id, key)
  const blog: BlogType  = await res.json()

  return {
    props: {
      blog: blog,
    },
  }
}


yarn buildをすることで,ローカルであれば,.next/server/pages/*/.htmlにVercelであれば.next/serverless/pages/*/*.html以下にファイルが出力されます.

sitemap.xmlを生成する

sitemap.xmlを生成するための,コードを書きます.
globbyを用いて,指定したフォルダ以下のファイルを取得しています.
今回は,ローカルとサーバ上で実行したに生成された静的なファイルのタイトルを取得しています.next.jsの仕様上,こちらがURLになります.
例えば,.next/server/pages/blogs/page1.htmlが生成された場合のURLはhttps://example.com/blogs/page1になります.
utils/generateSiteMap.js

const fs = require('fs')
const globby = require('globby')

async function generateSiteMap() {
  const pages = await globby([
    '.next/server/pages/**/*.html',
    '.next/serverless/pages/**/*.html'
  ])

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">   
      ${pages
        .map(page => {
          const path = page
            .replace('/index', '')
            .replace('.next/serverless/pages', '')
            .replace('.next/server/pages', '')
            .replace('.html', '')
          return `
      <url>
        <loc>${`https://kawa.dev${path}`}</loc>
      </url>
              `
        })
        .join('')}
  </urlset>
  `

  fs.writeFileSync('public/sitemap.xml', sitemap)
}

generateSiteMap()

package.jsonのスクリプトを編集する

これで,site.mapを生成するコードの準備は完了しました.
最後に,先程書いたgenerateSiteMap関数を実行するために,package.jsonのスクリプトを編集します.
next build後に実行したいため,以下のように書き換えます.

"scripts": {
  "build": "next build && node utils/generateSiteMap.js",
},

yarn buildを実行すると,./public/sitemap.xmlが生成されます.