[解決済み] Next.jsの静的サイトにファビコンを追加する方法は？
2022-02-09 16:32:21
質問内容
Next.jsの静的サイトにファビコンを追加しようとしているのですが、うまくいきません。
のコンポーネントでドキュメントをカスタマイズしてみました。
'next/document'
https://nextjs.org/docs/#custom-document
favicon.ico ファイルへの直接リンクは、ファイルがビルドに含まれていないため機能せず、href は更新されず
/_next/static/...
画像をインポートしてリンクの href に追加してもうまくいきません (コメントアウトされた行を参照)。
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
{/* <link rel="shortcut icon" href={favicon} /> */}
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
ファビコンリンクは追加されましたが、表示されません。
ファイルをインポートすると、うまくいくと思うのですが、単に
<link rel="shortcut icon" href="[object Object]">
のリンクが表示されます。
まだやっている人はいますか？
解決方法は？
-
を作成します。
/staticフォルダをプロジェクトルートに作成します。これは、静的エクスポートフォルダに追加されます。 -
ファビコンファイルを
/staticフォルダーに格納します。 -
追加
_document.jsに/pages/フォルダを ドキュメント (nextjs.org) または ドキュメント (github.com) . -
追加
<link rel="shortcut icon" href="/static/favicon.ico" />を頭につける。 -
npm run build && npm run export
P.S. ありがとうございました。 前回の回答 を削除しました。うまくいきました!
編集：もう一つの方法は、次のようにすることです。 インポートヘッド をルートレイアウトに追加し、そこにリンクを追加してください。に追加されたものはすべて ヘッド は、ドキュメントのheadタグに挿入されます。
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;
更新情報 :
静的ディレクトリは廃止され、公開ディレクトリが採用されました。 ドク
というわけで、コードは次のようになります。
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン