[SOLVED] How to use the meta viewport tag in nextjs 14 app router?

How to use the meta viewport tag in nextjs 14 app router?

I am trying to add the responisve viewport html meta tag to my root layout file (layout.tsx).

I am using Nextjs v14, with the app/ router.

import Head from 'next/head'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'STB Radius',
  description: 'The STB Radius Manager',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <body className={inter.className}>{children}</body>
    </html>
  )
}

However, I am getting this warning in the terminal:

Warning: You're using `next/head` inside the `app` directory, please migrate to the Metadata API. See https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead for more details.

How to use the meta viewport tag in nextjs 14 app router?

Solution

Before 14 it was part of metadata but now it has its own API. Just like the Metadata, add:

export const viewport: Viewport = {
    initialScale: 1,
    width: 'device-width'
}

Link to documentation https://nextjs.org/docs/app/api-reference/functions/generate-viewport