migrate immutable headers for next/static

Author: pieh

adapters-notes.md

@@ -3,6 +3,7 @@
 - Files from `public` not in `outputs.staticFiles`
 - In `onBuildComplete` - `config.images.remotePatterns` type is `(RemotePattern | URL)[]` but in
   reality `URL` inputs are converted to `RemotePattern` so type should be just `RemotePattern[]`
+- `routes.headers` does not contain immutable cache-control headers for \_next/static
 
 ## Plan
 

src/adapter/adapter.ts

@@ -3,6 +3,7 @@ import { dirname } from 'node:path'
 
 import type { NextAdapter } from 'next-with-adapters'
 
+import { onBuildComplete as onBuildCompleteForHeaders } from './header.js'
 import {
   modifyConfig as modifyConfigForImageCDN,
   onBuildComplete as onBuildCompleteForImageCDN,
@@ -23,12 +24,13 @@ const adapter: NextAdapter = {
 
     return config
   },
-  async onBuildComplete(ctx) {
+  async onBuildComplete(nextAdapterContext) {
     console.log('onBuildComplete hook called')
 
     let frameworksAPIConfig: FrameworksAPIConfig = null
 
-    frameworksAPIConfig = onBuildCompleteForImageCDN(ctx, frameworksAPIConfig)
+    frameworksAPIConfig = onBuildCompleteForImageCDN(nextAdapterContext, frameworksAPIConfig)
+    frameworksAPIConfig = onBuildCompleteForHeaders(nextAdapterContext, frameworksAPIConfig)
 
     if (frameworksAPIConfig) {
       // write out config if there is any
@@ -40,7 +42,7 @@ const adapter: NextAdapter = {
     }
 
     // for dev/debugging purposes only
-    await writeFile('./onBuildComplete.json', JSON.stringify(ctx, null, 2))
+    await writeFile('./onBuildComplete.json', JSON.stringify(nextAdapterContext, null, 2))
     debugger
   },
 }

src/adapter/header.ts

@@ -0,0 +1,28 @@
+import type { FrameworksAPIConfig, OnBuildCompleteContext } from './types.js'
+
+export function onBuildComplete(
+  ctx: OnBuildCompleteContext,
+  frameworksAPIConfigArg: FrameworksAPIConfig,
+) {
+  const frameworksAPIConfig: FrameworksAPIConfig = frameworksAPIConfigArg ?? {}
+
+  frameworksAPIConfig.headers ??= []
+
+  frameworksAPIConfig.headers.push({
+    for: `${ctx.config.basePath}/_next/static/*`,
+    values: {
+      'Cache-Control': 'public, max-age=31536000, immutable',
+    },
+  })
+
+  // TODO: we should apply ctx.routes.headers here as well, but the matching
+  // is currently not compatible with anything we can express with our redirect engine
+  // {
+  //   regex: "^(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))?(?:/)?$"
+  //   source: "/:path*" // <- this is defined in next.config
+  // }
+  // per https://docs.netlify.com/manage/routing/headers/#wildcards-and-placeholders-in-paths
+  // this is example of something we can't currently do
+
+  return frameworksAPIConfig
+}

src/build/content/static.ts

@@ -79,20 +79,6 @@ export const copyStaticAssets = async (ctx: PluginContext): Promise<void> => {
   })
 }
 
-export const setHeadersConfig = async (ctx: PluginContext): Promise<void> => {
-  // https://nextjs.org/docs/app/api-reference/config/next-config-js/headers#cache-control
-  // Next.js sets the Cache-Control header of public, max-age=31536000, immutable for truly
-  // immutable assets. It cannot be overridden. These immutable files contain a SHA-hash in
-  // the file name, so they can be safely cached indefinitely.
-  const { basePath } = ctx.buildConfig
-  ctx.netlifyConfig.headers.push({
-    for: `${basePath}/_next/static/*`,
-    values: {
-      'Cache-Control': 'public, max-age=31536000, immutable',
-    },
-  })
-}
-
 export const copyStaticExport = async (ctx: PluginContext): Promise<void> => {
   await tracer.withActiveSpan('copyStaticExport', async () => {
     if (!ctx.exportDetail?.outDirectory) {

src/index.ts

@@ -12,7 +12,6 @@ import {
   copyStaticContent,
   copyStaticExport,
   publishStaticDir,
-  setHeadersConfig,
   unpublishStaticDir,
 } from './build/content/static.js'
 import { clearStaleEdgeHandlers, createEdgeHandlers } from './build/functions/edge.js'
@@ -88,19 +87,18 @@ export const onBuild = async (options: NetlifyPluginOptions) => {
 
     // static exports only need to be uploaded to the CDN and setup /_next/image handler
     if (ctx.buildConfig.output === 'export') {
-      return Promise.all([copyStaticExport(ctx), setHeadersConfig(ctx)])
+      return Promise.all([copyStaticExport(ctx)])
     }
 
     await verifyAdvancedAPIRoutes(ctx)
     await verifyNetlifyFormsWorkaround(ctx)
 
     await Promise.all([
-      copyStaticAssets(ctx),
-      copyStaticContent(ctx),
-      copyPrerenderedContent(ctx),
-      createServerHandler(ctx),
-      createEdgeHandlers(ctx),
-      setHeadersConfig(ctx),
+      copyStaticAssets(ctx), // this
+      copyStaticContent(ctx), // this
+      copyPrerenderedContent(ctx), // maybe this
+      createServerHandler(ctx), // not this while we use standalone
+      createEdgeHandlers(ctx), // this - middleware
     ])
   })
 }