webentwicklung-frage-antwort-db.com.de

Wie füge ich einer statischen Next.js-Site ein Favicon hinzu?

Ich versuche, einer statischen Site von Next.js ohne viel Glück ein Favicon hinzuzufügen.

Ich habe versucht, das Dokument mit Komponenten von _'next/document'_ https://nextjs.org/docs/#custom-document anzupassen

Ein direkter Link zur Datei favicon.ico funktioniert nicht, da die Datei nicht im Build enthalten ist und die href nicht auf _/_next/static/..._ aktualisiert wird

Das Importieren des Bildes und das Hinzufügen zum href des Links funktioniert ebenfalls nicht (siehe auskommentierte Zeilen).

_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>
    );
  }
}
_

Die Favicon-Links werden hinzugefügt, jedoch nicht angezeigt. Ich würde erwarten, dass es beim Importieren der Datei funktioniert, aber es wird nur ein _<link rel="shortcut icon" href="[object Object]">_ Link.

Hat das schon jemand gemacht?

faviconnext.jsstatic-site
14
Advait Junnarkar
  1. Erstellen Sie einen Ordner /static Im Projektstamm. Dies wird dem statischen Exportordner hinzugefügt.
  2. Fügen Sie die Favicon-Datei im Ordner /static Hinzu.
  3. Fügen Sie _document.js Zum Ordner /pages/ Gemäß Dokumentation (nextjs.org) oder Dokumentation (github.com) hinzu.
  4. Fügen Sie <link rel="shortcut icon" href="/static/favicon.ico" /> Zum Kopf hinzu.
  5. npm run build && npm run export

P.S. Dank der vorherige Antwort , die gelöscht wurde. Es klappt!

Bearbeiten: Eine andere Möglichkeit besteht darin, Kopf importieren in Ihr Root-Layout einzutragen und dort den Link hinzuzufügen. Alles, was zu Head hinzugefügt wurde, wird in das Dokumentkopf-Tag eingefügt.

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;

Update:

Das statische Verzeichnis ist zugunsten des öffentlichen Verzeichnisses veraltet. Doc

Der Code würde nun also so aussehen

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

Die akzeptierte Antwort ist Nizza, aber es könnte erwähnenswert sein, dass Sie nicht _document.js Ändern müssen, um ein Favicon hinzuzufügen (noch zum Hinzufügen von Tags zu head).

Ich habe selbst herausgefunden, dass es sinnvoller ist, Favicon in _app.js Zu setzen. Diese Datei ist höchstwahrscheinlich bereits vorhanden, um ein Layout für die Seiten oder ähnliches einzurichten. Und Sie können Head tag buchstäblich überall hinzufügen (siehe die Dokumente )

Also habe ich _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