fix: fixes the usage of a custom distDir (#269)

* fix: fixes the usage of a custom distDir

* chore: cleanups

* chore: lint fix

* chore: 🧹🧹🧹

* chore: fix paths from newly added changes

* chore: fixes

Author: lukasholzer

README.md

@@ -3,6 +3,29 @@
 Next.js is supported natively on Netlify, and in most cases you will not need to install or
 configure anything. This repo includes the packages used to support Next.js on Netlify.
 
+## Lambda Folder structure:
+
+For a simple next.js app
+
+```
+/___netlify-server-handler
+├── .netlify
+│   ├── tags-manifest.json
+│   └── dist // the compiled runtime code
+│       └── run
+│           ├── handlers
+│           │   ├── server.js
+│           │   └── cache.cjs
+│           └── next.cjs
+├── .next // or distDir name from the next.config.js
+│   └── // content from standalone
+├── run-config.json // the config object from the required-server-files.json
+├── node_modules
+├── ___netlify-server-handler.json
+├── ___netlify-server-handler.mjs
+└── package.json
+```
+
 ## Testing
 
 ### Integration testing

src/build/content/server.test.ts

@@ -0,0 +1,95 @@
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+import { NetlifyPluginOptions } from '@netlify/build'
+import { expect, test, vi } from 'vitest'
+
+import { mockFileSystem } from '../../../tests/index.js'
+import { PluginContext } from '../plugin-context.js'
+
+import { copyNextServerCode } from './server.js'
+
+vi.mock('node:fs', async () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, unicorn/no-await-expression-member
+  const unionFs: any = (await import('unionfs')).default
+  const fs = await vi.importActual('node:fs')
+  unionFs.reset = () => {
+    unionFs.fss = [fs]
+  }
+
+  const united = unionFs.use(fs)
+  return { default: united, ...united }
+})
+
+vi.mock('node:fs/promises', async () => {
+  const fs = await import('node:fs')
+  return fs.promises
+})
+
+test('should not modify the required-server-files.json distDir on simple next app', async () => {
+  const reqServerFiles = JSON.stringify({ config: { distDir: '.next' } })
+  const reqServerPath = '.next/required-server-files.json'
+  const reqServerPathStandalone = join('.next/standalone', reqServerPath)
+  const { cwd } = mockFileSystem({
+    [reqServerPath]: reqServerFiles,
+    [reqServerPathStandalone]: reqServerFiles,
+  })
+  const ctx = new PluginContext({ constants: {} } as NetlifyPluginOptions)
+  await copyNextServerCode(ctx)
+  expect(await readFile(join(cwd, reqServerPathStandalone), 'utf-8')).toBe(reqServerFiles)
+})
+
+test('should not modify the required-server-files.json distDir on monorepo', async () => {
+  const reqServerFiles = JSON.stringify({ config: { distDir: '.next' } })
+  const reqServerPath = 'apps/my-app/.next/required-server-files.json'
+  const reqServerPathStandalone = join('apps/my-app/.next/standalone', reqServerPath)
+  const { cwd } = mockFileSystem({
+    [reqServerPath]: reqServerFiles,
+    [reqServerPathStandalone]: reqServerFiles,
+  })
+  const ctx = new PluginContext({
+    constants: {
+      PACKAGE_PATH: 'apps/my-app',
+    },
+  } as NetlifyPluginOptions)
+  await copyNextServerCode(ctx)
+  expect(await readFile(join(cwd, reqServerPathStandalone), 'utf-8')).toBe(reqServerFiles)
+})
+
+test('should not modify the required-server-files.json distDir on monorepo', async () => {
+  const reqServerFiles = JSON.stringify({ config: { distDir: '.next' } })
+  const reqServerPath = 'apps/my-app/.next/required-server-files.json'
+  const reqServerPathStandalone = join('apps/my-app/.next/standalone', reqServerPath)
+  const { cwd } = mockFileSystem({
+    [reqServerPath]: reqServerFiles,
+    [reqServerPathStandalone]: reqServerFiles,
+  })
+  const ctx = new PluginContext({
+    constants: {
+      PACKAGE_PATH: 'apps/my-app',
+    },
+  } as NetlifyPluginOptions)
+  await copyNextServerCode(ctx)
+  expect(await readFile(join(cwd, reqServerPathStandalone), 'utf-8')).toBe(reqServerFiles)
+})
+
+// case of nx-integrated
+test('should modify the required-server-files.json distDir on distDir outside of packagePath', async () => {
+  const reqServerFiles = JSON.stringify({ config: { distDir: '../../dist/apps/my-app/.next' } })
+  const reqServerPath = 'dist/apps/my-app/.next/required-server-files.json'
+  const reqServerPathStandalone = join('dist/apps/my-app/.next/standalone', reqServerPath)
+  const { cwd } = mockFileSystem({
+    [reqServerPath]: reqServerFiles,
+    [reqServerPathStandalone]: reqServerFiles,
+  })
+  const ctx = new PluginContext({
+    constants: {
+      PACKAGE_PATH: 'apps/my-app',
+      PUBLISH_DIR: 'dist/apps/my-app/.next',
+    },
+  } as NetlifyPluginOptions)
+  await copyNextServerCode(ctx)
+  expect(await readFile(join(cwd, reqServerPathStandalone), 'utf-8')).toBe(
+    '{"config":{"distDir":".next"}}',
+  )
+})

src/build/content/server.ts

@@ -6,6 +6,7 @@ import { dirname, join, resolve } from 'node:path'
 
 import glob from 'fast-glob'
 
+import { RUN_CONFIG } from '../../run/constants.js'
 import { PluginContext } from '../plugin-context.js'
 
 /**
@@ -14,17 +15,38 @@ import { PluginContext } from '../plugin-context.js'
 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 reqServerFilesPath = join(
+    ctx.standaloneRootDir,
+    ctx.relPublishDir,
+    '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'
+  // if the resolved dist folder does not match the distDir of the required-server-files.json
+  // this means the path got altered by a plugin like nx and contained ../../ parts so we have to reset it
+  // to point to the correct lambda destination
+  if (
+    ctx.distDir.replace(new RegExp(`^${ctx.packagePath}/?`), '') !== reqServerFiles.config.distDir
+  ) {
+    // set the distDir to the latest path portion of the publish dir
+    reqServerFiles.config.distDir = ctx.nextDistDir
     await writeFile(reqServerFilesPath, JSON.stringify(reqServerFiles))
   }
 
-  const srcDir = join(ctx.standaloneDir, '.next')
-  const destDir = join(ctx.serverHandlerDir, '.next')
+  // ensure the directory exists before writing to it
+  await mkdir(ctx.serverHandlerDir, { recursive: true })
+  // write our run-config.json to the root dir so that we can easily get the runtime config of the required-server-files.json
+  // without the need to know about the monorepo or distDir configuration upfront.
+  await writeFile(
+    join(ctx.serverHandlerDir, RUN_CONFIG),
+    JSON.stringify(reqServerFiles.config),
+    'utf-8',
+  )
+
+  const srcDir = join(ctx.standaloneDir, ctx.nextDistDir)
+  // if the distDir got resolved and altered use the nextDistDir instead
+  const nextFolder = ctx.distDir === ctx.buildConfig.distDir ? ctx.distDir : ctx.nextDistDir
+  const destDir = join(ctx.serverHandlerDir, nextFolder)
 
   const paths = await glob(
     [`*`, `server/*`, `server/chunks/*`, `server/edge-chunks/*`, `server/+(app|pages)/**/*.js`],
@@ -96,9 +118,9 @@ async function recreateNodeModuleSymlinks(src: string, dest: string, org?: strin
 export const copyNextDependencies = async (ctx: PluginContext): Promise<void> => {
   const entries = await readdir(ctx.standaloneDir)
   const promises: Promise<void>[] = entries.map(async (entry) => {
-    // copy all except the package.json and .next folder as this is handled in a separate function
+    // copy all except the package.json and distDir (.next) folder as this is handled in a separate function
     // this will include the node_modules folder as well
-    if (entry === 'package.json' || entry === '.next') {
+    if (entry === 'package.json' || entry === ctx.nextDistDir) {
       return
     }
     const src = join(ctx.standaloneDir, entry)

src/build/functions/edge.ts

@@ -38,7 +38,7 @@ const copyRuntime = async (ctx: PluginContext, handlerDirectory: string): Promis
 }
 
 const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefinition) => {
-  const nextConfig = await ctx.getBuildConfig()
+  const nextConfig = ctx.buildConfig
   const handlerName = getHandlerName({ name })
   const handlerDirectory = join(ctx.edgeFunctionsDir, handlerName)
   const handlerRuntimeDirectory = join(handlerDirectory, 'edge-runtime')
@@ -81,7 +81,7 @@ const copyHandlerDependencies = async (
   ctx: PluginContext,
   { name, files, wasm }: NextDefinition,
 ) => {
-  const srcDir = join(ctx.standaloneDir, '.next')
+  const srcDir = join(ctx.standaloneDir, ctx.nextDistDir)
   const destDir = join(ctx.edgeFunctionsDir, getHandlerName({ name }))
 
   await Promise.all(

src/build/functions/server.ts

@@ -6,11 +6,12 @@ import { glob } from 'fast-glob'
 import { copyNextDependencies, copyNextServerCode, writeTagsManifest } from '../content/server.js'
 import { PluginContext, SERVER_HANDLER_NAME } from '../plugin-context.js'
 
+/** Copies the runtime dist folder to the lambda */
 const copyHandlerDependencies = async (ctx: PluginContext) => {
   const fileList = await glob('dist/**/*', { cwd: ctx.pluginDir })
   await Promise.all(
     [...fileList].map((path) =>
-      cp(join(ctx.pluginDir, path), join(ctx.serverHandlerDir, path), {
+      cp(join(ctx.pluginDir, path), join(ctx.serverHandlerDir, '.netlify', path), {
         recursive: true,
         force: true,
       }),

src/build/image-cdn.test.ts

@@ -1,42 +1,31 @@
 /* eslint-disable id-length */
 import type { NetlifyPluginOptions } from '@netlify/build'
 import type { NextConfigComplete } from 'next/dist/server/config-shared.js'
-import { beforeEach, describe, expect, test, vi, TestContext } from 'vitest'
+import { TestContext, beforeEach, describe, expect, test } from 'vitest'
 
 import { setImageConfig } from './image-cdn.js'
 import { PluginContext } from './plugin-context.js'
 
-type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>
-    }
-  : T
-
 type ImageCDNTestContext = TestContext & {
   pluginContext: PluginContext
-  mockNextConfig?: DeepPartial<NextConfigComplete>
 }
 
 describe('Image CDN', () => {
   beforeEach<ImageCDNTestContext>((ctx) => {
-    ctx.mockNextConfig = undefined
     ctx.pluginContext = new PluginContext({
       netlifyConfig: {
         redirects: [],
       },
     } as unknown as NetlifyPluginOptions)
-    vi.spyOn(ctx.pluginContext, 'getBuildConfig').mockImplementation(() =>
-      Promise.resolve((ctx.mockNextConfig ?? {}) as NextConfigComplete),
-    )
   })
 
   test<ImageCDNTestContext>('adds redirect to Netlify Image CDN when default image loader is used', async (ctx) => {
-    ctx.mockNextConfig = {
+    ctx.pluginContext._buildConfig = {
       images: {
         path: '/_next/image',
         loader: 'default',
       },
-    }
+    } as NextConfigComplete
 
     await setImageConfig(ctx.pluginContext)
 
@@ -57,13 +46,13 @@ describe('Image CDN', () => {
   })
 
   test<ImageCDNTestContext>('does not add redirect to Netlify Image CDN when non-default loader is used', async (ctx) => {
-    ctx.mockNextConfig = {
+    ctx.pluginContext._buildConfig = {
       images: {
         path: '/_next/image',
         loader: 'custom',
         loaderFile: './custom-loader.js',
       },
-    }
+    } as NextConfigComplete
 
     await setImageConfig(ctx.pluginContext)
 
@@ -84,7 +73,7 @@ describe('Image CDN', () => {
   })
 
   test<ImageCDNTestContext>('handles custom images.path', async (ctx) => {
-    ctx.mockNextConfig = {
+    ctx.pluginContext._buildConfig = {
       images: {
         // Next.js automatically adds basePath to images.path (when user does not set custom `images.path` in their config)
         // if user sets custom `images.path` - it will be used as-is (so user need to cover their basePath by themselves
@@ -94,7 +83,7 @@ describe('Image CDN', () => {
         path: '/base/path/_custom/image/endpoint',
         loader: 'default',
       },
-    }
+    } as NextConfigComplete
 
     await setImageConfig(ctx.pluginContext)
 

src/build/image-cdn.ts

@@ -6,7 +6,7 @@ import { PluginContext } from './plugin-context.js'
 export const setImageConfig = async (ctx: PluginContext): Promise<void> => {
   const {
     images: { path: imageEndpointPath, loader: imageLoader },
-  } = await ctx.getBuildConfig()
+  } = ctx.buildConfig
 
   if (imageLoader === 'default') {
     ctx.netlifyConfig.redirects.push({