feat: added better custom header support (#1358)

* feat: added better custom header support

* test: added some tests for custom headers

* fix: fixed issue if there is no routes manifest

* test: added custom header E2E test

* chore: updated type for the route manifest

* chore: updated loading of routes manifest

* test: some tests are no longer async

* test: some more test for custom headers

* test: added some tests for custom headers

* test: removed redundant test

* feat: added support for basePath in custom headers

* test: tests for basePath in custom headers

* feat: implemented locale paths for custom headers in the Netlify configuration

* test: removed tests that aren't actually testing the feature

* test: move back to toEqual from toMatchInlineSnapshot

* feat: updated custom headers logic for headers generated in the Netlify configuration

* chore: cleaned up some dead code

* fix: now generated headers in Netlify configuration take default locale into consideration

* Update plugin/src/helpers/config.ts

Co-authored-by: Erica Pisani <[email protected]>

* test: added onPostBuild test to check for header generation

* test: added more onPostBuild test to check for header generation

* chore: undoing a copy pasta error

* chore: package-lock.json was out of date for nx-next-monorepo-demo

* chore: package lock updated again

Co-authored-by: Erica Pisani <[email protected]>

Author: nickytonline

cypress/integration/default/headers.spec.ts

@@ -19,6 +19,24 @@ module.exports = {
           },
         ],
       },
+      {
+        source: '/api/:path*',
+        headers: [
+          {
+            key: 'x-custom-api-header',
+            value: 'my custom api header value',
+          },
+        ],
+      },
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-custom-header-for-everything',
+            value: 'my custom header for everything value',
+          },
+        ],
+      },
     ]
   },
   trailingSlash: true,

demos/default/next.config.js

@@ -1,10 +1,18 @@
+import type { NetlifyConfig } from '@netlify/build'
 import { readJSON, writeJSON } from 'fs-extra'
+import type { Header } from 'next/dist/lib/load-custom-routes'
 import type { NextConfigComplete } from 'next/dist/server/config-shared'
 import { join, dirname, relative } from 'pathe'
 import slash from 'slash'
 
 import { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME } from '../constants'
 
+import type { RoutesManifest } from './types'
+
+const ROUTES_MANIFEST_FILE = 'routes-manifest.json'
+
+type NetlifyHeaders = NetlifyConfig['headers']
+
 export interface RequiredServerFiles {
   version?: number
   config?: NextConfigComplete
@@ -13,7 +21,10 @@ export interface RequiredServerFiles {
   ignore?: string[]
 }
 
-export type NextConfig = Pick<RequiredServerFiles, 'appDir' | 'ignore'> & NextConfigComplete
+export type NextConfig = Pick<RequiredServerFiles, 'appDir' | 'ignore'> &
+  NextConfigComplete & {
+    routesManifest?: RoutesManifest
+  }
 
 const defaultFailBuild = (message: string, { error }): never => {
   throw new Error(`${message}\n${error && error.stack}`)
@@ -30,7 +41,11 @@ export const getNextConfig = async function getNextConfig({
       // @ts-ignore
       return failBuild('Error loading your Next config')
     }
-    return { ...config, appDir, ignore }
+
+    const routesManifest: RoutesManifest = await readJSON(join(publish, ROUTES_MANIFEST_FILE))
+
+    // If you need access to other manifest files, you can add them here as well
+    return { ...config, appDir, ignore, routesManifest }
   } catch (error: unknown) {
     return failBuild('Error loading your Next config', { error })
   }
@@ -108,3 +123,82 @@ export const configureHandlerFunctions = ({ netlifyConfig, publish, ignore = []
     })
   })
 }
+
+interface BuildHeaderParams {
+  path: string
+  headers: Header['headers']
+  locale?: string
+}
+
+const buildHeader = (buildHeaderParams: BuildHeaderParams) => {
+  const { path, headers } = buildHeaderParams
+
+  return {
+    for: path,
+    values: headers.reduce((builtHeaders, { key, value }) => {
+      builtHeaders[key] = value
+
+      return builtHeaders
+    }, {}),
+  }
+}
+
+// Replace the pattern :path* at the end of a path with * since it's a named splat which the Netlify
+// configuration does not support.
+const sanitizePath = (path: string) => path.replace(/:[^*/]+\*$/, '*')
+
+/**
+ * Persist NEXT.js custom headers to the Netlify configuration so the headers work with static files
+ * See {@link https://nextjs.org/docs/api-reference/next.config.js/headers} for more information on custom
+ * headers in Next.js
+ *
+ * @param nextConfig - The NextJS configuration
+ * @param netlifyHeaders - Existing headers that are already configured in the Netlify configuration
+ */
+export const generateCustomHeaders = (nextConfig: NextConfig, netlifyHeaders: NetlifyHeaders = []) => {
+  // The routesManifest is the contents of the routes-manifest.json file which will already contain the generated
+  // header paths which take locales and base path into account since this runs after the build. The routes-manifest.json
+  // file is located at demos/default/.next/routes-manifest.json once you've build the demo site.
+  const {
+    routesManifest: { headers: customHeaders = [] },
+    i18n,
+  } = nextConfig
+
+  // Skip `has` based custom headers as they have more complex dynamic conditional header logic
+  // that currently isn't supported by the Netlify configuration.
+  // Also, this type of dynamic header logic is most likely not for SSG pages.
+  for (const { source, headers, locale: localeEnabled } of customHeaders.filter((customHeader) => !customHeader.has)) {
+    // Explicitly checking false to make the check simpler.
+    // Locale specific paths are excluded only if localeEnabled is false. There is no true value for localeEnabled. It's either
+    // false or undefined, where undefined means it's true.
+    //
+    // Again, the routesManifest has already been generated taking locales into account, but the check is required
+    // so  the paths can be properly set in the Netlify configuration.
+    const useLocale = i18n?.locales?.length > 0 && localeEnabled !== false
+
+    if (useLocale) {
+      const { locales } = i18n
+      const joinedLocales = locales.join('|')
+
+      /**
+       *  converts e.g.
+       *  /:nextInternalLocale(en|fr)/some-path
+       *  to a path for each locale
+       *  /en/some-path and /fr/some-path as well as /some-path (default locale)
+       */
+      const defaultLocalePath = sanitizePath(source).replace(`/:nextInternalLocale(${joinedLocales})`, '')
+
+      netlifyHeaders.push(buildHeader({ path: defaultLocalePath, headers }))
+
+      for (const locale of locales) {
+        const path = sanitizePath(source).replace(`:nextInternalLocale(${joinedLocales})`, locale)
+
+        netlifyHeaders.push(buildHeader({ path, headers }))
+      }
+    } else {
+      const path = sanitizePath(source)
+
+      netlifyHeaders.push(buildHeader({ path, headers }))
+    }
+  }
+}

plugin/src/helpers/config.ts

@@ -12,6 +12,7 @@ import {
   getRequiredServerFiles,
   updateRequiredServerFiles,
   configureHandlerFunctions,
+  generateCustomHeaders,
 } from './helpers/config'
 import { updateConfig, writeMiddleware } from './helpers/edge'
 import { moveStaticPages, movePublicFiles, patchNextFiles, unpatchNextFiles } from './helpers/files'
@@ -136,6 +137,7 @@ const plugin: NetlifyPlugin = {
     netlifyConfig: {
       build: { publish },
       redirects,
+      headers,
     },
     utils: {
       status,
@@ -161,7 +163,12 @@ const plugin: NetlifyPlugin = {
 
     await checkForOldFunctions({ functions })
     await checkZipSize(join(FUNCTIONS_DIST, `${ODB_FUNCTION_NAME}.zip`))
-    const { basePath, appDir } = await getNextConfig({ publish, failBuild })
+    const nextConfig = await getNextConfig({ publish, failBuild })
+
+    const { basePath, appDir } = nextConfig
+
+    generateCustomHeaders(nextConfig, headers)
+
     warnForProblematicUserRewrites({ basePath, redirects })
     warnForRootRedirects({ appDir })
     await unpatchNextFiles(basePath)