как использовать ‹Head› с nextJS

У меня проблемы с переносом мобильных метатегов в приложение nextJS. Согласно документам здесь, это должно работать https://nextjs.org/docs#populating-head

Но я не вижу, чтобы отрисовывались заголовок или какие-либо из моих собственных метасвойств. Все, что я вижу, это:

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/>

что похоже на какой-то тип по умолчанию.

import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/Header'
import BaseLayout from '../components/BaseLayout.js'

const Index = () => (
  <BaseLayout>
    <Head>
      <title>HSK App</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <Link href='/quizList'>
      <h3>HSK Quiz App!</h3>
    </Link>
  </BaseLayout>
)
export default Index

Помощь приветствуется!


next.js meta html-head
person dcsan    schedule 24.02.2019    source источник
comment
как вы справились с ситуацией? ты нашел какое-нибудь решение?   -  person Amrit Shrestha    schedule 28.08.2019
comment
@AmritShrestha, извините, я не могу вспомнить, но, в конце концов, у меня все заработало ... это был какой-то сбой конфигурации. извиняюсь!   -  person dcsan    schedule 28.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

Компонент NextJS <Head> кажется немного глючным.

Во-первых, два <Head> тега, установленные в разных компонентах, иногда действительно причудливо мешают друг другу. С другой стороны, иногда наличие этого в компонентах страницы работает, иногда нет. И правила кажутся совершенно случайными.

Единственное, что у меня стабильно работало, - это использование <Head> в _document.js. : /

person Lucia    schedule 26.11.2019
comment
Замечу, что использование <Head> в _document.js больше не поддерживается. Есть явное предупреждение, чтобы избежать этого, и вы должны вместо этого использовать его в _app.js, если вам нужно установить глобальные теги. - person ReadyWater; 21.10.2020
comment
возможно, использовать атрибут key='xyz'. Это заставляет добавить данный тег только один раз в заголовок. - person suther; 24.12.2020

arrow_upward
0
arrow_downward

Я не могу воспроизвести эту проблему. Возможно, ошибка была исправлена ​​с момента написания этого вопроса, но документация действительно указывает они используют атрибут key, чтобы помочь Next.js отслеживать метатеги и устранять дубликаты, когда они появляются в родительских и дочерних элементах.

Чтобы избежать дублирования тегов в вашем head, вы можете использовать свойство key, которое гарантирует, что тег будет отображаться только один раз, как в следующем примере:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage
person FlippingBinary    schedule 27.05.2020