fix(nextjs): set development outputPath to a different one from produ…

…ction build (#11169)

- Avoids conflict with cached output
- Fixes #10312

packages/next/migrations.json

@@ -84,6 +84,12 @@
       "version": "14.0.0-beta.0",
       "description": "Add a default development configuration for build and serve targets.",
       "factory": "./src/migrations/update-14-0-0/add-default-development-configurations"
+    },
+    "add-dev-output-path": {
+      "cli": "nx",
+      "version": "14.4.3-beta.0",
+      "description": "Add a development outputPath to avoid conflict with the production build.",
+      "factory": "./src/migrations/update-14-4-3/add-dev-output-path"
     }
   },
   "packageJsonUpdates": {

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

@@ -18,7 +18,9 @@ export function addProject(host: Tree, options: NormalizedSchema) {
       outputPath: joinPathFragments('dist', options.appProjectRoot),
     },
     configurations: {
-      development: {},
+      development: {
+        outputPath: joinPathFragments('tmp', options.appProjectRoot),
+      },
       production: {},
     },
   };

packages/next/src/migrations/update-14-4-3/add-dev-output-path.spec.ts

@@ -0,0 +1,68 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+} from '@nrwl/devkit';
+import update from './add-dev-output-path';
+
+describe('React default development configuration', () => {
+  it('should add output path if it does not alreayd exist', async () => {
+    const tree = createTreeWithEmptyWorkspace(2);
+    addProjectConfiguration(
+      tree,
+      'example',
+      {
+        root: 'apps/example',
+        sourceRoot: 'apps/example',
+        projectType: 'application',
+        targets: {
+          build: {
+            executor: '@nrwl/next:build',
+            configurations: {
+              development: {},
+            },
+          },
+        },
+      },
+      true
+    );
+
+    await update(tree);
+
+    const config = readProjectConfiguration(tree, 'example');
+
+    expect(config.targets.build.configurations.development.outputPath).toEqual(
+      'tmp/apps/example'
+    );
+  });
+
+  it('should skip update if outputPath already exists for development', async () => {
+    const tree = createTreeWithEmptyWorkspace(2);
+    addProjectConfiguration(
+      tree,
+      'example',
+      {
+        root: 'apps/example',
+        sourceRoot: 'apps/example',
+        projectType: 'application',
+        targets: {
+          build: {
+            executor: '@nrwl/next:build',
+            configurations: {
+              development: { outputPath: '/tmp/some/custom/path' },
+            },
+          },
+        },
+      },
+      true
+    );
+
+    await update(tree);
+
+    const config = readProjectConfiguration(tree, 'example');
+
+    expect(config.targets.build.configurations.development.outputPath).toEqual(
+      '/tmp/some/custom/path'
+    );
+  });
+});

packages/next/src/migrations/update-14-4-3/add-dev-output-path.ts

@@ -0,0 +1,25 @@
+import {
+  formatFiles,
+  getProjects,
+  joinPathFragments,
+  Tree,
+  updateProjectConfiguration,
+} from '@nrwl/devkit';
+
+export async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((config, name) => {
+    if (config.targets?.build?.executor === '@nrwl/next:build') {
+      config.targets.build.configurations ??= {};
+      config.targets.build.configurations.development ??= {};
+      config.targets.build.configurations.development.outputPath ??=
+        joinPathFragments('tmp', config.sourceRoot);
+      updateProjectConfiguration(tree, name, config);
+    }
+  });
+
+  await formatFiles(tree);
+}
+
+export default update;