Zenn
🚧

faviconを開発環境と本番環境で視覚的に区別する方法

2021/05/14に公開
HTML
Next.js
SVG
tech

初めての技術記事になります！よろしくお願いいたします🙇‍♂️

皆さんは開発環境と本番環境をどうやって区別していますか？
自分が普段行っている、ファビコンを切り替えることによって視覚的に環境を区別するTipsを共有します！

やり方

難しいことは何もしていなくて、ただprocess.env.NODE_ENVによって切り替えているだけです。

ただ、これで終わってしまうのも味気ないので、自分が普段使っているNext.jsプロジェクトでどのようにfaviconを切り替えているかを共有します！
手順は以下になります。

  1. 開発環境、本番環境のfaviconを用意
  2. next.config.jsに条件分岐文を記述
  3. _document.tsxにhrefを指定

1.開発環境、本番環境のfaviconを用意

自分は全てのプロジェクトの開発環境は 🚧 で固定するようにしています。毎度同じ絵文字を開発環境に指定することで、faviconを見た時に特に考えることもなく「これは開発環境だな」と理解する事ができるためです。

絵文字をfaviconにする方法は先日catnoseさんが素晴らしい解説記事を共有してくれているのでそちらでご確認ください。

https://zenn.dev/catnose99/articles/3d2f439e8ed161

今回はhrefに直接svgを記述する方法ではなく、それぞれsvgファイルを用意することにします。
publicディレクトリで以下の2つのファイルを作成します。

dev.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text x="50%" y="50%" style="dominant-baseline:central;text-anchor:middle;font-size:90px;">🚧</text>
</svg>
prod.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text x="50%" y="50%" style="dominant-baseline:central;text-anchor:middle;font-size:90px;">🚀</text>
</svg>

コードは上の記事から拝借しました。2つのファイルは絵文字が違っているだけです。

2.next.config.jsに条件分岐文を記述

next.config.jsに以下の記述を追加します。

next.config.js
module.exports = {
    env: {
        FAVICON_URL: process.env.NODE_ENV === `development` ? `dev.svg` : `prod.svg`,
    }
}

process.env.NODE_ENVがdevelopmentだった場合はdev.svgを、それ以外であればprod.svgを指定するようにしています。
この記述をすることで開発環境の時はdev.svgを、本番環境の時はprod.svgを参照してfaviconが環境によって変わるようになりました。

3. _document.tsxにhrefを指定

Next.jsのPageコンポーネントを拡張したいので、_document.tsxに全ページ共通のmeta情報などを書き込みます。

class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx)
    return initialProps
  }
  render(): JSX.Element {
    return (
      <Html lang="ja">
        <title>環境によってfaviconを変える</title>
        <Head>
+         <link rel="icon" href={process.env.FAVICON_URL} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
export default MyDocument

たったこれだけの手順で開発環境と本番環境でfaviconを自由に切り替える事ができました。これで開発環境と勘違いして本番環境と睨めっこして10分近く無駄にしてしまう、みたいなことはなくなりますね！
皆さんは開発環境と本番環境、どうやって区別していますか？共有していただけると嬉しいです！

以上、faviconを開発環境と本番環境で視覚的に切り替える方法でした。最後まで閲覧いただきありがとうございました。

Discussion