Next.js2023/02/052023/02/09はじめにnext.jsにsitemap.xmlを導入する方法を紹介します。microCMSのupdateAtの値を使用して、記事を更新したことをsitemap.xmlに反映できるようにします。3.1.49Next-sitemapをインストールnext-sitemapだけで作成する場合は、以下の記事が参考になります。生成しようしかし、updateAtなどを使用して記事の更新日に合わせたsitemap.xmlを作成できないためSEO対策としては、少し手を加えたいところです。一部は使用すると簡単に実装できるのでインストールします。配下にsitemap.xml.tsxを作成します.envファイルから「NEXT_PUBLIC_SITE_DOMAIN」を読み込んでます。microCMSのAPIのblogsエンドポイントの値を取ってくる。Sitemap;microCMSのAPIにはデフォルトでupdateAtが格納されるのでそれを元にurlを追加していきます。詳しいmicroCMSのデータの取り方や登録の仕方は、私が別の記事で紹介してますのでそちらを参考にしていただければ幸いです。開発環境(例えば、localhost:3000/sitemap.xml)でも本番環境(https://example.com/sitemap.xml)にアクセスすると以下のようなxmlが表示されていればOKです。配下に追加してください。example.comのところは作成したサービスのドメイン名を記入してください。https://example.com/sitemap.xmlまた、自力で作成してもいいですが、先ほどインストールしたnext-sitemapでbuildすると自動で作成することもできます。その場合は、最初にnext-sitemap.jsを作成します。配下に自動で作成されます。sitemap.xmlとsitemap-0.xmlが作成されますが、こちらは競合してしまうので削除しておきます。以上でsitemapの作成は完了です。連合学習の研究をしています。資格や技術で勉強したことについてアウトプットしたいと思います。