fix: place the charset meta tag at the top of the head

vercel · Apr 29, 2022 · 130d5d9 · 130d5d9
1 parent ea779c5
commit 130d5d9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/next/shared/lib/head.tsx b/packages/next/shared/lib/head.tsx
@@ -134,7 +134,7 @@ function reduceComponents(
     )
     .reduce(onlyReactElement, [])
     .reverse()
-    .concat(defaultHead(props.inAmpMode))
+    .concat(defaultHead(props.inAmpMode).reverse())
     .filter(unique())
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {

diff --git a/test/e2e/next-head/index.test.ts b/test/e2e/next-head/index.test.ts
@@ -22,6 +22,19 @@ describe('should set-up next', () => {
   })
   afterAll(() => next.destroy())
 
+  it(`should place charset element at the top of <head>`, async () => {
+    const browser = await webdriver(next.url, '/')
+
+    const html = await browser.eval(() => {
+      const head = document.querySelector('head')
+      return head.innerHTML
+    })
+
+    expect(html).toContain(
+      `<meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="test-head-1" content="hello">`
+    )
+  })
+
   it('should have correct head tags in initial document', async () => {
     const html = await renderViaHTTP(next.url, '/')
     const $ = cheerio.load(html)