archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: Document error cases with head/body-tags (#56412)

Browse source 
Co-authored-by: Lee Robinson <me@leerob.io>
This commit is contained in:
Tobias 2024-01-06 18:16:21 +01:00 committed by GitHub
parent 0ea127c642
commit a95a7d684f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/03-pages/02-api-reference/01-components/head.mdx
View file

@ -30,6 +30,8 @@ function IndexPage() {
export default IndexPage
```
## Avoid duplicated tags
To avoid duplicate tags in your `head` you can use the `key` property, which will make sure the tag is only rendered once, as in the following example:
```jsx
@ -57,7 +59,15 @@ In this case only the second `<meta property="og:title" />` is rendered. `meta`
> The contents of `head` get cleared upon unmounting the component, so make sure each page completely defines what it needs in `head`, without making assumptions about what other pages added.
## Use minimal nesting
`title`, `meta` or any other elements (e.g. `script`) need to be contained as **direct** children of the `Head` element,
or wrapped into maximum one level of `<React.Fragment>` or arrays—otherwise the tags won't be correctly picked up on client-side navigations.
> We recommend using [next/script](/docs/pages/building-your-application/optimizing/scripts) in your component instead of manually creating a `<script>` in `next/head`.
## Use `next/script` for scripts
We recommend using [`next/script`](/docs/pages/building-your-application/optimizing/scripts) in your component instead of manually creating a `<script>` in `next/head`.
## No `html` or `body` tags
You **cannot** use `<Head>` to set attributes on `<html>` or `<body>` tags. This will result in an `next-head-count is missing` error. `next/head` can only handle tags inside the HTML `<head>` tag.