fix(nextjs): produce correct next.config.js file for production server

e2e/next/src/next.test.ts

@@ -26,22 +26,18 @@ describe('Next.js Applications', () => {
   let originalEnv: string;
   let packageManager;
 
-  beforeAll(() => {
+  beforeEach(() => {
     proj = newProject();
     packageManager = detectPackageManager(tmpProjPath());
-  });
-
-  afterAll(() => cleanupProject());
-
-  beforeEach(() => {
     originalEnv = process.env.NODE_ENV;
   });
 
   afterEach(() => {
     process.env.NODE_ENV = originalEnv;
+    cleanupProject();
   });
 
-  it('should generate app + libs', async () => {
+  it('xxxx should generate app + libs', async () => {
     const appName = uniq('app');
     const nextLib = uniq('nextlib');
     const jsLib = uniq('tslib');
@@ -169,6 +165,24 @@ describe('Next.js Applications', () => {
       `dist/apps/${appName}/public/a/b.txt`,
       `dist/apps/${appName}/public/shared/ui/hello.txt`
     );
+
+    // Check that the output is self-contained (i.e. can run outside of workspace)
+    const distPath = joinPathFragments(tmpProjPath(), 'dist/apps', appName);
+    const pmc = getPackageManagerCommand();
+    runCommand(`${pmc.ciInstall}`, {
+      cwd: distPath,
+    });
+    await runCommandUntil(
+      `npx next start --port=4200`,
+      (output) => {
+        return output.includes('started server');
+      },
+      {
+        cwd: distPath,
+      }
+    );
+    const pageData = await getData(4200, '/');
+    expect(pageData).toContain('Hello Nx');
   }, 300_000);
 
   it('should build and install pruned lock file', () => {

e2e/utils/command-utils.ts

@@ -212,7 +212,8 @@ export function runCommandAsync(
 
 export function runCommandUntil(
   command: string,
-  criteria: (output: string) => boolean
+  criteria: (output: string) => boolean,
+  options?: Partial<ExecSyncOptions>
 ): Promise<ChildProcess> {
   const pm = getPackageManagerCommand();
   const p = exec(`${pm.runNx} ${command}`, {
@@ -221,8 +222,10 @@ export function runCommandUntil(
     env: {
       CI: 'true',
       ...getStrippedEnvironmentVariables(),
+      ...options.env,
       FORCE_COLOR: 'false',
     },
+    ...options,
   });
   return new Promise((res, rej) => {
     let output = '';

packages/next/package.json

@@ -35,22 +35,21 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.14.5",
-    "@nrwl/cypress": "file:../cypress",
     "@nrwl/devkit": "file:../devkit",
-    "@nrwl/jest": "file:../jest",
     "@nrwl/js": "file:../js",
     "@nrwl/linter": "file:../linter",
     "@nrwl/react": "file:../react",
-    "@nrwl/webpack": "file:../webpack",
     "@nrwl/workspace": "file:../workspace",
     "@svgr/webpack": "^6.1.2",
     "chalk": "^4.1.0",
+    "copy-webpack-plugin": "^10.2.4",
     "dotenv": "~10.0.0",
     "fs-extra": "^11.1.0",
     "ignore": "^5.0.4",
     "semver": "7.3.4",
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.1.2",
+    "tsconfig-paths-webpack-plugin": "4.0.0",
     "url-loader": "^4.1.1",
     "webpack-merge": "^5.8.0"
   },

packages/next/plugins/with-nx.ts

@@ -13,8 +13,15 @@ import {
   DependentBuildableProjectNode,
 } from '@nrwl/js/src/utils/buildable-libs-utils';
 import type { NextConfig } from 'next';
-
-import path = require('path');
+import {
+  PHASE_DEVELOPMENT_SERVER,
+  PHASE_PRODUCTION_BUILD,
+  PHASE_PRODUCTION_SERVER,
+  PHASE_EXPORT,
+  PHASE_TEST,
+} from 'next/constants';
+
+import * as path from 'path';
 import { createWebpackConfig } from '../src/utils/config';
 import { NextBuildBuilderOptions } from '../src/utils/types';
 export interface WithNxOptions extends NextConfig {
@@ -110,65 +117,79 @@ function getNxContext(
   }
 }
 
+type Phase =
+  | typeof PHASE_DEVELOPMENT_SERVER
+  | typeof PHASE_PRODUCTION_BUILD
+  | typeof PHASE_PRODUCTION_SERVER
+  | typeof PHASE_EXPORT
+  | typeof PHASE_TEST;
+
 export function withNx(
   _nextConfig = {} as WithNxOptions,
   context: WithNxContext = getWithNxContext()
-): () => Promise<NextConfig> {
-  return async () => {
-    let dependencies: DependentBuildableProjectNode[] = [];
-
-    const graph = await createProjectGraphAsync();
-
-    const originalTarget = {
-      project: process.env.NX_TASK_TARGET_PROJECT,
-      target: process.env.NX_TASK_TARGET_TARGET,
-      configuration: process.env.NX_TASK_TARGET_CONFIGURATION,
-    };
-
-    const {
-      node: projectNode,
-      options,
-      projectName: project,
-      targetName,
-      configurationName,
-    } = getNxContext(graph, originalTarget);
-    const projectDirectory = projectNode.data.root;
-
-    if (options.buildLibsFromSource === false && targetName) {
-      const result = calculateProjectDependencies(
-        graph,
-        workspaceRoot,
-        project,
+): (phase: Phase) => Promise<NextConfig> {
+  return async (phase: Phase) => {
+    if (phase === PHASE_PRODUCTION_SERVER) {
+      // If we are running an already built production server, just return the configuration.
+      const { nx, ...validNextConfig } = _nextConfig;
+      return { ...validNextConfig, distDir: '.next' };
+    } else {
+      // Otherwise, add in webpack and eslint configuration for build or test.
+      let dependencies: DependentBuildableProjectNode[] = [];
+
+      const graph = await createProjectGraphAsync();
+
+      const originalTarget = {
+        project: process.env.NX_TASK_TARGET_PROJECT,
+        target: process.env.NX_TASK_TARGET_TARGET,
+        configuration: process.env.NX_TASK_TARGET_CONFIGURATION,
+      };
+
+      const {
+        node: projectNode,
+        options,
+        projectName: project,
         targetName,
-        configurationName
-      );
-      dependencies = result.dependencies;
-    }
+        configurationName,
+      } = getNxContext(graph, originalTarget);
+      const projectDirectory = projectNode.data.root;
+
+      if (options.buildLibsFromSource === false && targetName) {
+        const result = calculateProjectDependencies(
+          graph,
+          workspaceRoot,
+          project,
+          targetName,
+          configurationName
+        );
+        dependencies = result.dependencies;
+      }
 
-    // Get next config
-    const nextConfig = getNextConfig(_nextConfig, context);
-
-    const outputDir = `${offsetFromRoot(projectDirectory)}${
-      options.outputPath
-    }`;
-    nextConfig.distDir =
-      nextConfig.distDir && nextConfig.distDir !== '.next'
-        ? joinPathFragments(outputDir, nextConfig.distDir)
-        : joinPathFragments(outputDir, '.next');
-
-    const userWebpackConfig = nextConfig.webpack;
-
-    nextConfig.webpack = (a, b) =>
-      createWebpackConfig(
-        workspaceRoot,
-        options.root,
-        options.fileReplacements,
-        options.assets,
-        dependencies,
-        path.join(workspaceRoot, context.libsDir)
-      )(userWebpackConfig ? userWebpackConfig(a, b) : a, b);
-
-    return nextConfig;
+      // Get next config
+      const nextConfig = getNextConfig(_nextConfig, context);
+
+      const outputDir = `${offsetFromRoot(projectDirectory)}${
+        options.outputPath
+      }`;
+      nextConfig.distDir =
+        nextConfig.distDir && nextConfig.distDir !== '.next'
+          ? joinPathFragments(outputDir, nextConfig.distDir)
+          : joinPathFragments(outputDir, '.next');
+
+      const userWebpackConfig = nextConfig.webpack;
+
+      nextConfig.webpack = (a, b) =>
+        createWebpackConfig(
+          workspaceRoot,
+          options.root,
+          options.fileReplacements,
+          options.assets,
+          dependencies,
+          path.join(workspaceRoot, context.libsDir)
+        )(userWebpackConfig ? userWebpackConfig(a, b) : a, b);
+
+      return nextConfig;
+    }
   };
 }
 

packages/next/src/executors/build/lib/create-next-config-file.ts

@@ -1,17 +1,9 @@
-import type { ExecutorContext } from '@nrwl/devkit';
-import {
-  applyChangesToString,
-  ChangeType,
-  workspaceLayout,
-  workspaceRoot,
-  stripIndents,
-} from '@nrwl/devkit';
-import * as ts from 'typescript';
-import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { ExecutorContext } from '@nrwl/devkit';
+
+import { copyFileSync, existsSync } from 'fs';
 import { join } from 'path';
 
-import type { NextBuildBuilderOptions } from '../../../utils/types';
-import { findNodes } from 'nx/src/utils/typescript';
+import { NextBuildBuilderOptions } from '../../../utils/types';
 
 export function createNextConfigFile(
   options: NextBuildBuilderOptions,
@@ -21,53 +13,7 @@ export function createNextConfigFile(
     ? join(context.root, options.nextConfig)
     : join(context.root, options.root, 'next.config.js');
 
-  // Copy config file and our `with-nx.js` file to remove dependency on @nrwl/next for production build.
   if (existsSync(nextConfigPath)) {
-    writeFileSync(join(options.outputPath, 'with-nx.js'), getWithNxContent());
-    writeFileSync(
-      join(options.outputPath, 'next.config.js'),
-      readFileSync(nextConfigPath)
-        .toString()
-        .replace('@nrwl/next/plugins/with-nx', './with-nx.js')
-    );
-  }
-}
-
-function getWithNxContent() {
-  const withNxFile = join(__dirname, '../../../../plugins/with-nx.js');
-  let withNxContent = readFileSync(withNxFile).toString();
-  const withNxSource = ts.createSourceFile(
-    withNxFile,
-    withNxContent,
-    ts.ScriptTarget.Latest,
-    true
-  );
-  const getWithNxContextDeclaration = findNodes(
-    withNxSource,
-    ts.SyntaxKind.FunctionDeclaration
-  )?.find(
-    (node: ts.FunctionDeclaration) => node.name?.text === 'getWithNxContext'
-  );
-
-  if (getWithNxContextDeclaration) {
-    withNxContent = applyChangesToString(withNxContent, [
-      {
-        type: ChangeType.Delete,
-        start: getWithNxContextDeclaration.getStart(withNxSource),
-        length: getWithNxContextDeclaration.getWidth(withNxSource),
-      },
-      {
-        type: ChangeType.Insert,
-        index: getWithNxContextDeclaration.getStart(withNxSource),
-        text: stripIndents`function getWithNxContext() {
-          return {
-            workspaceRoot: '${workspaceRoot}',
-            libsDir: '${workspaceLayout().libsDir}'
-          }
-        }`,
-      },
-    ]);
+    copyFileSync(nextConfigPath, join(options.outputPath, 'next.config.js'));
   }
-
-  return withNxContent;
 }

packages/next/src/generators/application/lib/add-cypress.ts

@@ -1,13 +1,17 @@
-import { cypressProjectGenerator } from '@nrwl/cypress';
-import { Tree } from '@nrwl/devkit';
-import { NormalizedSchema } from './normalize-options';
+import { ensurePackage, Tree } from '@nrwl/devkit';
 import { Linter } from '@nrwl/linter';
 
+import { nxVersion } from '../../../utils/versions';
+import { NormalizedSchema } from './normalize-options';
+
 export async function addCypress(host: Tree, options: NormalizedSchema) {
   if (options.e2eTestRunner !== 'cypress') {
     return () => {};
   }
 
+  const { cypressProjectGenerator } = ensurePackage<
+    typeof import('@nrwl/cypress')
+  >('@nrwl/cypress', nxVersion);
   return cypressProjectGenerator(host, {
     ...options,
     linter: Linter.EsLint,

packages/next/src/generators/application/lib/add-jest.ts

@@ -1,12 +1,23 @@
-import { joinPathFragments, readJson, Tree, updateJson } from '@nrwl/devkit';
-import { jestProjectGenerator } from '@nrwl/jest';
+import {
+  ensurePackage,
+  joinPathFragments,
+  readJson,
+  Tree,
+  updateJson,
+} from '@nrwl/devkit';
+
+import { nxVersion } from '../../../utils/versions';
 import { NormalizedSchema } from './normalize-options';
 
 export async function addJest(host: Tree, options: NormalizedSchema) {
   if (options.unitTestRunner !== 'jest') {
     return () => {};
   }
 
+  const { jestProjectGenerator } = ensurePackage<typeof import('@nrwl/jest')>(
+    '@nrwl/jest',
+    nxVersion
+  );
   const jestTask = await jestProjectGenerator(host, {
     ...options,
     project: options.projectName,