Hi I need to override my meta tag i.e. viewport meta tag. But when I am adding it in tag it duplicates my viewport tag. How can I resolve it.
RootLayout.js
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>{children}</body>
</html>
Hi I need to override my meta tag i.e. viewport meta tag. But when I am adding it in tag it duplicates my viewport tag. How can I resolve it.
RootLayout.js
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>{children}</body>
</html>
2 Answers
Reset to default 4import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1', // <-- here
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
To resolve your viewport issue, just modify the metadata as shown in the code above!
if you use next.js 14
metadata.viewport is deprecated
export const metadata: Metadata = {
viewport: '...', // <-- deprecated
}
use viewport instead
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
see their post
https://nextjs/docs/app/api-reference/functions/generate-viewport