如何在Next.js中将meta charset从utf-8改为utf-16？

Next.js默认会自动注入<meta charset="utf-8">，常规方法无法直接覆盖，需按以下步骤修改：

1. 禁用自动注入的utf-8标签 #

在项目根目录的next.config.js中添加配置，关闭Next.js自动生成的charset meta标签：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    meta: {
      charset: false,
    },
  },
};

module.exports = nextConfig;

2. 手动添加utf-16标签 #

在app/layout.tsx的<head>区域直接写入utf-16的meta标签，此时页面只会渲染这一个charset标签：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-16" />
      </head>
      <body>{children}</body>
    </html>
  );
}

额外注意事项 #

• 服务器响应头的Content-Type编码要和meta标签一致，否则浏览器会优先采用响应头设置。可通过middleware统一配置：

// app/middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Content-Type', 'text/html; charset=utf-16');
  return response;
}

• 提醒：utf-16并非现代Web标准编码，大部分场景下utf-8兼容性更佳。建议先排查emoji显示异常的根源，比如字体缺失、渲染容器样式问题等，再考虑修改编码。

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