generate pages and app handler from adapters and not standalone

Author: pieh

src/adapter/adapter-handler.ts

@@ -0,0 +1,75 @@
+import type { IncomingMessage, OutgoingHttpHeaders, ServerResponse } from 'node:http'
+
+import { ComputeJsOutgoingMessage, toComputeResponse, toReqRes } from '@fastly/http-compute-js'
+import type { Context } from '@netlify/functions'
+
+/**
+ * When Next.js proxies requests externally, it writes the response back as-is.
+ * In some cases, this includes Transfer-Encoding: chunked.
+ * This triggers behaviour in @fastly/http-compute-js to separate chunks with chunk delimiters, which is not what we want at this level.
+ * We want Lambda to control the behaviour around chunking, not this.
+ * This workaround removes the Transfer-Encoding header, which makes the library send the response as-is.
+ */
+const disableFaultyTransferEncodingHandling = (res: ComputeJsOutgoingMessage) => {
+  const originalStoreHeader = res._storeHeader
+  res._storeHeader = function _storeHeader(firstLine, headers) {
+    if (headers) {
+      if (Array.isArray(headers)) {
+        // eslint-disable-next-line no-param-reassign
+        headers = headers.filter(([header]) => header.toLowerCase() !== 'transfer-encoding')
+      } else {
+        delete (headers as OutgoingHttpHeaders)['transfer-encoding']
+      }
+    }
+
+    return originalStoreHeader.call(this, firstLine, headers)
+  }
+}
+
+type NextHandler = (
+  req: IncomingMessage,
+  res: ServerResponse,
+  ctx: {
+    waitUntil: (promise: Promise<unknown>) => void
+  },
+) => Promise<void | null>
+
+export async function runNextHandler(
+  request: Request,
+  context: Context,
+  nextHandler: NextHandler,
+): Promise<Response> {
+  const { req, res } = toReqRes(request)
+  // Work around a bug in http-proxy in next@<14.0.2
+  Object.defineProperty(req, 'connection', {
+    get() {
+      return {}
+    },
+  })
+  Object.defineProperty(req, 'socket', {
+    get() {
+      return {}
+    },
+  })
+
+  disableFaultyTransferEncodingHandling(res as unknown as ComputeJsOutgoingMessage)
+
+  nextHandler(req, res, {
+    waitUntil: context.waitUntil,
+  })
+    .then(() => {
+      console.log('handler done')
+    })
+    .catch((error) => {
+      console.error('handler error', error)
+    })
+    .finally(() => {
+      // Next.js relies on `close` event emitted by response to trigger running callback variant of `next/after`
+      // however @fastly/http-compute-js never actually emits that event - so we have to emit it ourselves,
+      // otherwise Next would never run the callback variant of `next/after`
+      res.emit('close')
+    })
+
+  const response = await toComputeResponse(res)
+  return response
+}

src/adapter/adapter.ts

@@ -10,6 +10,7 @@ import {
   onBuildComplete as onBuildCompleteForImageCDN,
 } from './image-cdn.js'
 import { onBuildComplete as onBuildCompleteForMiddleware } from './middleware.js'
+import { onBuildComplete as onBuildCompleteForPagesAndAppHandlers } from './pages-and-app-handlers.js'
 import { onBuildComplete as onBuildCompleteForStaticAssets } from './static-assets.js'
 import { FrameworksAPIConfig } from './types.js'
 
@@ -45,6 +46,10 @@ const adapter: NextAdapter = {
     )
     // TODO: verifyNetlifyForms
     frameworksAPIConfig = onBuildCompleteForHeaders(nextAdapterContext, frameworksAPIConfig)
+    frameworksAPIConfig = await onBuildCompleteForPagesAndAppHandlers(
+      nextAdapterContext,
+      frameworksAPIConfig,
+    )
 
     if (frameworksAPIConfig) {
       // write out config if there is any

src/adapter/constants.ts

@@ -11,4 +11,8 @@ export const GENERATOR = `${packageJSON.name}@${packageJSON.version}`
 
 export const NETLIFY_FRAMEWORKS_API_CONFIG_PATH = '.netlify/v1/config.json'
 export const NETLIFY_FRAMEWORKS_API_EDGE_FUNCTIONS = '.netlify/v1/edge-functions'
+export const NETLIFY_FRAMEWORKS_API_FUNCTIONS = '.netlify/v1/functions'
 export const NEXT_RUNTIME_STATIC_ASSETS = '.netlify/static'
+
+export const DISPLAY_NAME_MIDDLEWARE = 'Next.js Middleware Handler'
+export const DISPLAY_NAME_PAGES_AND_APP = 'Next.js Pages and App Router Handler'

src/adapter/middleware.ts

@@ -4,14 +4,19 @@ import { dirname, join, parse, relative } from 'node:path/posix'
 import { glob } from 'fast-glob'
 import { pathToRegexp } from 'path-to-regexp'
 
-import { GENERATOR, NETLIFY_FRAMEWORKS_API_EDGE_FUNCTIONS, PLUGIN_DIR } from './constants.js'
+import {
+  DISPLAY_NAME_MIDDLEWARE,
+  GENERATOR,
+  NETLIFY_FRAMEWORKS_API_EDGE_FUNCTIONS,
+  PLUGIN_DIR,
+} from './constants.js'
 import type { FrameworksAPIConfig, NextConfigComplete, OnBuildCompleteContext } from './types.js'
 
-const MIDDLEWARE_FUNCTION_NAME = 'middleware'
+const MIDDLEWARE_FUNCTION_INTERNAL_NAME = 'next_middleware'
 
 const MIDDLEWARE_FUNCTION_DIR = join(
   NETLIFY_FRAMEWORKS_API_EDGE_FUNCTIONS,
-  MIDDLEWARE_FUNCTION_NAME,
+  MIDDLEWARE_FUNCTION_INTERNAL_NAME,
 )
 
 export async function onBuildComplete(
@@ -199,7 +204,7 @@ const writeHandlerFile = async (
     export const config = ${JSON.stringify({
       cache: undefined,
       generator: GENERATOR,
-      name: 'Next.js Middleware Handler',
+      name: DISPLAY_NAME_MIDDLEWARE,
       pattern: augmentMatchers(middleware, nextConfig).map((matcher) => matcher.regexp),
     })}
     `,

src/adapter/pages-and-app-handlers.ts

@@ -0,0 +1,146 @@
+import { cp, mkdir, writeFile } from 'node:fs/promises'
+import { join, relative } from 'node:path/posix'
+
+import { glob } from 'fast-glob'
+
+import {
+  DISPLAY_NAME_PAGES_AND_APP,
+  GENERATOR,
+  NETLIFY_FRAMEWORKS_API_FUNCTIONS,
+  PLUGIN_DIR,
+} from './constants.js'
+import type { FrameworksAPIConfig, OnBuildCompleteContext } from './types.js'
+
+const PAGES_AND_APP_FUNCTION_INTERNAL_NAME = 'next_pages_and_app'
+
+const RUNTIME_DIR = '.netlify'
+
+const PAGES_AND_APP_FUNCTION_DIR = join(
+  NETLIFY_FRAMEWORKS_API_FUNCTIONS,
+  PAGES_AND_APP_FUNCTION_INTERNAL_NAME,
+)
+
+export async function onBuildComplete(
+  ctx: OnBuildCompleteContext,
+  frameworksAPIConfigArg: FrameworksAPIConfig,
+) {
+  const frameworksAPIConfig: FrameworksAPIConfig = frameworksAPIConfigArg ?? {}
+
+  const requiredFiles = new Set<string>()
+  const pathnameToEntry: Record<string, string> = {}
+
+  for (const outputs of [
+    ctx.outputs.pages,
+    ctx.outputs.pagesApi,
+    ctx.outputs.appPages,
+    ctx.outputs.appRoutes,
+  ]) {
+    if (outputs) {
+      for (const output of outputs) {
+        if (output.runtime === 'edge') {
+          // TODO: figure something out here
+          continue
+        }
+        for (const asset of Object.values(output.assets)) {
+          requiredFiles.add(asset)
+        }
+
+        requiredFiles.add(output.filePath)
+        pathnameToEntry[output.pathname] = relative(ctx.repoRoot, output.filePath)
+      }
+    }
+  }
+
+  await mkdir(PAGES_AND_APP_FUNCTION_DIR, { recursive: true })
+
+  for (const filePath of requiredFiles) {
+    await cp(filePath, join(PAGES_AND_APP_FUNCTION_DIR, relative(ctx.repoRoot, filePath)), {
+      recursive: true,
+    })
+  }
+
+  // copy needed runtime files
+
+  await copyRuntime(join(PAGES_AND_APP_FUNCTION_DIR, RUNTIME_DIR))
+
+  // generate needed runtime files
+  const entrypoint = /* javascript */ `
+  import { AsyncLocalStorage } from 'node:async_hooks'
+  import { createRequire } from 'node:module'
+  import { runNextHandler } from './${RUNTIME_DIR}/dist/adapter/adapter-handler.js'
+
+  globalThis.AsyncLocalStorage = AsyncLocalStorage
+
+  const require = createRequire(import.meta.url)
+
+  const pathnameToEntry = ${JSON.stringify(pathnameToEntry, null, 2)}
+
+  export default async function handler(request, context) {
+    const url = new URL(request.url)
+
+    const entry = pathnameToEntry[url.pathname]
+    if (!entry) {
+      return new Response('Not Found', { status: 404 })
+    }
+
+    const nextHandler = require('./' + entry).handler
+
+    return runNextHandler(request, context, nextHandler)
+  }
+
+  export const config = {
+    
+    path: ${JSON.stringify(Object.keys(pathnameToEntry), null, 2)},
+  }
+  `
+  await writeFile(
+    join(PAGES_AND_APP_FUNCTION_DIR, `${PAGES_AND_APP_FUNCTION_INTERNAL_NAME}.mjs`),
+    entrypoint,
+  )
+
+  // configuration
+  // TODO: ideally allow to set `includedFilesBasePath` via frameworks api config
+  // frameworksAPIConfig.functions ??= { '*': {} }
+  // frameworksAPIConfig.functions[PAGES_AND_APP_FUNCTION_INTERNAL_NAME] = {
+  //   node_bundler: 'none',
+  //   included_files: ['**'],
+  //   // we can't define includedFilesBasePath via Frameworks API
+  //   // included_files_base_path: PAGES_AND_APP_FUNCTION_DIR,
+  // }
+
+  // not using frameworks api because ... it doesn't allow to set includedFilesBasePath
+  await writeFile(
+    join(PAGES_AND_APP_FUNCTION_DIR, `${PAGES_AND_APP_FUNCTION_INTERNAL_NAME}.json`),
+    JSON.stringify(
+      {
+        config: {
+          name: DISPLAY_NAME_PAGES_AND_APP,
+          generator: GENERATOR,
+          node_bundler: 'none',
+          included_files: ['**'],
+          includedFilesBasePath: PAGES_AND_APP_FUNCTION_DIR,
+        },
+      },
+      null,
+      2,
+    ),
+  )
+
+  return frameworksAPIConfig
+}
+
+const copyRuntime = async (handlerDirectory: string): Promise<void> => {
+  const files = await glob('dist/**/*', {
+    cwd: PLUGIN_DIR,
+    ignore: ['**/*.test.ts'],
+    dot: true,
+  })
+  await Promise.all(
+    files.map((path) =>
+      cp(join(PLUGIN_DIR, path), join(handlerDirectory, path), { recursive: true }),
+    ),
+  )
+  // We need to create a package.json file with type: module to make sure that the runtime modules
+  // are handled correctly as ESM modules
+  await writeFile(join(handlerDirectory, 'package.json'), JSON.stringify({ type: 'module' }))
+}

src/index.ts

@@ -89,7 +89,7 @@ export const onBuild = async (options: NetlifyPluginOptions) => {
 
     await Promise.all([
       copyPrerenderedContent(ctx), // maybe this
-      createServerHandler(ctx), // not this while we use standalone
+      // createServerHandler(ctx), // not this while we use standalone
     ])
   })
 }