I want to use the viewport meta tag to disable the page zoom in the _document.js file in the Next.js.
<Html>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
</Html>
But it’s not working and says viewport meta tags should not be used in _document.js‘s <Head>.
How can I fix it?
Advertisement
Answer
Meta tags added to the custom _document cannot be deduped. This means the proper way to overwrite the viewport meta tag is to do it in your pages.
From Next.js documentation:
Adding
<meta name="viewport" ...>inpages/_document.jswill lead to unexpected results since it cannot be deduped. The viewport tag should be handled bynext/headinpages/_app.js.
Since you probably want to apply it to all pages I’d recommend you do it in _app.
// pages/_app
import Head from 'next/head'
const App = ({ Component, pageProps }) => {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App
Make sure to use 'next/head' and not 'next/document' here.