NextJS：如何修复「正确定义字符集 - 错误！」问题

针对你遇到的问题——常规静态页正常，但从WordPress API拉取内容的动态生成静态页被Lighthouse报「Properly defines charset Error!」，即便已添加<meta charset="utf-8">，可以从以下几个方向排查解决：

1. 把charset标签放在最开头 #

Lighthouse对charset标签的位置要求严格，必须在<head>内尽可能靠前，最好是第一个元标签，避免被动态插入的内容（比如API返回的meta信息、第三方脚本）挤到后面。

在NextJS的_app.js或页面专属的Head组件里，确保charset标签优先声明：

import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta charset="utf-8" />
        {/* 其他title、meta标签放在后面 */}
        <title>站点标题</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

2. 配置服务器响应头的Content-Type #

就算页面里有meta标签，如果服务器返回的Content-Type响应头没带charset=utf-8，Lighthouse也可能触发错误。针对动态博客页面，在next.config.js里添加响应头配置：

module.exports = {
  async headers() {
    return [
      {
        source: '/blog/:path*', // 匹配你的动态页面路径
        headers: [
          {
            key: 'Content-Type',
            value: 'text/html; charset=utf-8',
          },
        ],
      },
    ];
  },
};

3. 检查WordPress API的内容编码 #

如果WordPress返回的内容编码有问题，也可能干扰浏览器解析：

• 登录WordPress后台，确认「设置-阅读」里的站点字符集是UTF-8
• 调用API时明确指定编码解析响应：

export async function getStaticProps() {
  const res = await fetch('https://你的WordPress站点/wp-json/wp/v2/posts');
  // 先以UTF-8编码读取响应文本，再解析为JSON
  const responseText = await res.text();
  const posts = JSON.parse(responseText);
  
  return {
    props: { posts },
  };
}

4. 验证静态生成的页面源码 #

构建完成后，查看.next/static/exports目录下的静态HTML文件，或者直接在浏览器里查看动态页面的源码，确认<meta charset="utf-8">确实存在且位置正确，避免构建过程中被意外修改。

5. 清除Lighthouse缓存 #

Lighthouse可能缓存了旧页面快照，导致错误持续显示。在Lighthouse审计面板里点击「Clear storage」按钮，重新运行审计即可。

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