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

2022/6/25

2022/7/3

やりたいこと
⑴ faviconを準備する
⑵ faviconの表示設定をする
⑶ 本番環境か開発環境か区別する
- 環境変数を設定する
- 環境変数によってfaviconのファイルを出し分ける
完成

やりたいこと

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

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

⑴ faviconを準備する

publicフォルダ内にprod.svgとdev.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`,
    }
}