2020.09.01

【Next.js】microCMSからデータを取得してSitemap用のAPIを作成する

Next.js + microCMS を使った Google Search Console 用のサイトマップの作成方法です。

api/sitemap.tsx に処理を書く

sitemap.tsx

import { NextApiRequest, NextApiResponse } from "next"

type post = {
  id: string,
  publishedAt: string,
}

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

  posts.map(post => {
    // YYYY-MM-DD
    const postDate: string = new Date(post.publishedAt)
      .toISOString()
      .split("T")[0]
    const postUrl = location + post.id

    xml += `<url>
          <loc>${postUrl}</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>`
}

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const content = await fetch(`https://xxxxx.microcms.io/api/v1/post`, {
    headers: { "X-API-KEY": process.env.NEXT_PUBLIC_API_KEY || "" },
  })
    .then(res => res.json())
    .catch(error => null)

  if (!content) {
    return res.status(401).json({ message: "Invalid slug" })
  }

  const location = "https://xxxxx.com/post/"
  const sitemap: string = generateSitemap(content.contents, location)

  res.statusCode = 200
  res.setHeader("Content-Type", "text/xml; charset=utf-8")
  res.end(sitemap)
}

API からデータを取得してサイトマップ用にタグを生成するという流れです。これで sitemap.tsx にアクセスするとサイトマップが表示されます。

Google Search Console に登録する

↑ このように成功となれば OK です。

robots.txt も作っておこう

robots.txt はクローラーに適切にクローリングしてもらうためのものです。

robots.txt

Sitemap: http://xxxxx.com/api/sitemap
User-agent: *
Allow: /*
Disallow: /api/*

ルートドメインに置きましょう。

参考記事

Follow @ru88s