rsnext/errors/no-head-element.md
Houssein Djirdeh d72f5bd69d
[ESLint] Adds lint rule to flag usage of <head> (#32897)
## Bug

- [X] Related issues linked using `fixes #number`
- [X] Tests added
- [X] Errors have helpful link attached, see `contributing.md`

Fixes #30142
2021-12-31 05:09:44 +00:00

644 B

No Head Element

Why This Error Occurred

An HTML <head> element was used to include page-level metadata, but this can cause unexpected behavior in a Next.js application. Use Next.js' built-in <Head /> component instead.

Possible Ways to Fix It

Import and use the <Head /> component:

import Head from 'next/head'

function Index() {
  return (
    <>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
    </>
  )
}

export default Index