Remove head.js (#47507)

### What? Removes `head.js` file convention in favor of built-in SEO support through `metadata`: https://beta.nextjs.org/docs/guides/seo ### Why? The `head.js` convention was superseded by the built-in SEO support which is designed specifically for Server Components. ### How? Removed the `head.js` handling in app-loader and the tests for it. fix NEXT-812 ([link](https://linear.app/vercel/issue/NEXT-812))
vercel · Mar 25, 2023 · a058b85 · a058b85
1 parent 88a3087
commit a058b85
Show file tree

Hide file tree

Showing 21 changed files with 7 additions and 342 deletions.
diff --git a/packages/next/src/build/webpack/loaders/next-app-loader.ts b/packages/next/src/build/webpack/loaders/next-app-loader.ts
@@ -40,7 +40,6 @@ const FILE_TYPES = {
   template: 'template',
   error: 'error',
   loading: 'loading',
-  head: 'head',
   'not-found': 'not-found',
 } as const
 

diff --git a/packages/next/src/server/app-render/index.tsx b/packages/next/src/server/app-render/index.tsx
@@ -43,7 +43,6 @@ import { StaticGenerationAsyncStorageWrapper } from '../async-storage/static-gen
 import { collectMetadata } from '../../lib/metadata/resolve-metadata'
 import { isClientReference } from '../../lib/client-reference'
 import { getLayoutOrPageModule, LoaderTree } from '../lib/app-dir-module'
-import { warnOnce } from '../../shared/lib/utils/warn-once'
 import { isNotFoundError } from '../../client/components/not-found'
 import {
   getURLFromRedirectError,
@@ -280,7 +279,7 @@ export async function renderToHTMLOrFlight(
       }
     }
 
-    async function resolveHead({
+    async function resolveMetadata({
       tree,
       parentParams,
       metadataItems,
@@ -291,8 +290,8 @@ export async function renderToHTMLOrFlight(
       metadataItems: MetadataItems
       /** Provided tree can be nested subtree, this argument says what is the path of such subtree */
       treePrefix?: string[]
-    }): Promise<[React.ReactNode, MetadataItems]> {
-      const [segment, parallelRoutes, { head, page }] = tree
+    }): Promise<MetadataItems> {
+      const [segment, parallelRoutes, { page }] = tree
       const currentTreePrefix = [...treePrefix, segment]
       const isPage = typeof page !== 'undefined'
       // Handle dynamic segment params.
@@ -327,29 +326,15 @@ export async function renderToHTMLOrFlight(
 
       for (const key in parallelRoutes) {
         const childTree = parallelRoutes[key]
-        const [returnedHead] = await resolveHead({
+        await resolveMetadata({
           tree: childTree,
           parentParams: currentParams,
           metadataItems,
           treePrefix: currentTreePrefix,
         })
-        if (returnedHead) {
-          return [returnedHead, metadataItems]
-        }
-      }
-
-      if (head) {
-        if (process.env.NODE_ENV !== 'production') {
-          warnOnce(
-            `\`head.js\` is being used in route /${segment}. Please migrate to the Metadata API for an improved experience: https://beta.nextjs.org/docs/api-reference/metadata`
-          )
-        }
-
-        const Head = await interopDefault(await head[0]())
-        return [<Head params={currentParams} />, metadataItems]
       }
 
-      return [null, metadataItems]
+      return metadataItems
     }
 
     let defaultRevalidate: false | undefined | number = false
@@ -1027,7 +1012,7 @@ export async function renderToHTMLOrFlight(
         return [actualSegment]
       }
 
-      const [resolvedHead, metadataItems] = await resolveHead({
+      const metadataItems = await resolveMetadata({
         tree: loaderTree,
         parentParams: {},
         metadataItems: [],
@@ -1048,7 +1033,6 @@ export async function renderToHTMLOrFlight(
                 {/* Adding key={requestId} to make metadata remount for each render */}
                 {/* @ts-expect-error allow to use async server component */}
                 <MetadataTree key={requestId} metadata={metadataItems} />
-                {resolvedHead}
               </>
             ),
             injectedCSS: new Set(),
@@ -1123,7 +1107,7 @@ export async function renderToHTMLOrFlight(
         }
       : {}
 
-    const [initialHead, metadataItems] = await resolveHead({
+    const metadataItems = await resolveMetadata({
       tree: loaderTree,
       parentParams: {},
       metadataItems: [],
@@ -1166,7 +1150,6 @@ export async function renderToHTMLOrFlight(
                   {/* Adding key={requestId} to make metadata remount for each render */}
                   {/* @ts-expect-error allow to use async server component */}
                   <MetadataTree key={requestId} metadata={metadataItems} />
-                  {initialHead}
                 </>
               }
               globalErrorComponent={GlobalError}

diff --git a/test/e2e/app-dir/head/app/blog/[slug]/head.js b/test/e2e/app-dir/head/app/blog/[slug]/head.js
diff --git a/test/e2e/app-dir/head/app/blog/[slug]/page.js b/test/e2e/app-dir/head/app/blog/[slug]/page.js
diff --git a/test/e2e/app-dir/head/app/blog/about/page.js b/test/e2e/app-dir/head/app/blog/about/page.js
diff --git a/test/e2e/app-dir/head/app/blog/head.js b/test/e2e/app-dir/head/app/blog/head.js
diff --git a/test/e2e/app-dir/head/app/blog/layout.js b/test/e2e/app-dir/head/app/blog/layout.js
diff --git a/test/e2e/app-dir/head/app/blog/page.js b/test/e2e/app-dir/head/app/blog/page.js
diff --git a/test/e2e/app-dir/head/app/head.js b/test/e2e/app-dir/head/app/head.js
diff --git a/test/e2e/app-dir/head/app/layout.js b/test/e2e/app-dir/head/app/layout.js
diff --git a/test/e2e/app-dir/head/app/next-head/client-head.js b/test/e2e/app-dir/head/app/next-head/client-head.js
diff --git a/test/e2e/app-dir/head/app/next-head/dynamic-head.js b/test/e2e/app-dir/head/app/next-head/dynamic-head.js
diff --git a/test/e2e/app-dir/head/app/next-head/page.js b/test/e2e/app-dir/head/app/next-head/page.js
diff --git a/test/e2e/app-dir/head/app/page.js b/test/e2e/app-dir/head/app/page.js
diff --git a/test/e2e/app-dir/head/head.test.ts b/test/e2e/app-dir/head/head.test.ts