【Next.js】faviconを本番環境と開発環境で出し分ける。

やりたいこと

サイトのfaviconを本番環境では「💫」開発環境では「🚧」(ローカル環境)のように出し分けたい。

これでぱっと見でどの環境か区別することができるようになる。

⑴ faviconを準備する

publicフォルダ内にprod.svgdev.svgの2つのファイルを作成します。

  • 本番環境の「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>
  • 開発(ローカル)環境の「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>

⑵ faviconの表示設定をする

faviconは<Head>内に<link rel="icon" href="[faviconにしたい画像]">を追加することで表示することができます。

今回は出し分けをしたいのでprocess.env.FAVICON_URLを指定して、環境ごとにこのprocess.env.FAVICON_URLが変わる処理を行なっていきます。

import React from 'react';
import Head from "next/head";


export default function Layout({ children }) {
    return (
        <div>
            <Head>
                <title>サイトタイトル</title>
                <link rel="icon" href={process.env.FAVICON_URL} />  // faviconの指定
            </Head>
            <div>
                { children }
            </div>
        </div>
    );
};

⑶ 本番環境か開発環境か区別する

環境変数を設定する

.envファイルにNODE_ENV=developmentを追加します。

これで開発環境の場合に、環境変数”NODE_ENV”は「development」になります。

NODE_ENV=development

(※本番環境のNODE_ENVにはproductionなどを入れましょう。)

環境変数によってfaviconのファイルを出し分ける

next.config.jsファイルで、環境変数NODE_ENVによって異なるFAVICON_URLに指定する処理を追加します。

module.exports = {
    env: {
        // 環境変数(.env)のNODE_ENVに応じて、FAVICON_URLを出し分け
        FAVICON_URL: process.env.NODE_ENV === `development` ? `dev.svg` : `prod.svg`,
    }
}

完成

これで開いているページが本番環境か開発環境か調べるために毎回URLを確認する、みたいな手間が省けます。

コメントを残す

*