feat: split up API Routes + use .nft.json files to make builds fast

packages/runtime/package.json

@@ -14,6 +14,7 @@
     "@netlify/esbuild": "0.14.39",
     "@netlify/functions": "^1.4.0",
     "@netlify/ipx": "^1.4.0",
+    "@vercel/nft": "^0.22.6",
     "@vercel/node-bridge": "^2.1.0",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",

packages/runtime/src/helpers/config.ts

@@ -8,6 +8,8 @@ import slash from 'slash'
 
 import { HANDLER_FUNCTION_NAME, IMAGE_FUNCTION_NAME, ODB_FUNCTION_NAME } from '../constants'
 
+import { SPLIT_API_ROUTES } from './flags'
+import type { ApiRouteConfig } from './functions'
 import type { RoutesManifest } from './types'
 import { escapeStringRegexp } from './utils'
 
@@ -98,10 +100,12 @@ export const configureHandlerFunctions = async ({
   netlifyConfig,
   publish,
   ignore = [],
+  apiRoutes,
 }: {
   netlifyConfig: NetlifyConfig
   publish: string
   ignore: Array<string>
+  apiRoutes: ApiRouteConfig[]
 }) => {
   const config = await getRequiredServerFiles(publish)
   const files = config.files || []
@@ -117,7 +121,7 @@ export const configureHandlerFunctions = async ({
     (moduleName) => !hasManuallyAddedModule({ netlifyConfig, moduleName }),
   )
 
-  ;[HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, '_api_*'].forEach((functionName) => {
+  const configureFunction = (functionName: string) => {
     netlifyConfig.functions[functionName] ||= { included_files: [], external_node_modules: [] }
     netlifyConfig.functions[functionName].node_bundler = 'nft'
     netlifyConfig.functions[functionName].included_files ||= []
@@ -156,7 +160,21 @@ export const configureHandlerFunctions = async ({
         netlifyConfig.functions[functionName].included_files.push(`!${moduleRoot}/**/*`)
       }
     })
-  })
+  }
+
+  configureFunction(HANDLER_FUNCTION_NAME)
+  configureFunction(ODB_FUNCTION_NAME)
+  if (SPLIT_API_ROUTES) {
+    for (const apiRoute of apiRoutes) {
+      const { functionName, includedFiles } = apiRoute
+      // TODO: add all the nextRoot/wasm/excludedModules stuff from above
+      netlifyConfig.functions[functionName] ||= { included_files: [] }
+      netlifyConfig.functions[functionName].node_bundler = 'none' as any
+      netlifyConfig.functions[functionName].included_files = includedFiles
+    }
+  } else {
+    configureFunction('_api_*')
+  }
 }
 
 interface BuildHeaderParams {

packages/runtime/src/helpers/files.ts

@@ -363,7 +363,7 @@ export const getDependenciesOfFile = async (file: string) => {
   if (!existsSync(nft)) {
     return []
   }
-  const dependencies = await readJson(nft, 'utf8')
+  const dependencies = await readJson(nft, 'utf8') as { files: string[] }
   return dependencies.files.map((dep) => resolve(dirname(file), dep))
 }
 

packages/runtime/src/helpers/flags.ts

@@ -0,0 +1,13 @@
+import destr from 'destr'
+
+/**
+ * If this flag is enabled, we generate one function per API Route.
+ * We'll also use the "none" bundling strategy where we fully rely on Next.js' `.nft.json` files.
+ * This should lead to smaller bundle sizes at the same speed, but is still experimental.
+ * 
+ * If disabled, we bundle all API Routes into a single function.
+ * This is fast, but can lead to large bundle sizes.
+ * 
+ * Enabled by default. Can be disabled by passing NEXT_SPLIT_API_ROUTES=false.
+ */
+export const SPLIT_API_ROUTES = destr(process.env.NEXT_SPLIT_API_ROUTES ?? 'true')

packages/runtime/src/helpers/functions.ts

@@ -1,11 +1,13 @@
 import type { NetlifyConfig, NetlifyPluginConstants } from '@netlify/build'
+import { nodeFileTrace } from '@vercel/nft'
 import bridgeFile from '@vercel/node-bridge'
 import chalk from 'chalk'
 import destr from 'destr'
 import { copyFile, ensureDir, existsSync, readJSON, writeFile, writeJSON } from 'fs-extra'
 import type { ImageConfigComplete, RemotePattern } from 'next/dist/shared/lib/image-config'
 import { outdent } from 'outdent'
-import { join, relative, resolve } from 'pathe'
+import { join, relative, resolve, dirname } from 'pathe'
+import glob from 'tiny-glob'
 
 import {
   HANDLER_FUNCTION_NAME,
@@ -21,14 +23,18 @@ import { getHandler } from '../templates/getHandler'
 import { getResolverForPages, getResolverForSourceFiles } from '../templates/getPageResolver'
 
 import { ApiConfig, ApiRouteType, extractConfigFromFile, isEdgeConfig } from './analysis'
-import { getSourceFileForPage } from './files'
+import { getSourceFileForPage, getDependenciesOfFile } from './files'
 import { writeFunctionConfiguration } from './functionsMetaData'
 import { getFunctionNameForPage } from './utils'
 
+// TODO, for reviewer: I added my properties here because that was the easiest way,
+// but is it the right spot for it?
 export interface ApiRouteConfig {
+  functionName: string
   route: string
   config: ApiConfig
   compiled: string
+  includedFiles: string[]
 }
 
 export const generateFunctions = async (
@@ -71,6 +77,7 @@ export const generateFunctions = async (
 
     const resolveSourceFile = (file: string) => join(publish, 'server', file)
 
+    // TODO: this should be unneeded once we use the `none` bundler
     const resolverSource = await getResolverForSourceFiles({
       functionsDir,
       // These extra pages are always included by Next.js
@@ -196,6 +203,26 @@ export const setupImageFunction = async ({
   }
 }
 
+const traceRequiredServerFiles = async (publish: string): Promise<string[]> => {
+  const requiredServerFilesPath = join(publish, 'required-server-files.json')
+  const { files } = (await readJSON(requiredServerFilesPath)) as { files: string[] }
+  files.push(requiredServerFilesPath)
+  return files
+}
+
+const traceNextServer = async (publish: string, baseDir: string): Promise<string[]> => {
+  const nextServerDeps = await getDependenciesOfFile(join(publish, 'next-server.js'))
+
+  // this takes quite a long while, but it's only done once per build.
+  // theoretically, it's only needed once per version of Next.js 🤷
+  const { fileList } = await nodeFileTrace(nextServerDeps, { base: '/' })
+
+  // for some reason, NFT detects /bin/sh. let's not upload that to lambda.
+  fileList.delete('bin/sh')
+
+  return [...fileList].map((f) => `/${f}`).map((file) => relative(baseDir, file))
+}
+
 /**
  * Look for API routes, and extract the config from the source file.
  */
@@ -207,10 +234,42 @@ export const getApiRouteConfigs = async (publish: string, baseDir: string): Prom
   const pagesDir = join(baseDir, 'pages')
   const srcPagesDir = join(baseDir, 'src', 'pages')
 
+  const [requiredServerFiles, nextServerFiles, followRedirectsFiles] = await Promise.all([
+    traceRequiredServerFiles(publish),
+    traceNextServer(publish, baseDir),
+
+    // used by our own bridge.js
+    glob(join(dirname(require.resolve('follow-redirects', { paths: [publish] })), '**', '*')),
+  ])
+
+  const commonDependencies = [...requiredServerFiles, ...nextServerFiles, ...followRedirectsFiles]
+
   return await Promise.all(
     apiRoutes.map(async (apiRoute) => {
       const filePath = getSourceFileForPage(apiRoute, [pagesDir, srcPagesDir])
-      return { route: apiRoute, config: await extractConfigFromFile(filePath), compiled: pages[apiRoute] }
+      const config = await extractConfigFromFile(filePath)
+
+      const functionName = getFunctionNameForPage(apiRoute, config.type === ApiRouteType.BACKGROUND)
+
+      const compiled = pages[apiRoute]
+      const compiledPath = join(publish, 'server', compiled)
+
+      const routeDependencies = await getDependenciesOfFile(compiledPath)
+      const includedFiles = [
+        ...commonDependencies,
+
+        compiledPath,
+        join('.netlify', 'functions-internal', functionName, '**', '*'),
+        ...routeDependencies,
+      ]
+
+      return {
+        functionName,
+        route: apiRoute,
+        config,
+        compiled,
+        includedFiles,
+      }
     }),
   )
 }

packages/runtime/src/helpers/utils.ts

@@ -208,10 +208,7 @@ export const getApiRewrites = (basePath: string, apiRoutes: Array<ApiRouteConfig
     }
     return {
       from,
-      to: `/.netlify/functions/${getFunctionNameForPage(
-        apiRoute.route,
-        apiRoute.config.type === ApiRouteType.BACKGROUND,
-      )}`,
+      to: `/.netlify/functions/${apiRoute.functionName}`,
       status: 200,
     }
   })

packages/runtime/src/index.ts

@@ -18,12 +18,14 @@ import {
 import { onPreDev } from './helpers/dev'
 import { writeEdgeFunctions, loadMiddlewareManifest, cleanupEdgeFunctions } from './helpers/edge'
 import { moveStaticPages, movePublicFiles, patchNextFiles } from './helpers/files'
+import { SPLIT_API_ROUTES } from './helpers/flags'
 import {
   generateFunctions,
   setupImageFunction,
   generatePagesResolver,
   getExtendedApiRouteConfigs,
   warnOnApiRoutes,
+  getApiRouteConfigs,
 } from './helpers/functions'
 import { generateRedirects, generateStaticRedirects } from './helpers/redirects'
 import { shouldSkip, isNextAuthInstalled, getCustomImageResponseHeaders, getRemotePatterns } from './helpers/utils'
@@ -65,6 +67,7 @@ const plugin: NetlifyPlugin = {
     netlifyConfig.build.environment.NEXT_PRIVATE_TARGET = 'server'
   },
 
+  // eslint-disable-next-line max-lines-per-function
   async onBuild({
     constants,
     netlifyConfig,
@@ -149,8 +152,16 @@ const plugin: NetlifyPlugin = {
 
     const buildId = readFileSync(join(publish, 'BUILD_ID'), 'utf8').trim()
 
-    await configureHandlerFunctions({ netlifyConfig, ignore, publish: relative(process.cwd(), publish) })
-    const apiRoutes = await getExtendedApiRouteConfigs(publish, appDir)
+    const apiRoutes = SPLIT_API_ROUTES
+      ? await getApiRouteConfigs(publish, appDir)
+      : await getExtendedApiRouteConfigs(publish, appDir)
+
+    await configureHandlerFunctions({
+      netlifyConfig,
+      ignore,
+      publish: relative(process.cwd(), publish),
+      apiRoutes,
+    })
 
     await generateFunctions(constants, appDir, apiRoutes)
     await generatePagesResolver(constants)

test/helpers/functions.spec.ts

@@ -1,24 +1,92 @@
-import { getExtendedApiRouteConfigs } from "../../packages/runtime/src/helpers/functions"
-import { describeCwdTmpDir, moveNextDist } from "../test-utils"
+import { getApiRouteConfigs, getExtendedApiRouteConfigs } from '../../packages/runtime/src/helpers/functions'
+import { describeCwdTmpDir, moveNextDist } from '../test-utils'
 
 describeCwdTmpDir('api route file analysis', () => {
   it('extracts correct route configs from source files', async () => {
+    await moveNextDist()
+    const configs = await getApiRouteConfigs('.next', process.cwd())
+    // Using a Set means the order doesn't matter
+    expect(new Set(configs.map(({ includedFiles, ...rest }) => rest))).toEqual(
+      new Set([
+        {
+          functionName: "_api_og-handler",
+          compiled: 'pages/api/og.js',
+          config: {
+            runtime: 'edge',
+          },
+          route: '/api/og',
+        },
+        {
+          functionName: "_api_enterPreview-handler",
+          compiled: 'pages/api/enterPreview.js',
+          config: {},
+          route: '/api/enterPreview',
+        },
+        {
+          functionName: "_api_exitPreview-handler",
+          compiled: 'pages/api/exitPreview.js',
+          config: {},
+          route: '/api/exitPreview',
+        },
+        {
+          functionName: "_api_hello-handler",
+          compiled: 'pages/api/hello.js',
+          config: {},
+          route: '/api/hello',
+        },
+        {
+          functionName: "_api_shows_params-SPLAT-handler",
+          compiled: 'pages/api/shows/[...params].js',
+          config: {},
+          route: '/api/shows/[...params]',
+        },
+        {
+          functionName: "_api_shows_id-PARAM-handler",
+          compiled: 'pages/api/shows/[id].js',
+          config: {},
+          route: '/api/shows/[id]',
+        },
+        {
+          functionName: "_api_hello-background-background",
+          compiled: 'pages/api/hello-background.js',
+          config: { type: 'experimental-background' },
+          route: '/api/hello-background',
+        },
+        {
+          functionName: "_api_hello-scheduled-handler",
+          compiled: 'pages/api/hello-scheduled.js',
+          config: { schedule: '@hourly', type: 'experimental-scheduled' },
+          route: '/api/hello-scheduled',
+        },
+        {
+          functionName: "_api_revalidate-handler",
+          compiled: 'pages/api/revalidate.js',
+          config: {},
+          route: '/api/revalidate',
+        },
+      ]),
+    )
+  })
+
+  it('only shows scheduled/background functions as extended funcs', async () => {
     await moveNextDist()
     const configs = await getExtendedApiRouteConfigs('.next', process.cwd())
     // Using a Set means the order doesn't matter
-    expect(new Set(configs)).toEqual(
+    expect(new Set(configs.map(({ includedFiles, ...rest }) => rest))).toEqual(
       new Set([
         {
+          functionName: "_api_hello-background-background",
           compiled: 'pages/api/hello-background.js',
           config: { type: 'experimental-background' },
           route: '/api/hello-background',
         },
         {
+          functionName: "_api_hello-scheduled-handler",
           compiled: 'pages/api/hello-scheduled.js',
           config: { schedule: '@hourly', type: 'experimental-scheduled' },
           route: '/api/hello-scheduled',
         },
       ]),
     )
   })
-})
+})