Next.jsでrobots.txtを動的に出力する

概要

開発環境を用意するときに、LAN内のみに閉じる環境を用意できればベストですが、費用等の関係でLANの環境が用意できない時もあると思います。開発環境も場合によってはパブリックに公開して、限られた人に共有することもあると思いますが、検索エンジンのクローラーに拾って欲しくはないです。その時、本番環境と開発環境でrobots.txtの内容を変える必要があるわけですが、Next.jsでどのように実現すれば良いのかということで一つの方法を紹介します。

対応案

Add sitemap.xml and robots.txt to Next.js app (SEO - 01)の記事にある通り、pages/robots.txt.tsx（もしくはjs）を作成してjsでrobots.txtの内容を出力できます。これに環境変数の判定を加えれば環境毎にrobots.txtの内容を変えられそうです。なおrobots.txtの詳細についてはrobots.txtの書き方が参考になります。

実装サンプル

jsで実装したサンプルを記載します。

pages/robots.txt.js

import React from "react";

const getRobots = () => {
  if (process.env.ROBOT_ALLOW === "true") {
    return `User-agent: *
Allow: /`;
  } else {
    return `User-agent: *
Disallow: /`;
  }
};

class Robots extends React.Component {
  static async getInitialProps({ res }) {
    res.setHeader("Content-Type", "text/plain");
    res.write(getRobots());
    res.end();
  }
}

export default Robots;