web-dev-qa-db-fra.com

Comment ajouter un favicon à un site statique Next.js?

J'essaie d'ajouter un favicon à un site statique Next.js sans trop de chance.

J'ai essayé de personnaliser le document avec des composants de 'next/document'https://nextjs.org/docs/#custom-document

Un lien direct vers le fichier favicon.ico ne fonctionne pas car le fichier n'est pas inclus dans la génération et le href ne se met pas à jour en /_next/static/...

L'importation de l'image et l'ajout au href du lien ne fonctionnent pas non plus (voir les lignes commentées).

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

Les liens favicon sont ajoutés mais ils ne s'affichent pas. Je m'attends à ce que cela fonctionne lorsque j'importe le fichier, mais il ajoute simplement un <link rel="shortcut icon" href="[object Object]"> lien.

Quelqu'un a-t-il déjà fait cela?

faviconnext.jsstatic-site
14
Advait Junnarkar
  1. Créer un /static dossier à la racine du projet. Cela sera ajouté au dossier d'exportation statique.
  2. Ajouter un fichier favicon dans /static dossier.
  3. Ajouter _document.js à /pages/ dossier selon documentation (nextjs.org) ou documentation (github.com) .
  4. Ajouter <link rel="shortcut icon" href="/static/favicon.ico" /> diriger.
  5. npm run build && npm run export

P.S. Merci à réponse précédente qui a été supprimé. Ça marche!

Edit: Une autre façon de le faire est de importer Head dans votre disposition racine et d'y ajouter le lien. Tout ce qui est ajouté à Head est inséré dans la balise head du document.

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;

Mise à jour:

Le répertoire statique a été déconseillé au profit du répertoire public. Doc

Ainsi, le code ressemblerait maintenant à

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

La réponse acceptée est Nice, mais il vaut peut-être la peine de souligner que vous n'avez pas pour modifier _document.js pour ajouter un favicon (ni pour ajouter des balises à head).

J'ai découvert par moi-même que placer un favicon dans _app.js A plus de sens. Ce fichier existe probablement déjà pour la mise en page des pages ou quelque chose comme ça. Et vous pouvez ajouter Head tag littéralement n'importe où (voir la documentation )

Je me suis donc retrouvé avec _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