admin管理员组

文章数量:1417442

I'm trying to make the <Head> ponent work, but it doesn't give any results in the DOM.

Here is my page.js:

import Head from 'next/head'

export default function Home() {
  return (
    <>
    <Head>
      <title>
        Home
      </title>
    </Head>
    <main>
      <p>Hello World</p>
    </main>
    </>
  )
}

Below is package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.4.7",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

And below is my layout.js:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

I've tried searching for solutions over the Internet and ChatGPT but nothing really helped. I have tried adding Head from next/document in layout.js and adding <Head> in RootLayout but importing next/document gave an error Error: (0 , _react.createContext) is not a function, I don't know why.

I'm trying to make the <Head> ponent work, but it doesn't give any results in the DOM.

Here is my page.js:

import Head from 'next/head'

export default function Home() {
  return (
    <>
    <Head>
      <title>
        Home
      </title>
    </Head>
    <main>
      <p>Hello World</p>
    </main>
    </>
  )
}

Below is package.json:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.4.7",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }
}

And below is my layout.js:

import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

I've tried searching for solutions over the Internet and ChatGPT but nothing really helped. I have tried adding Head from next/document in layout.js and adding <Head> in RootLayout but importing next/document gave an error Error: (0 , _react.createContext) is not a function, I don't know why.

  • javascript
  • reactjs
  • next.js
Share Improve this question edited Jun 22, 2023 at 22:08 Ghost 5,1097 gold badges24 silver badges48 bronze badges asked Jun 22, 2023 at 21:42 Paurush SinhaPaurush Sinha 1751 silver badge10 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

If you're using the new App Router (Next.js 13 or more) not the old Pages Router, I guess you can't use next/head anymore. As far as I see it's a part of the migration from Pages Router to App Router:

Step 3: Migrating next/head

In the pages directory, the next/head React ponent is used to manage <head> HTML elements such as title and meta. In the app directory, next/head is replaced with the new built-in SEO support.

Before in pages/index.tsx:

import Head from 'next/head'

export default function Page() {
 return (
   <>
     <Head>
       <title>My page title</title>
     </Head>
  </>
 )
}

After in app/page.tsx:

import { Metadata } from 'next'

export const metadata: Metadata = {
 title: 'My Page Title',
}
 
export default function Page() {
 return '...'
}

See all metadata options.

Since it's going to be deprecated, it's better to use the new built-in SEO support which is called "Metadata".

Just as an fyi, the OP used JS NOT TS, hence page.js,! Here's a code snippet for JS that I use on my website:

export const metadata = {
    title: 'home | 9662e',
}

export default function Home() {
    return (
       <>
           <div>some stuff on your page</div>
       </>
    )
}

You will not need to import anything, and you can remove the original metadata section in the layout.js(x).

Hope this helps anyone using JS!

Signed, 9662e103-129a

本文标签： javascriptWhy is Head component not giving any output in DOM in NextjsStack Overflow

版权声明：本文标题：javascript - Why is Head component not giving any output in DOM in Next.js? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745264374a2650507.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。