【Next.js】faviconを本番環境と開発環境で出し分ける。
2022/6/25
2022/7/3
やりたいこと
サイトの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`,
}
}
完成
これで開いているページが本番環境か開発環境か調べるために毎回URLを確認する、みたいな手間が省けます。
最近の記事
音楽生成AI「Suno」の使い方まとめ!作詞作曲が簡単にできる?
簡単に曲が作れるAIということでよく聞く「Suno(Chirp)」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ|GPT・DALL·E・Whisperなど
Open AIのAPI(一部)の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI(Upload file)で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。(Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12