web-dev-qa-db-ja.com

Next.js静的サイトにファビコンを追加する方法は？

あまり運のない状態で、Next.js静的サイトにファビコンを追加しようとしています。

'next/document'のコンポーネントを使用してドキュメントをカスタマイズしてみました https://nextjs.org/docs/#custom-document

ファイルがビルドに含まれておらず、hrefが/_next/static/...に更新されていないため、favicon.icoファイルへの直接リンクは機能しません。

画像のインポートとリンクの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]">リンク。

誰かこれをまだやったことがありますか？

faviconnext.jsstatic-site
14
Advait Junnarkar
  1. プロジェクトルートに/staticフォルダを作成します。これは静的エクスポートフォルダーに追加されます。
  2. /staticフォルダーにファビコンファイルを追加します。
  3. documentation（nextjs.org） または documentation（github.com） に従って、_document.jsフォルダーに/pages/を追加します。
  4. <link rel="shortcut icon" href="/static/favicon.ico" />を頭に追加します。
  5. npm run build && npm run export

追伸 前の回答 のおかげで削除されました。できます！

編集：別の方法は、これを行うことですHeadをルートレイアウトにインポートし、そこにリンクを追加します。 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;

更新：

Staticディレクトリは、publicディレクトリを優先して廃止されました。 ドキュメント

したがって、コードは次のようになります

import Head from 'next/head';

const Page = (props) => (
  <div>
    <Head>
      <link rel="shortcut icon" href="/favicon.ico" />
    </Head>
    // Other layout/components
  </div>
);
20
Advait Junnarkar

受け入れられた答えはいいですが、あなたが変更する必要がない_document.jsファビコンを追加する場合（headにタグを追加する場合も同様）。

ファビコンを_app.jsの方が理にかなっています。このファイルは、ページのレイアウトまたはこのようなものを設定するためにすでに存在している可能性があります。また、Headタグを文字どおりどこにでも追加できます（ the docs を参照）

だから私は_app.js

class MyApp extends App {
  render() {
  const { Component, pageProps } = this.props;
  return (
    <Layout>
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  );
}
4
user3272018