Place 'charset' element at the top of <head> (vercel#28119)

natew · Feb 16, 2022 · 1e4de80 · 1e4de80
1 parent bf7459c
commit 1e4de80
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 2 deletions.
diff --git a/examples/cms-umbraco-heartcore/.gitignore b/examples/cms-umbraco-heartcore/.gitignore
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -684,11 +684,11 @@ export class Head extends Component<
               </noscript>
             </>
           )}
+          {!isDeferred && getDynamicHeadContent()}
+
           {children}
           {optimizeFonts && <meta name="next-font-preconnect" />}
 
-          {!isDeferred && getDynamicHeadContent()}
-
           {inAmpMode && (
             <>
               <meta

diff --git a/test/integration/client-navigation/pages/_document.js b/test/integration/client-navigation/pages/_document.js
@@ -0,0 +1,25 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* This tag is used to test head-priority */}
+          <meta name="keywords" content="document head test" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/test/integration/client-navigation/pages/head-priority.js b/test/integration/client-navigation/pages/head-priority.js
@@ -0,0 +1,14 @@
+import Head from 'next/head'
+
+export default () => {
+  return (
+    <div>
+      <Head>
+        <meta charSet="iso-8859-5" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="title" content="head title" />
+      </Head>
+      <p>next/head should be placed above the document/head.</p>
+    </div>
+  )
+}
diff --git a/test/integration/client-navigation/test/rendering.js b/test/integration/client-navigation/test/rendering.js
@@ -192,6 +192,18 @@ export default function (render, fetch, ctx) {
       expect(html).toContain('<script src="/test-defer.js" defer="">')
     })
 
+    it('should place charset element at the top of <head>', async () => {
+      const html = await render('/head-priority')
+      const nextHeadElement =
+        '<meta charSet="iso-8859-5"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="title" content="head title"/>'
+      const nextHeadCountElement = '<meta name="next-head-count" content="3"/>'
+      const documentHeadElement =
+        '<meta name="keywords" content="document head test"/>'
+      expect(html).toContain(
+        `${nextHeadElement}${nextHeadCountElement}${documentHeadElement}`
+      )
+    })
+
     it('should render the page with custom extension', async () => {
       const html = await render('/custom-extension')
       expect(html).toContain('<div>Hello</div>')