如何在NextJS中修改DOCTYPE标签，添加自定义XHTML DTD声明属性

解决方案 #

核心结论 #

可以修改默认DOCTYPE，且仅能在服务端输出HTML的阶段修改，前端运行时通过JS修改的方案完全不可行。

DOCTYPE是浏览器解析HTML文档时第一时间读取的文档类型声明，不属于标准DOM元素，因此无法通过getElementsByTagName等DOM API获取，页面加载完成后再修改也不会改变浏览器已生效的渲染模式，完全达不到第三方校验要求。

Pages路由实现方案（你当前使用的_document.ts方案） #

直接在自定义Document的getInitialProps钩子中替换默认的DOCTYPE字符串即可，示例代码如下：

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const originalProps = await Document.getInitialProps(ctx)
    // 替换默认DOCTYPE为目标声明
    const modifiedHtml = originalProps.html.replace(
      '<!DOCTYPE html>',
      '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
    )
    return { ...originalProps, html: modifiedHtml }
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

注意事项 #

修改完成后需要确保页面所有HTML代码符合XHTML 1.0 Transitional规范，常见要求包括：

• 所有标签必须闭合，单标签也要加闭合标记（如<br />而非<br>）
• 所有属性值必须加引号
• 标签和属性名必须小写

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