refactor adapter a bit and start creating modules per concern

Author: pieh

adapters-notes.md

@@ -0,0 +1,31 @@
+## Feedback
+
+- 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[]`
+
+## Plan
+
+1. There are some operations that are easier to do in a build plugin context due to helpers, so some
+   handling will remain in build plugin (cache save/restore, moving static assets dirs for
+   publishing them etc).
+
+2. We will use adapters API where it's most helpful:
+
+- adjusting next config:
+  - set standalone mode instead of using "private" env var (for now at least we will continue with
+    standalone mode as using outputs other than middleware require bigger changes which will be
+    explored in later phases)
+  - set image loader (url generator) to use Netlify Image CDN directly (no need for \_next/image
+    rewrite then)
+  - (maybe/explore) set build time cache handler to avoid having to read output of default cache
+    handler and convert those files into blobs to upload later
+- use middleware output to generate middleware edge function
+- don't glob for static files and use `outputs.staticFiles` instead
+- don't read various manifest files manually and use provided context in `onBuildComplete` instead
+
+## To figure out
+
+- Can we export build time otel spans from adapter similarly how we do that now in a build plugin?
+- Expose some constants from build plugin to adapter - what's best way to do that? (things like
+  packagePath, publishDir etc)

src/adapter.ts

@@ -0,0 +1,46 @@
+import { mkdir, writeFile } from 'node:fs/promises'
+import { dirname } from 'node:path'
+
+import type { NextAdapter } from 'next-with-adapters'
+
+import {
+  modifyConfig as modifyConfigForImageCDN,
+  onBuildComplete as onBuildCompleteForImageCDN,
+} from './image-cdn.js'
+
+const NETLIFY_FRAMEWORKS_API_CONFIG_PATH = '.netlify/v1/config.json'
+
+const adapter: NextAdapter = {
+  name: 'Netlify',
+  modifyConfig(config) {
+    // Enable Next.js standalone mode at build time
+    config.output = 'standalone'
+
+    modifyConfigForImageCDN(config)
+
+    return config
+  },
+  async onBuildComplete(ctx) {
+    console.log('onBuildComplete hook called')
+
+    // TODO: do we have a type for this? https://docs.netlify.com/build/frameworks/frameworks-api/#netlifyv1configjson
+    let frameworksAPIConfig: any = null
+
+    frameworksAPIConfig = onBuildCompleteForImageCDN(ctx, frameworksAPIConfig)
+
+    if (frameworksAPIConfig) {
+      // write out config if there is any
+      await mkdir(dirname(NETLIFY_FRAMEWORKS_API_CONFIG_PATH), { recursive: true })
+      await writeFile(
+        NETLIFY_FRAMEWORKS_API_CONFIG_PATH,
+        JSON.stringify(frameworksAPIConfig, null, 2),
+      )
+    }
+
+    // for dev/debugging purposes only
+    await writeFile('./onBuildComplete.json', JSON.stringify(ctx, null, 2))
+    debugger
+  },
+}
+
+export default adapter

src/adapter/adapter.ts

@@ -0,0 +1,92 @@
+import { fileURLToPath } from 'node:url'
+
+import type { RemotePattern } from 'next-with-adapters/dist/shared/lib/image-config.js'
+import { makeRe } from 'picomatch'
+
+import type { NextConfigComplete, OnBuildCompleteContext } from './types.js'
+
+const NETLIFY_IMAGE_LOADER_FILE = fileURLToPath(import.meta.resolve(`./next-image-loader.cjs`))
+
+export function modifyConfig(config: NextConfigComplete) {
+  if (config.images.loader === 'default') {
+    // Set up Netlify Image CDN image's loaderFile
+    // see https://nextjs.org/docs/app/api-reference/config/next-config-js/images
+    config.images.loader = 'custom'
+    config.images.loaderFile = NETLIFY_IMAGE_LOADER_FILE
+  }
+}
+
+function generateRegexFromPattern(pattern: string): string {
+  return makeRe(pattern).source
+}
+
+export function onBuildComplete(ctx: OnBuildCompleteContext, frameworksAPIConfigArg: any) {
+  let frameworksAPIConfig: any = frameworksAPIConfigArg
+
+  const { images } = ctx.config
+  if (images.loader === 'custom' && images.loaderFile === NETLIFY_IMAGE_LOADER_FILE) {
+    const { remotePatterns, domains } = images
+    // if Netlify image loader is used, configure allowed remote image sources
+    const remoteImageSources: string[] = []
+    if (remotePatterns && remotePatterns.length !== 0) {
+      // convert images.remotePatterns to regexes for Frameworks API
+      for (const remotePattern of remotePatterns) {
+        if (remotePattern instanceof URL) {
+          // Note: even if URL notation is used in next.config.js, This will result in RemotePattern
+          // object here, so types for the complete config should not have URL as an possible type
+          throw new TypeError('Received not supported URL instance in remotePatterns')
+        }
+        let { protocol, hostname, port, pathname }: RemotePattern = remotePattern
+
+        if (pathname) {
+          pathname = pathname.startsWith('/') ? pathname : `/${pathname}`
+        }
+
+        const combinedRemotePattern = `${protocol ?? 'http?(s)'}://${hostname}${
+          port ? `:${port}` : ''
+        }${pathname ?? '/**'}`
+
+        try {
+          remoteImageSources.push(generateRegexFromPattern(combinedRemotePattern))
+        } catch (error) {
+          throw new Error(
+            `Failed to generate Image CDN remote image regex from Next.js remote pattern: ${JSON.stringify(
+              { remotePattern, combinedRemotePattern },
+              null,
+              2,
+            )}`,
+            {
+              cause: error,
+            },
+          )
+        }
+      }
+    }
+
+    if (domains && domains.length !== 0) {
+      for (const domain of domains) {
+        const patternFromDomain = `http?(s)://${domain}/**`
+        try {
+          remoteImageSources.push(generateRegexFromPattern(patternFromDomain))
+        } catch (error) {
+          throw new Error(
+            `Failed to generate Image CDN remote image regex from Next.js domain: ${JSON.stringify(
+              { domain, patternFromDomain },
+              null,
+              2,
+            )}`,
+            { cause: error },
+          )
+        }
+      }
+    }
+
+    if (remoteImageSources.length !== 0) {
+      // https://docs.netlify.com/build/frameworks/frameworks-api/#images
+      frameworksAPIConfig ??= {}
+      frameworksAPIConfig.images ??= {}
+      frameworksAPIConfig.images.remote_images = remoteImageSources
+    }
+  }
+  return frameworksAPIConfig
+}

src/adapter/image-cdn.ts

@@ -0,0 +1,17 @@
+// this file is CJS because we add a `require` polyfill banner that attempt to use node:module in ESM modules
+// this later cause problems because Next.js will use this file in browser context where node:module is not available
+// ideally we would not add banner for this file and the we could make it ESM, but currently there is no conditional banners
+// in esbuild, only workaround in form of this proof of concept https://www.npmjs.com/package/esbuild-plugin-transform-hook
+// (or rolling our own esbuild plugin for that)
+
+import type { ImageLoader } from 'next/dist/shared/lib/image-external.js'
+
+const netlifyImageLoader: ImageLoader = ({ src, width, quality }) => {
+  const url = new URL(`.netlify/images`, 'http://n')
+  url.searchParams.set('url', src)
+  url.searchParams.set('w', width.toString())
+  url.searchParams.set('q', (quality || 75).toString())
+  return url.pathname + url.search
+}
+
+export default netlifyImageLoader

src/adapter/next-image-loader.cts

@@ -0,0 +1,4 @@
+import type { NextAdapter } from 'next-with-adapters'
+
+export type OnBuildCompleteContext = Parameters<Required<NextAdapter>['onBuildComplete']>[0]
+export type NextConfigComplete = OnBuildCompleteContext['config']

src/adapter/types.ts

@@ -1,4 +1,5 @@
-import { rm } from 'fs/promises'
+import { rm } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 
 import type { NetlifyPluginOptions } from '@netlify/build'
 import { trace } from '@opentelemetry/api'
@@ -65,7 +66,7 @@ export const onPreBuild = async (options: NetlifyPluginOptions) => {
   // We will have a build plugin that will contain the adapter, we will still use some build plugin features
   // for operations that are more idiomatic to do in build plugin rather than adapter due to helpers we can
   // use in a build plugin context.
-  process.env.NEXT_ADAPTER_PATH = `@netlify/plugin-nextjs/dist/adapter.js`
+  process.env.NEXT_ADAPTER_PATH = fileURLToPath(import.meta.resolve(`./adapter/adapter.js`))
 }
 
 export const onBuild = async (options: NetlifyPluginOptions) => {