Next.js viewport meta tags should not be used in

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?

Do I need viewport meta tag?

Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.

Why is the viewport meta tag used in responsive web design?

The HTML Viewport meta tag is used for creating responsive website. So that web page can adjust its width according to viewport.

Where do you place the viewport meta tag?

Generally, meta elements (including viewport) should be placed in the document's <head> . CSS rules should either be added to a CSS stylesheet and referenced with a <link> element or, if you're not using stylesheets for some reason, in a <style> element (also in the document's <head> ).

What is viewport what tag will you use to handle viewport give example?

The basic properties of the "viewport" <meta> tag include: width. Controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width , which is 100vw, or 100% of the viewport width.

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" ...> 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.

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.

The viewport tag should be handled by next/head in pages/_app.js. So you can either move it to the _app.js file or if it doesn't exist yet, you can create one like this:

import Head from 'next/head'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <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>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

Next.js viewport meta tags should not be used in _document.js's <Head>

Tags:

javascript

reactjs

next.js

Mostafa

People also ask

Video Answer

2 Answers

juliomalves

Zsolt Meszaros

Recent Activity

Donate For Us