Adding head element checking for root layout (#43597)

Andarist · huozhi · web-flow · commit 482fccb92234 · 2022-12-02T16:41:46.000Z
### Update We removed the `<head>` element checking for root layout in #41621. Since we also need `<head>` for preload in the future, and also css-in-js will require that. We're adding back the `head` element checking to make sure user always provide valid root layout including it. ### Issue An issue was reported [here](mui/material-ui#34905 (comment)) that the Emotion/MUI site was suffering from FOUC. After an inspection, I noticed that the SSRed HTML didn't contain the inserted styles at all - despite them being inserted through `useServerInsertedHTML`. I managed to debug it down and discovered that their layout was missing `<head></head>` and thus the stream transformer skipped the insertion altogether cause of this check: https://github.com/vercel/next.js/blob/fbc98abab31a54dbc2b6c88a064b579a10f34871/packages/next/server/node-web-streams-helper.ts#L177-L183 I've figured that at the very least we could surface this as a console error in development to nudge the user to fix the missing `<head/>` cc @huozhi Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
diff --git a/packages/next/client/components/react-dev-overlay/internal/container/RootLayoutError.tsx b/packages/next/client/components/react-dev-overlay/internal/container/RootLayoutError.tsx
@@ -14,7 +14,7 @@ export type RootLayoutErrorProps = { missingTags: string[] }
 export const RootLayoutError: React.FC<RootLayoutErrorProps> =
   function BuildError({ missingTags }) {
     const message =
-      'Please make sure to include the following tags in your root layout: <html>, <body>.\n\n' +
+      'Please make sure to include the following tags in your root layout: <html>, <head>, <body>.\n\n' +
       `Missing required root layout tag${
         missingTags.length === 1 ? '' : 's'
       }: ` +
diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
@@ -288,15 +288,19 @@ export function createRootLayoutValidatorStream(
   getTree: () => FlightRouterState
 ): TransformStream<Uint8Array, Uint8Array> {
   let foundHtml = false
+  let foundHead = false
   let foundBody = false
 
   return new TransformStream({
     async transform(chunk, controller) {
-      if (!foundHtml || !foundBody) {
+      if (!foundHtml || !foundHead || !foundBody) {
         const content = decodeText(chunk)
         if (!foundHtml && content.includes('<html')) {
           foundHtml = true
         }
+        if (!foundHead && content.includes('<head')) {
+          foundHead = true
+        }
         if (!foundBody && content.includes('<body')) {
           foundBody = true
         }
@@ -306,6 +310,7 @@ export function createRootLayoutValidatorStream(
     flush(controller) {
       const missingTags = [
         foundHtml ? null : 'html',
+        foundHead ? null : 'head',
         foundBody ? null : 'body',
       ].filter(nonNullable)
 
diff --git a/test/e2e/app-dir/root-layout.test.ts b/test/e2e/app-dir/root-layout.test.ts
@@ -40,9 +40,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
 
@@ -54,9 +54,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
 
@@ -67,9 +67,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
     })
diff --git a/test/e2e/app-dir/root-layout/app/(required-tags)/has-tags/layout.js b/test/e2e/app-dir/root-layout/app/(required-tags)/has-tags/layout.js
@@ -4,6 +4,9 @@ export const revalidate = 0
 export default function Root({ children }) {
   return (
     <html>
+      <head>
+        <title>Hello World</title>
+      </head>
       <body>{children}</body>
     </html>
   )
