feat: support nx integrated setups inside runtime (#251)

* feat: support nx integrated setups inside runtime

* chore: update

* chore: update

* chore: fix last test

Author: lukasholzer

src/build/content/server.ts

@@ -12,6 +12,17 @@ import { PluginContext } from '../plugin-context.js'
  * Copy App/Pages Router Javascript needed by the server handler
  */
 export const copyNextServerCode = async (ctx: PluginContext): Promise<void> => {
+  // update the dist directory inside the required-server-files.json to work with
+  // nx monorepos and other setups where the dist directory is modified
+  const reqServerFilesPath = join(ctx.standaloneDir, '.next/required-server-files.json')
+  const reqServerFiles = JSON.parse(await readFile(reqServerFilesPath, 'utf-8'))
+
+  // only override it if it was set before to a different value
+  if (reqServerFiles.config.distDir) {
+    reqServerFiles.config.distDir = '.next'
+    await writeFile(reqServerFilesPath, JSON.stringify(reqServerFiles))
+  }
+
   const srcDir = join(ctx.standaloneDir, '.next')
   const destDir = join(ctx.serverHandlerDir, '.next')
 

src/build/functions/server.ts

@@ -53,7 +53,7 @@ const getHandlerFile = async (ctx: PluginContext): Promise<string> => {
     const template = await readFile(join(templatesDir, 'handler-monorepo.tmpl.js'), 'utf-8')
 
     return template
-      .replaceAll('{{cwd}}', join('/var/task', ctx.packagePath))
+      .replaceAll('{{cwd}}', ctx.lambdaWorkingDirectory)
       .replace('{{nextServerHandler}}', ctx.nextServerHandler)
   }
 

src/build/plugin-context.ts

@@ -65,11 +65,15 @@ export class PluginContext {
   /** Absolute path of the next runtime plugin directory */
   pluginDir = PLUGIN_DIR
 
+  get relPublishDir(): string {
+    return this.constants.PUBLISH_DIR ?? '.next'
+  }
+
   /** Absolute path of the publish directory */
   get publishDir(): string {
     // Does not need to be resolved with the package path as it is always a repository absolute path
     // hence including already the `PACKAGE_PATH` therefore we don't use the `this.resolve`
-    return resolve(this.constants.PUBLISH_DIR)
+    return resolve(this.relPublishDir)
   }
 
   /**
@@ -81,6 +85,13 @@ export class PluginContext {
     return this.constants.PACKAGE_PATH || ''
   }
 
+  /**
+   * The working directory inside the lambda that is used for monorepos to execute the serverless function
+   */
+  get lambdaWorkingDirectory(): string {
+    return join('/var/task', this.relPublishDir.replace(/\.next$/, ''))
+  }
+
   /**
    * Retrieves the root of the `.next/standalone` directory
    */
@@ -90,7 +101,12 @@ export class PluginContext {
 
   /** Retrieves the `.next/standalone/` directory monorepo aware */
   get standaloneDir(): string {
-    return join(this.standaloneRootDir, this.constants.PACKAGE_PATH || '')
+    // the standalone directory mimics the structure of the publish directory
+    // that said if the publish directory is `apps/my-app/.next` the standalone directory will be `.next/standalone/apps/my-app`
+    // if the publish directory is .next the standalone directory will be `.next/standalone`
+    // for nx workspaces where the publish directory is on the root of the repository
+    // like `dist/apps/my-app/.next` the standalone directory will be `.next/standalone/dist/apps/my-app`
+    return join(this.standaloneRootDir, this.relPublishDir.replace(/\.next$/, ''))
   }
 
   /**
@@ -124,11 +140,14 @@ export class PluginContext {
   }
 
   get serverHandlerDir(): string {
-    return join(this.serverHandlerRootDir, this.constants.PACKAGE_PATH || '')
+    return join(this.serverHandlerRootDir, this.relPublishDir.replace(/\.next$/, '') || '')
   }
 
   get nextServerHandler(): string {
-    return join(this.constants.PACKAGE_PATH || '', 'dist/run/handlers/server.js')
+    if (this.packagePath.length !== 0) {
+      return join(this.lambdaWorkingDirectory, 'dist/run/handlers/server.js')
+    }
+    return './dist/run/handlers/server.js'
   }
 
   /**

src/build/templates/handler-monorepo.tmpl.js

@@ -1,4 +1,4 @@
-import tracing, { trace } from '{{cwd}}/dist/run/handlers/tracing.js'
+import tracing, { trace } from '{{cwd}}dist/run/handlers/tracing.js'
 
 process.chdir('{{cwd}}')
 
@@ -8,36 +8,39 @@ export default async function (req, context) {
     tracing.start()
   }
 
-  return trace
-    .getTracer('Next.js Runtime')
-    .startActiveSpan('Next.js Server Handler', async (span) => {
-      try {
-        span.setAttributes({
-          'account.id': context.account.id,
-          'deploy.id': context.deploy.id,
-          'request.id': context.requestId,
-          'site.id': context.site.id,
-          'http.method': req.method,
-          'http.target': req.url,
-          monorepo: true,
-          cwd: '{{cwd}}',
-        })
-        if (!cachedHandler) {
-          const { default: handler } = await import('./{{nextServerHandler}}')
-          cachedHandler = handler
-        }
-        const response = await cachedHandler(req, context)
-        span.setAttributes({
-          'http.status_code': response.status,
-        })
-        return response
-      } catch (error) {
-        span.recordException(error)
-        throw error
-      } finally {
-        span.end()
+  /** @type {import('@opentelemetry/api').Tracer} */
+  const tracer = trace.getTracer('Next.js Runtime')
+  return tracer.startActiveSpan('Next.js Server Handler', async (span) => {
+    try {
+      span.setAttributes({
+        'account.id': context.account.id,
+        'deploy.id': context.deploy.id,
+        'request.id': context.requestId,
+        'site.id': context.site.id,
+        'http.method': req.method,
+        'http.target': req.url,
+        monorepo: true,
+        cwd: '{{cwd}}',
+      })
+      if (!cachedHandler) {
+        const { default: handler } = await import('{{nextServerHandler}}')
+        cachedHandler = handler
       }
-    })
+      const response = await cachedHandler(req, context)
+      span.setAttributes({
+        'http.status_code': response.status,
+      })
+      return response
+    } catch (error) {
+      span.recordException(error)
+      if (error instanceof Error) {
+        span.addEvent({ name: error.name, message: error.message })
+      }
+      throw error
+    } finally {
+      span.end()
+    }
+  })
 }
 
 export const config = {

src/build/templates/handler.tmpl.js

@@ -5,30 +5,36 @@ export default async function handler(req, context) {
   if (process.env.NETLIFY_OTLP_TRACE_EXPORTER_URL) {
     tracing.start()
   }
-  return trace
-    .getTracer('Next.js Runtime')
-    .startActiveSpan('Next.js Server Handler', async (span) => {
-      try {
-        span.setAttributes({
-          'account.id': context.account.id,
-          'deploy.id': context.deploy.id,
-          'request.id': context.requestId,
-          'site.id': context.site.id,
-          'http.method': req.method,
-          'http.target': req.url,
-        })
-        const response = await serverHandler(req, context)
-        span.setAttributes({
-          'http.status_code': response.status,
-        })
-        return response
-      } catch (error) {
-        span.recordException(error)
-        throw error
-      } finally {
-        span.end()
+
+  /** @type {import('@opentelemetry/api').Tracer} */
+  const tracer = trace.getTracer('Next.js Runtime')
+  return tracer.startActiveSpan('Next.js Server Handler', async (span) => {
+    try {
+      span.setAttributes({
+        'account.id': context.account.id,
+        'deploy.id': context.deploy.id,
+        'request.id': context.requestId,
+        'site.id': context.site.id,
+        'http.method': req.method,
+        'http.target': req.url,
+        monorepo: false,
+        cwd: process.cwd(),
+      })
+      const response = await serverHandler(req, context)
+      span.setAttributes({
+        'http.status_code': response.status,
+      })
+      return response
+    } catch (error) {
+      span.recordException(error)
+      if (error instanceof Error) {
+        span.addEvent({ name: error.name, message: error.message })
       }
-    })
+      throw error
+    } finally {
+      span.end()
+    }
+  })
 }
 
 export const config = {

src/run/handlers/server.ts

@@ -1,5 +1,5 @@
 import { toComputeResponse, toReqRes } from '@fastly/http-compute-js'
-import { trace } from '@opentelemetry/api'
+import { SpanStatusCode, trace } from '@opentelemetry/api'
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
 import type { WorkerRequestHandler } from 'next/dist/server/lib/types.js'
 
@@ -59,6 +59,13 @@ export default async (request: Request) => {
       logger.withError(error).error('next handler error')
       console.error(error)
       resProxy.statusCode = 500
+      span.recordException(error)
+      span.setAttribute('http.status_code', 500)
+      span.setStatus({
+        code: SpanStatusCode.ERROR,
+        message: error instanceof Error ? error.message : String(error),
+      })
+      span.end()
       resProxy.end('Internal Server Error')
     })
 

tests/e2e/nx-integrated.test.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test'
+import { test } from '../utils/create-e2e-fixture.js'
+
+test('Renders the Home page correctly', async ({ page, nxIntegrated }) => {
+  await page.goto(nxIntegrated.url)
+
+  await expect(page).toHaveTitle('Welcome to next-app')
+
+  const h1 = page.locator('h1')
+  await expect(h1).toHaveText('Hello there,\nWelcome next-app 👋')
+})

tests/fixtures/nx-integrated/.gitignore

@@ -0,0 +1,47 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache
+
+# Next.js
+.next
+
+# Local Netlify folder
+.netlify

tests/fixtures/nx-integrated/.npmrc

@@ -0,0 +1,3 @@
+strict-peer-dependencies=false
+auto-install-peers=true
+public-hoist-pattern[]=*

tests/fixtures/nx-integrated/apps/next-app/app/api/hello/route.ts

@@ -0,0 +1,3 @@
+export async function GET(request: Request) {
+  return new Response('Hello, from API!');
+}