rsnext/errors/no-document-viewport-meta.mdx
Delba de Oliveira 44d1a1cb15
docs: Migrate error messages to MDX and App Router. (#52038)
This PR is part of a larger effort to migrate error messages to MDX and
use App Router: https://github.com/vercel/front/pull/23459
2023-07-05 06:11:16 -07:00

33 lines
804 B
Text

---
title: 'Viewport `meta` tags should not be used in `_document.js` `<Head>`'
---
## Why This Error Occurred
Adding `<meta name="viewport" ...>` in `pages/_document.js` will lead to unexpected results since it cannot be deduped.
The viewport tag should be handled by `next/head` in `pages/_app.js`.
## Possible Ways to Fix It
Set your viewport `meta` tag in `pages/_app.js` instead:
```tsx filename="pages/_app.js"
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="viewport-fit=cover" />
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApp
```
## Useful Links
- [Issue #13230](https://github.com/vercel/next.js/issues/13230), which led to the creation of this warning.