feat: split api routes into separate functions

Author: ascorbic

plugin/src/helpers/analysis.ts

@@ -4,7 +4,13 @@ import { relative } from 'path'
 import { extractExportedConstValue, UnsupportedValueError } from 'next/dist/build/analysis/extract-const-value'
 import { parseModule } from 'next/dist/build/analysis/parse-module'
 
-export const extractConfigFromFile = async (apiFilePath: string): Promise<Record<string, unknown>> => {
+export interface ApiConfig {
+  runtime?: 'node' | 'experimental-edge'
+  background?: boolean
+  schedule?: string
+}
+
+export const extractConfigFromFile = async (apiFilePath: string): Promise<ApiConfig> => {
   const fileContent = await fs.promises.readFile(apiFilePath, 'utf8')
   if (!fileContent.includes('config')) {
     return {}

plugin/src/helpers/config.ts

@@ -89,7 +89,7 @@ export const configureHandlerFunctions = async ({ netlifyConfig, publish, ignore
   netlifyConfig.functions._ipx.node_bundler = 'nft'
 
   /* eslint-enable no-underscore-dangle */
-  ;[HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME].forEach((functionName) => {
+  ;[HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, '_api_*'].forEach((functionName) => {
     netlifyConfig.functions[functionName] ||= { included_files: [], external_node_modules: [] }
     netlifyConfig.functions[functionName].node_bundler = 'nft'
     netlifyConfig.functions[functionName].included_files ||= []

plugin/src/helpers/files.ts

@@ -8,7 +8,7 @@ import globby from 'globby'
 import { PrerenderManifest } from 'next/dist/build'
 import { outdent } from 'outdent'
 import pLimit from 'p-limit'
-import { join } from 'pathe'
+import { join, resolve } from 'pathe'
 import slash from 'slash'
 
 import { MINIMUM_REVALIDATE_SECONDS, DIVIDER } from '../constants'
@@ -325,6 +325,24 @@ const getServerFile = (root: string, includeBase = true) => {
   return findModuleFromBase({ candidates, paths: [root] })
 }
 
+export const getSourceFileForPage = (page: string, root: string) => {
+  for (const extension of ['ts', 'js']) {
+    const file = join(root, `${page}.${extension}`)
+    if (existsSync(file)) {
+      return file
+    }
+  }
+}
+
+export const getDependenciesOfFile = async (file: string) => {
+  const nft = `${file}.nft.json`
+  if (!existsSync(nft)) {
+    return []
+  }
+  const dependencies = await readJson(nft, 'utf8')
+  return dependencies.files.map((dep) => resolve(file, dep))
+}
+
 const baseServerReplacements: Array<[string, string]> = [
   [`let ssgCacheKey = `, `let ssgCacheKey = process.env._BYPASS_SSG || `],
 ]

plugin/src/helpers/functions.ts

@@ -1,29 +1,60 @@
 import type { NetlifyConfig, NetlifyPluginConstants } from '@netlify/build'
 import bridgeFile from '@vercel/node-bridge'
-import { copyFile, ensureDir, writeFile, writeJSON } from 'fs-extra'
+import { copyFile, ensureDir, readJSON, writeFile, writeJSON } from 'fs-extra'
 import type { ImageConfigComplete, RemotePattern } from 'next/dist/shared/lib/image-config'
 import { join, relative, resolve } from 'pathe'
 
 import { HANDLER_FUNCTION_NAME, ODB_FUNCTION_NAME, IMAGE_FUNCTION_NAME, DEFAULT_FUNCTIONS_SRC } from '../constants'
+import { getApiHandler } from '../templates/getApiHandler'
 import { getHandler } from '../templates/getHandler'
-import { getPageResolver } from '../templates/getPageResolver'
+import { getPageResolver, getSinglePageResolver } from '../templates/getPageResolver'
+
+import { ApiConfig, extractConfigFromFile } from './analysis'
+import { getSourceFileForPage } from './files'
+import { getFunctionNameForPage } from './utils'
+
+export interface ApiRouteConfig {
+  route: string
+  config: ApiConfig
+  compiled: string
+}
 
 export const generateFunctions = async (
   { FUNCTIONS_SRC = DEFAULT_FUNCTIONS_SRC, INTERNAL_FUNCTIONS_SRC, PUBLISH_DIR }: NetlifyPluginConstants,
   appDir: string,
+  apiRoutes: Array<ApiRouteConfig>,
 ): Promise<void> => {
-  const functionsDir = INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC
-  const functionDir = join(process.cwd(), functionsDir, HANDLER_FUNCTION_NAME)
-  const publishDir = relative(functionDir, resolve(PUBLISH_DIR))
+  const publish = resolve(PUBLISH_DIR)
+  const functionsDir = resolve(INTERNAL_FUNCTIONS_SRC || FUNCTIONS_SRC)
+  console.log({ functionsDir })
+  const functionDir = join(functionsDir, HANDLER_FUNCTION_NAME)
+  const publishDir = relative(functionDir, publish)
 
-  const writeHandler = async (func: string, isODB: boolean) => {
+  for (const { route, config, compiled } of apiRoutes) {
+    const apiHandlerSource = await getApiHandler({ page: route, schedule: config.schedule })
+    const functionName = getFunctionNameForPage(route, config.background)
+    await ensureDir(join(functionsDir, functionName))
+    await writeFile(join(functionsDir, functionName, `${functionName}.js`), apiHandlerSource)
+    await copyFile(bridgeFile, join(functionsDir, functionName, 'bridge.js'))
+    await copyFile(
+      join(__dirname, '..', '..', 'lib', 'templates', 'handlerUtils.js'),
+      join(functionsDir, functionName, 'handlerUtils.js'),
+    )
+    const resolverSource = await getSinglePageResolver({
+      functionsDir,
+      sourceFile: join(publish, 'server', compiled),
+    })
+    await writeFile(join(functionsDir, functionName, 'pages.js'), resolverSource)
+  }
+
+  const writeHandler = async (functionName: string, isODB: boolean) => {
     const handlerSource = await getHandler({ isODB, publishDir, appDir: relative(functionDir, appDir) })
-    await ensureDir(join(functionsDir, func))
-    await writeFile(join(functionsDir, func, `${func}.js`), handlerSource)
-    await copyFile(bridgeFile, join(functionsDir, func, 'bridge.js'))
+    await ensureDir(join(functionsDir, functionName))
+    await writeFile(join(functionsDir, functionName, `${functionName}.js`), handlerSource)
+    await copyFile(bridgeFile, join(functionsDir, functionName, 'bridge.js'))
     await copyFile(
       join(__dirname, '..', '..', 'lib', 'templates', 'handlerUtils.js'),
-      join(functionsDir, func, 'handlerUtils.js'),
+      join(functionsDir, functionName, 'handlerUtils.js'),
     )
   }
 
@@ -105,3 +136,15 @@ export const setupImageFunction = async ({
     })
   }
 }
+
+export const getApiRouteConfigs = async (publish: string, baseDir: string): Promise<Array<ApiRouteConfig>> => {
+  const pages = await readJSON(join(publish, 'server', 'pages-manifest.json'))
+  const apiRoutes = Object.keys(pages).filter((page) => page.startsWith('/api/'))
+  const pagesDir = join(baseDir, 'pages')
+  return Promise.all(
+    apiRoutes.map(async (apiRoute) => {
+      const filePath = getSourceFileForPage(apiRoute, pagesDir)
+      return { route: apiRoute, config: await extractConfigFromFile(filePath), compiled: pages[apiRoute] }
+    }),
+  )
+}

plugin/src/helpers/redirects.ts

@@ -10,6 +10,7 @@ import { join } from 'pathe'
 import { HANDLER_FUNCTION_PATH, HIDDEN_PATHS, ODB_FUNCTION_PATH } from '../constants'
 
 import { getMiddleware } from './files'
+import { ApiRouteConfig } from './functions'
 import { RoutesManifest } from './types'
 import {
   getApiRewrites,
@@ -219,10 +220,12 @@ export const generateRedirects = async ({
   netlifyConfig,
   nextConfig: { i18n, basePath, trailingSlash, appDir },
   buildId,
+  apiRoutes,
 }: {
   netlifyConfig: NetlifyConfig
   nextConfig: Pick<NextConfig, 'i18n' | 'basePath' | 'trailingSlash' | 'appDir'>
   buildId: string
+  apiRoutes: Array<ApiRouteConfig>
 }) => {
   const { dynamicRoutes: prerenderedDynamicRoutes, routes: prerenderedStaticRoutes }: PrerenderManifest =
     await readJSON(join(netlifyConfig.build.publish, 'prerender-manifest.json'))
@@ -247,7 +250,7 @@ export const generateRedirects = async ({
   // This is only used in prod, so dev uses `next dev` directly
   netlifyConfig.redirects.push(
     // API routes always need to be served from the regular function
-    ...getApiRewrites(basePath),
+    ...getApiRewrites(basePath, apiRoutes),
     // Preview mode gets forced to the function, to bypass pre-rendered pages, but static files need to be skipped
     ...(await getPreviewRewrites({ basePath, appDir })),
   )

plugin/src/helpers/utils.ts

@@ -1,11 +1,31 @@
+/* eslint-disable max-lines */
 import type { NetlifyConfig } from '@netlify/build'
 import globby from 'globby'
 import { join } from 'pathe'
 
 import { OPTIONAL_CATCH_ALL_REGEX, CATCH_ALL_REGEX, DYNAMIC_PARAMETER_REGEX, HANDLER_FUNCTION_PATH } from '../constants'
 
+import type { ApiRouteConfig } from './functions'
 import { I18n } from './types'
 
+const RESERVED_FILENAME = /[^\w_-]/g
+
+//
+//    // Replace catch-all, e.g., [...slug]
+//    .replace(CATCH_ALL_REGEX, '/:$1/*')
+//    // Replace optional catch-all, e.g., [[...slug]]
+//    .replace(OPTIONAL_CATCH_ALL_REGEX, '/*')
+//    // Replace dynamic parameters, e.g., [id]
+//    .replace(DYNAMIC_PARAMETER_REGEX, '/:$1'),
+//
+
+export const getFunctionNameForPage = (page: string, background = false) =>
+  `${page
+    .replace(CATCH_ALL_REGEX, '_$1-SPLAT')
+    .replace(OPTIONAL_CATCH_ALL_REGEX, '-SPLAT')
+    .replace(DYNAMIC_PARAMETER_REGEX, '_$1-PARAM')
+    .replace(RESERVED_FILENAME, '_')}-${background ? 'background' : 'handler'}`
+
 export const toNetlifyRoute = (nextRoute: string): Array<string> => {
   const netlifyRoutes = [nextRoute]
 
@@ -117,18 +137,35 @@ export const redirectsForNextRouteWithData = ({
     force,
   }))
 
-export const getApiRewrites = (basePath) => [
-  {
-    from: `${basePath}/api`,
-    to: HANDLER_FUNCTION_PATH,
-    status: 200,
-  },
-  {
-    from: `${basePath}/api/*`,
-    to: HANDLER_FUNCTION_PATH,
-    status: 200,
-  },
-]
+export const getApiRewrites = (basePath: string, apiRoutes: Array<ApiRouteConfig>) => {
+  const apiRewrites = apiRoutes.map((apiRoute) => {
+    const [from] = toNetlifyRoute(`${basePath}${apiRoute.route}`)
+
+    // Scheduled functions can't be invoked directly
+    if (apiRoute.config.schedule) {
+      return { from, to: '/404.html', status: 404 }
+    }
+    return {
+      from,
+      to: `/.netlify/functions/${getFunctionNameForPage(apiRoute.route, apiRoute.config.background)}`,
+      status: 200,
+    }
+  })
+
+  return [
+    ...apiRewrites,
+    {
+      from: `${basePath}/api`,
+      to: HANDLER_FUNCTION_PATH,
+      status: 200,
+    },
+    {
+      from: `${basePath}/api/*`,
+      to: HANDLER_FUNCTION_PATH,
+      status: 200,
+    },
+  ]
+}
 
 export const getPreviewRewrites = async ({ basePath, appDir }) => {
   const publicFiles = await globby('**/*', { cwd: join(appDir, 'public') })
@@ -185,3 +222,4 @@ export const isNextAuthInstalled = (): boolean => {
     return false
   }
 }
+/* eslint-enable max-lines */

plugin/src/index.ts

@@ -17,7 +17,7 @@ import {
 } from './helpers/config'
 import { updateConfig, writeEdgeFunctions, loadMiddlewareManifest } from './helpers/edge'
 import { moveStaticPages, movePublicFiles, patchNextFiles, unpatchNextFiles } from './helpers/files'
-import { generateFunctions, setupImageFunction, generatePagesResolver } from './helpers/functions'
+import { generateFunctions, setupImageFunction, generatePagesResolver, getApiRouteConfigs } from './helpers/functions'
 import { generateRedirects, generateStaticRedirects } from './helpers/redirects'
 import { shouldSkip, isNextAuthInstalled } from './helpers/utils'
 import {
@@ -106,13 +106,14 @@ const plugin: NetlifyPlugin = {
     const buildId = readFileSync(join(publish, 'BUILD_ID'), 'utf8').trim()
 
     await configureHandlerFunctions({ netlifyConfig, ignore, publish: relative(process.cwd(), publish) })
+    const apiRoutes = await getApiRouteConfigs(publish, appDir)
 
-    await generateFunctions(constants, appDir)
+    await generateFunctions(constants, appDir, apiRoutes)
     await generatePagesResolver({ target, constants })
 
     await movePublicFiles({ appDir, outdir, publish })
 
-    await patchNextFiles(basePath)
+    await patchNextFiles(appDir)
 
     if (!process.env.SERVE_STATIC_FILES_FROM_ORIGIN) {
       await moveStaticPages({ target, netlifyConfig, i18n, basePath })
@@ -135,6 +136,7 @@ const plugin: NetlifyPlugin = {
       netlifyConfig,
       nextConfig: { basePath, i18n, trailingSlash, appDir },
       buildId,
+      apiRoutes,
     })
 
     // We call this even if we don't have edge functions enabled because we still use it for images