如何在Next.js 14 App Router中正确配置viewport meta标签？

你遇到的警告是因为App Router已弃用next/head，官方推荐使用Metadata API管理页面元数据（包括viewport标签）。下面是两种正确的实现方式：

方法一：通过Metadata对象配置（推荐） #

直接在导出的metadata对象中添加viewport字段，统一管理所有元数据：

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',
  // 添加viewport配置
  viewport: 'width=device-width, initial-scale=1'
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      {/* 移除<Head>组件，无需再使用 */}
      <body className={inter.className}>{children}</body>
    </html>
  )
}

方法二：直接在html标签上设置（Next.js 13.4+支持） #

若习惯直接操作标签属性，Next.js 13.4及以上版本允许直接给<html>标签添加viewport属性：

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标签添加viewport属性 */}
    <html lang="en" viewport="width=device-width, initial-scale=1">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

两种方式都能消除警告并正确配置响应式viewport，推荐使用第一种方法，更贴合App Router的设计规范。

内容的提问来源于stack exchange，提问作者Islam Y-