Next.js（App Router）でrobots.txtを生成する（本番環境とプレビュー環境でrobots.txtを出しわける） 📝

まず、ドキュメントを読むとすべてが書いてあります。
書いてあるのですが、プレビュー環境と本番環境でrobots.txtを出し分けたかったので、色々検証してみました。

nextjs.org

まずは、ほぼほぼドキュメント通りの実装。

app/robots.ts

import { MetadataRoute } from 'next';

const url = 'https://kimizuka.fm';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/api/'
    },
    sitemap: `https:/${ url }/sitemap.xml`
  }
}

これで、https://kimizuka.fm/robots.txt に、

User-Agent: *
Allow: /
Disallow: /api/

Sitemap: https://kimizuka.fm/sitemap.xml

が、生成されます。

しかし、この方法だと、プレビュー環境にも本番同様のrobots.txtが生成されてしまいます。
そんなことは気にすることでもないのかもしれないですが、プレビュー環境は一応ボットを拒否したかったので、ちょっと修正してみました。

import { MetadataRoute } from 'next';

const url = process.env.NEXT_PUBLIC_BASE_URL || '';
const isProduction =
  process.env.NODE_ENV === 'production' &&
  process.env.VERCEL_ENV === 'production';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: isProduction ? '/' : undefined,
      disallow: isProduction ? '/api/' : '/'
    },
    sitemap: `${url}/sitemap.xml`
  };
}

こんな感じで、環境に応じてrobots.txtを出しわけることが可能になります。
urlは.envにNEXT_PUBLIC_BASE_URLとして定義しておく前提です。

これだと、本番環境のrobots.txtはそのままに、ローカルやプレビュー環境のrobots.txtを、

User-Agent: *
Disallow: /

Sitemap: http://localhost:3000/sitemap.xml

とすることができます。（ローカルの例）

余談

ちなみに、サイトマップも簡単に生成できます。

blog.kimizuka.org