Next.js 13.4中如何解决viewport meta标签重复问题？

问题根源 #

Next.js（App Router模式）会自动向页面<head>中注入默认的viewport meta标签，当你在RootLayout的<head>里手动添加时，就会导致标签重复。

解决方案 #

方案1：使用Next.js Metadata API配置（推荐） #

无需手动编写<meta>标签，直接通过RootLayout的metadata属性配置viewport，Next.js会自动处理并避免重复。

修改后的RootLayout.js代码：

import { Metadata } from 'next';

export const metadata = {
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

这种方式会用你自定义的viewport值替换默认注入的标签，不会出现重复问题，也是Next.js官方推荐的配置方式。

方案2：禁用自动注入，保留手动标签 #

如果坚持手动添加<meta>标签，可以通过next.config.js禁用Next.js自动注入的viewport标签：

在项目根目录的next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 若使用App Router，appDir配置可能已开启
  experimental: {
    appDir: true,
  },
  head: {
    viewport: false, // 禁用自动注入的viewport标签
  },
};

module.exports = nextConfig;

配置完成后，RootLayout中手动添加的viewport标签就不会和自动注入的重复了。

注意：方案2需确保你的Next.js版本支持该配置项，相比之下方案1更符合框架最佳实践，优先推荐。

内容的提问来源于stack exchange，提问作者Abhishek Poddar