Next.jsでfaviconを表示させる方法

前置き

どうも！文系就活生大体ポートフォリオ作りがち。グッピーです！

今回はnext.jsでfaviconをどうやって表示させるかについて書いていきます！

faviconとは

webページのタブ表示やブックマークしたときにwebページ名の横に並ぶ小さなアイコンのことです！
faviconってそのことだったんだ・・と知らなかったのはここだけの秘密です。

next.jsでfaviconを表示させる方法

1:faviconをpublic/staticフォルダに追加

publicフォルダの中にstaticというファイルを作り、その中に画像を入れましょう。形式はicoかpngが望ましいでしょう。

2:pagesに_app.jsを追加。

NExt.jsではpages/_app.jsが全体設定のためのインターフェースとして用意されています。詳しくは各々で調べて欲しいのですが、今回はこちらのページに記載していきます。

3:_app.jsにコードを追加

以下のコードを追加していきます。必要なコードは適宜皆さんで追加していってください！

import 'style/styles.css'
import Head from "next/head"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <>
    <Head>
      <link rel="shortcut icon" href="/static/favicon.ico"/>
    </Head>
    </>
  )
}

そして、npm run devを押してページを開くと、faviconが表示されています！！
なっていない方は、以下のサイトなどが参考になったので、よかったら見てください！！

参考にしたwebサイト

まとめ

はい！今回はNext.jsでどのようにfaviconを表示させるかを書いていきました。
参考になったら幸いです！最後まで見てくださった方がいましたらLGTMだけお願いします！！励みになります！！

余談なのですが、ポートフォリオって皆さんどう思いますか？？
転職にポートフォリオが必要となっているのはプログラミングスクールの陰謀という話を師匠から聞いて戦慄しています。
またこんどその話も書いていきたいと思うので、よかったら見てください！！