事象
開発環境と本番環境を区別して構築しているにもかかわらず、Googleなどの検索エンジンに開発環境のURLが意図せず表示されてしまう問題が発生しました。この状況は、開発中の機能が外部に不用意に公開されることやセキュリティ上の問題を引き起こすリスクを持ちます。原因としては、Webクローラーが開発環境のURLを誤ってインデックスしてしまっていることが挙げられます。ここでは、Next.js（Pages Router）を使用したプロジェクトでこの問題に対処する方法をご紹介します。
対処法（実装）
サイトページのheadタグ内にnoindexメタタグを設定することで、ウェブクローラにインデックス登録されないよう指示することができます。以下は、Next.jsの_app.tsxファイルでの実装例です。ここでは、環境変数FRONTEND_ENDPOINTを用いて開発環境かどうかを判断し、開発環境の場合にのみnoindexを追加します。環境変数FRONTEND_ENDPOINTは、開発環境では開発用のドメインを、本番環境では本番用のドメインを含むように設定しております。
import type { AppProps } from 'next/app';
import Head from 'next/head';
const basePath = process.env.FRONTEND_ENDPOINT;
export default function MyApp({ Component, pageProps }: AppProps) {
const isDevEnvironment = basePath?.includes("dev");
return (
<>
<Head>
{isDevEnvironment && <meta name="robots" content="noindex" />}
</Head>
<Component {...pageProps} />
</>
);
}
対処法（Google Search Consoleの使用）
実装をデプロイした後、GoogleによるドメインのクロールをリクエストするためにGoogle Search Consoleを開いてドメインを入力します。そのあとご利用のドメイン名プロバイダにログインし、発行されるTXTレコードをDNS設定に追加します。
Google Search Consoleにログインし、検査結果ページでデータが反映されたら[インデックス登録をリクエスト]をクリックします。そのあとGoogleの検索窓にsite:https://あなたのドメイン名と入力して検索し、開発環境のURLが検索結果に表示されなければOKです。私の場合、変更がクローリングされて反映されるまで3~4週間はかかりました。
参照
自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！