@nx/next 17.2.0-beta.9 → 17.2.0-canary.20231207-b8d24e6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "17.2.0-beta.9",
+  "version": "17.2.0-canary.20231207-b8d24e6",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -34,6 +34,7 @@
     "next": ">=13.0.0"
   },
   "dependencies": {
+    "@nx/devkit": "17.2.0-canary.20231207-b8d24e6",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -44,13 +45,12 @@
     "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.2.0-beta.9",
-    "@nx/js": "17.2.0-beta.9",
-    "@nx/eslint": "17.2.0-beta.9",
-    "@nx/react": "17.2.0-beta.9",
-    "@nx/web": "17.2.0-beta.9",
-    "@nx/workspace": "17.2.0-beta.9",
-    "@nrwl/next": "17.2.0-beta.9"
+    "@nx/js": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/eslint": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/react": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/web": "17.2.0-canary.20231207-b8d24e6",
+    "@nx/workspace": "17.2.0-canary.20231207-b8d24e6",
+    "@nrwl/next": "17.2.0-canary.20231207-b8d24e6"
   },
   "publishConfig": {
     "access": "public"

package/plugin.d.ts

@@ -0,0 +1 @@
+export { createNodes, NextPluginOptions } from './src/plugins/plugin';

package/plugin.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodes = void 0;
+var plugin_1 = require("./src/plugins/plugin");
+Object.defineProperty(exports, "createNodes", { enumerable: true, get: function () { return plugin_1.createNodes; } });

package/plugins/with-nx.d.ts

@@ -4,7 +4,7 @@
  */
 import type { NextConfig } from 'next';
 import type { NextConfigFn } from '../src/utils/config';
-import type { ProjectGraphProjectNode } from '@nx/devkit';
+import { type ProjectGraphProjectNode } from '@nx/devkit';
 export interface WithNxOptions extends NextConfig {
     nx?: {
         svgr?: boolean;

package/plugins/with-nx.js

@@ -36,6 +36,7 @@ const baseNXEnvironmentVariables = [
     'NX_MAPPINGS',
     'NX_FILE_TO_RUN',
     'NX_NEXT_PUBLIC_DIR',
+    'NX_CYPRESS_COMPONENT_TEST',
 ];
 function regexEqual(x, y) {
     return (x instanceof RegExp &&
@@ -94,8 +95,9 @@ function getNxContext(graph, target) {
  */
 function withNx(_nextConfig = {}, context = getWithNxContext()) {
     return async (phase) => {
-        const { PHASE_PRODUCTION_SERVER } = await Promise.resolve().then(() => require('next/constants'));
-        if (phase === PHASE_PRODUCTION_SERVER) {
+        const { PHASE_PRODUCTION_SERVER, PHASE_DEVELOPMENT_SERVER } = await Promise.resolve().then(() => require('next/constants'));
+        if (PHASE_PRODUCTION_SERVER === phase ||
+            !process.env.NX_TASK_TARGET_TARGET) {
             // If we are running an already built production server, just return the configuration.
             // NOTE: Avoid any `require(...)` or `import(...)` statements here. Development dependencies are not available at production runtime.
             const { nx, ...validNextConfig } = _nextConfig;
@@ -105,22 +107,23 @@ function withNx(_nextConfig = {}, context = getWithNxContext()) {
             };
         }
         else {
-            const { createProjectGraphAsync, joinPathFragments, offsetFromRoot, workspaceRoot, } = require('@nx/devkit');
-            // Otherwise, add in webpack and eslint configuration for build or test.
-            let dependencies = [];
-            const graph = await createProjectGraphAsync();
+            const { createProjectGraphAsync, readCachedProjectGraph, joinPathFragments, offsetFromRoot, workspaceRoot, } = require('@nx/devkit');
+            let graph = readCachedProjectGraph();
+            if (!graph) {
+                try {
+                    graph = await createProjectGraphAsync();
+                }
+                catch (e) {
+                    throw new Error('Could not create project graph. Please ensure that your workspace is valid.');
+                }
+            }
             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 { node: projectNode, options, projectName: project, } = getNxContext(graph, originalTarget);
             const projectDirectory = projectNode.data.root;
-            if (options.buildLibsFromSource === false && targetName) {
-                const { calculateProjectDependencies, } = require('@nx/js/src/utils/buildable-libs-utils');
-                const result = calculateProjectDependencies(graph, workspaceRoot, project, targetName, configurationName);
-                dependencies = result.dependencies;
-            }
             // Get next config
             const nextConfig = getNextConfig(_nextConfig, context);
             // For Next.js 13.1 and greater, make sure workspace libs are transpiled.
@@ -144,8 +147,10 @@ function withNx(_nextConfig = {}, context = getWithNxContext()) {
                 process.env.NX_NEXT_OUTPUT_PATH || options.outputPath;
             // outputPath may be undefined if using run-commands or other executors other than @nx/next:build.
             // In this case, the user should set distDir in their next.config.js.
-            if (options.outputPath) {
+            if (options.outputPath && phase !== PHASE_DEVELOPMENT_SERVER) {
                 const outputDir = `${offsetFromRoot(projectDirectory)}${options.outputPath}`;
+                // If running dev-server, we should keep `.next` inside project directory since Turbopack expects this.
+                // See: https://github.com/nrwl/nx/issues/19365
                 nextConfig.distDir =
                     nextConfig.distDir && nextConfig.distDir !== '.next'
                         ? joinPathFragments(outputDir, nextConfig.distDir)

package/src/executors/export/export.impl.js

@@ -28,9 +28,11 @@ async function exportExecutor(options, context) {
         context.configurationName);
         dependencies = result.dependencies;
     }
+    // Returns { project: ProjectGraphNode; target: string; configuration?: string;}
     const buildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, context);
     try {
-        const args = getBuildTargetCommand(options);
+        const buildTargetName = (0, devkit_1.targetToTargetString)(buildTarget);
+        const args = getBuildTargetCommand(buildTargetName);
         (0, child_process_1.execFileSync)(pmCmd, args, {
             stdio: [0, 1, 2],
         });
@@ -52,7 +54,7 @@ async function exportExecutor(options, context) {
     return { success: true };
 }
 exports.default = exportExecutor;
-function getBuildTargetCommand(options) {
-    const cmd = ['nx', 'run', options.buildTarget];
+function getBuildTargetCommand(buildTarget) {
+    const cmd = ['nx', 'run', buildTarget];
     return cmd;
 }

package/src/executors/server/server.impl.js

@@ -11,7 +11,7 @@ async function* serveExecutor(options, context) {
     if (options.customServerTarget) {
         return yield* (0, custom_server_impl_1.default)(options, context);
     }
-    const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context.projectGraph), context);
+    const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context), context);
     const projectRoot = context.workspace.projects[context.projectName].root;
     const { port, keepAliveTimeout, hostname } = options;
     // This is required for the default custom server to work. See the @nx/next:app generator.

package/src/generators/application/lib/add-e2e.js

@@ -5,6 +5,10 @@ const devkit_1 = require("@nx/devkit");
 const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../../utils/versions");
 async function addE2e(host, options) {
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/next/plugin'
+        : p.plugin === '@nx/next/plugin');
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -20,8 +24,8 @@ async function addE2e(host, options) {
             project: options.e2eProjectName,
             directory: 'src',
             skipFormat: true,
-            devServerTarget: `${options.projectName}:serve`,
-            baseUrl: 'http://localhost:4200',
+            devServerTarget: `${options.projectName}:${hasPlugin ? 'start' : 'serve'}`,
+            baseUrl: `http://localhost:${hasPlugin ? '3000' : '4200'}`,
             jsx: true,
         });
     }
@@ -41,8 +45,8 @@ async function addE2e(host, options) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerAddress: 'http://127.0.0.1:4200',
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.projectName}`,
+            webServerAddress: `http://127.0.0.1:${hasPlugin ? '3000' : '4200'}`,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${hasPlugin ? 'start' : 'serve'} ${options.projectName}`,
         });
     }
     return () => { };

package/src/generators/application/lib/add-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addPlugin(tree: Tree): void;

package/src/generators/application/lib/add-plugin.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function addPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.plugins ??= [];
+    for (const plugin of nxJson.plugins) {
+        if (typeof plugin === 'string'
+            ? plugin === '@nx/next/plugin'
+            : plugin.plugin === '@nx/next/plugin') {
+            return;
+        }
+    }
+    nxJson.plugins.push({
+        plugin: '@nx/next/plugin',
+        options: {
+            buildTargetName: 'build',
+            serveTargetName: 'serve',
+            exportTargetName: 'export',
+        },
+    });
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.addPlugin = addPlugin;

package/src/generators/application/lib/add-project.js

@@ -4,44 +4,52 @@ exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
 function addProject(host, options) {
     const targets = {};
-    targets.build = {
-        executor: '@nx/next:build',
-        outputs: ['{options.outputPath}'],
-        defaultConfiguration: 'production',
-        options: {
-            outputPath: options.outputPath,
-        },
-        configurations: {
-            development: {
-                outputPath: options.appProjectRoot,
+    // Check if plugin exists in nx.json and if it doesn't then we can continue
+    // with the default targets.
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/next/plugin'
+        : p.plugin === '@nx/next/plugin');
+    if (!hasPlugin) {
+        targets.build = {
+            executor: '@nx/next:build',
+            outputs: ['{options.outputPath}'],
+            defaultConfiguration: 'production',
+            options: {
+                outputPath: options.outputPath,
             },
-            production: {},
-        },
-    };
-    targets.serve = {
-        executor: '@nx/next:server',
-        defaultConfiguration: 'development',
-        options: {
-            buildTarget: `${options.projectName}:build`,
-            dev: true,
-        },
-        configurations: {
-            development: {
-                buildTarget: `${options.projectName}:build:development`,
+            configurations: {
+                development: {
+                    outputPath: options.appProjectRoot,
+                },
+                production: {},
+            },
+        };
+        targets.serve = {
+            executor: '@nx/next:server',
+            defaultConfiguration: 'development',
+            options: {
+                buildTarget: `${options.projectName}:build`,
                 dev: true,
             },
-            production: {
+            configurations: {
+                development: {
+                    buildTarget: `${options.projectName}:build:development`,
+                    dev: true,
+                },
+                production: {
+                    buildTarget: `${options.projectName}:build:production`,
+                    dev: false,
+                },
+            },
+        };
+        targets.export = {
+            executor: '@nx/next:export',
+            options: {
                 buildTarget: `${options.projectName}:build:production`,
-                dev: false,
             },
-        },
-    };
-    targets.export = {
-        executor: '@nx/next:export',
-        options: {
-            buildTarget: `${options.projectName}:build:production`,
-        },
-    };
+        };
+    }
     const project = {
         root: options.appProjectRoot,
         sourceRoot: options.appProjectRoot,

package/src/generators/component/component.js

@@ -44,6 +44,7 @@ async function componentGeneratorInternal(host, options) {
     });
     const componentInstall = await (0, react_1.componentGenerator)(host, {
         ...options,
+        name,
         nameAndDirectoryFormat: 'as-provided',
         project: undefined,
         directory,

package/src/generators/init/init.js

@@ -7,6 +7,7 @@ const init_1 = require("@nx/react/src/generators/init/init");
 const js_1 = require("@nx/js");
 const versions_2 = require("../../utils/versions");
 const add_gitignore_entry_1 = require("../../utils/add-gitignore-entry");
+const add_plugin_1 = require("./lib/add-plugin");
 function updateDependencies(host) {
     return (0, devkit_1.addDependenciesToPackageJson)(host, {
         next: versions_2.nextVersion,
@@ -54,6 +55,9 @@ async function nextInitGenerator(host, schema) {
         tasks.push(installTask);
     }
     (0, add_gitignore_entry_1.addGitIgnoreEntry)(host);
+    if (process.env.NX_PCV3 === 'true') {
+        (0, add_plugin_1.addPlugin)(host);
+    }
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.nextInitGenerator = nextInitGenerator;

package/src/generators/init/lib/add-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addPlugin(tree: Tree): void;

package/src/generators/init/lib/add-plugin.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function addPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.plugins ??= [];
+    for (const plugin of nxJson.plugins) {
+        if (typeof plugin === 'string'
+            ? plugin === '@nx/next/plugin'
+            : plugin.plugin === '@nx/next/plugin') {
+            return;
+        }
+    }
+    nxJson.plugins.push({
+        plugin: '@nx/next/plugin',
+        options: {
+            buildTargetName: 'build',
+            devTargetName: 'dev',
+            startTargetName: 'start',
+        },
+    });
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.addPlugin = addPlugin;

package/src/plugins/plugin.d.ts

@@ -0,0 +1,8 @@
+import { CreateDependencies, CreateNodes } from '@nx/devkit';
+export interface NextPluginOptions {
+    buildTargetName?: string;
+    devTargetName?: string;
+    startTargetName?: string;
+}
+export declare const createDependencies: CreateDependencies;
+export declare const createNodes: CreateNodes<NextPluginOptions>;

package/src/plugins/plugin.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodes = exports.createDependencies = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const get_named_inputs_1 = require("@nx/devkit/src/utils/get-named-inputs");
+const fs_1 = require("fs");
+const cache_directory_1 = require("nx/src/utils/cache-directory");
+const calculate_hash_for_create_nodes_1 = require("@nx/devkit/src/utils/calculate-hash-for-create-nodes");
+const constants_1 = require("next/constants");
+const js_1 = require("@nx/js");
+const cachePath = (0, path_1.join)(cache_directory_1.projectGraphCacheDirectory, 'next.hash');
+const targetsCache = (0, fs_1.existsSync)(cachePath) ? readTargetsCache() : {};
+const calculatedTargets = {};
+function readTargetsCache() {
+    return (0, devkit_1.readJsonFile)(cachePath);
+}
+function writeTargetsToCache(targets) {
+    (0, devkit_1.writeJsonFile)(cachePath, targets);
+}
+const createDependencies = () => {
+    writeTargetsToCache(calculatedTargets);
+    return [];
+};
+exports.createDependencies = createDependencies;
+// TODO(nicholas): Add support for .mjs files
+exports.createNodes = [
+    '**/next.config.{js, cjs}',
+    async (configFilePath, options, context) => {
+        const projectRoot = (0, path_1.dirname)(configFilePath);
+        // Do not create a project if package.json and project.json isn't there.
+        const siblingFiles = (0, fs_1.readdirSync)((0, path_1.join)(context.workspaceRoot, projectRoot));
+        if (!siblingFiles.includes('package.json') &&
+            !siblingFiles.includes('project.json')) {
+            return {};
+        }
+        options = normalizeOptions(options);
+        const hash = (0, calculate_hash_for_create_nodes_1.calculateHashForCreateNodes)(projectRoot, options, context, [
+            (0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot)),
+        ]);
+        const targets = targetsCache[hash] ??
+            (await buildNextTargets(configFilePath, projectRoot, options, context));
+        calculatedTargets[hash] = targets;
+        return {
+            projects: {
+                [projectRoot]: {
+                    root: projectRoot,
+                    targets,
+                },
+            },
+        };
+    },
+];
+async function buildNextTargets(nextConfigPath, projectRoot, options, context) {
+    const nextConfig = getNextConfig(nextConfigPath, context);
+    const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
+    const targets = {};
+    targets[options.buildTargetName] = await getBuildTargetConfig(namedInputs, projectRoot, nextConfig);
+    targets[options.devTargetName] = getDevTargetConfig(projectRoot);
+    targets[options.startTargetName] = getStartTargetConfig(options, projectRoot);
+    return targets;
+}
+async function getBuildTargetConfig(namedInputs, projectRoot, nextConfig) {
+    // Set output path here so that `withNx` can pick it up.
+    const targetConfig = {
+        command: `next build`,
+        options: {
+            cwd: projectRoot,
+        },
+        dependsOn: ['^build'],
+        cache: true,
+        inputs: getInputs(namedInputs),
+        outputs: [await getOutputs(projectRoot, nextConfig)],
+    };
+    return targetConfig;
+}
+function getDevTargetConfig(projectRoot) {
+    const targetConfig = {
+        command: `next dev`,
+        options: {
+            cwd: projectRoot,
+        },
+    };
+    return targetConfig;
+}
+function getStartTargetConfig(options, projectRoot) {
+    const targetConfig = {
+        command: `next start`,
+        options: {
+            cwd: projectRoot,
+        },
+        dependsOn: [options.buildTargetName],
+    };
+    return targetConfig;
+}
+async function getOutputs(projectRoot, nextConfig) {
+    let dir = '.next';
+    if (typeof nextConfig === 'function') {
+        // Works for both async and sync functions.
+        const configResult = await Promise.resolve(nextConfig(constants_1.PHASE_PRODUCTION_BUILD, { defaultConfig: {} }));
+        if (configResult?.distDir) {
+            dir = configResult?.distDir;
+        }
+    }
+    else if (typeof nextConfig === 'object' && nextConfig?.distDir) {
+        // If nextConfig is an object, directly use its 'distDir' property.
+        dir = nextConfig.distDir;
+    }
+    return `{workspaceRoot}/${projectRoot}/${dir}`;
+}
+function getNextConfig(configFilePath, context) {
+    const resolvedPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
+    const module = load(resolvedPath);
+    return module.default ?? module;
+}
+function normalizeOptions(options) {
+    options ??= {};
+    options.buildTargetName ??= 'build';
+    options.devTargetName ??= 'dev';
+    options.startTargetName ??= 'start';
+    return options;
+}
+function getInputs(namedInputs) {
+    return [
+        ...('production' in namedInputs
+            ? ['default', '^production']
+            : ['default', '^default']),
+        {
+            externalDependencies: ['next'],
+        },
+    ];
+}
+/**
+ * Load the module after ensuring that the require cache is cleared.
+ */
+function load(path) {
+    // Clear cache if the path is in the cache
+    if (require.cache[path]) {
+        for (const k of Object.keys(require.cache)) {
+            delete require.cache[k];
+        }
+    }
+    // Then require
+    return require(path);
+}

package/src/utils/versions.d.ts

@@ -1,6 +1,6 @@
 export declare const nxVersion: any;
-export declare const nextVersion = "13.4.1";
-export declare const eslintConfigNextVersion = "13.4.1";
+export declare const nextVersion = "13.4.4";
+export declare const eslintConfigNextVersion = "13.4.4";
 export declare const sassVersion = "1.62.1";
 export declare const lessLoader = "11.1.0";
 export declare const emotionServerVersion = "11.11.0";

package/src/utils/versions.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.emotionServerVersion = exports.lessLoader = exports.sassVersion = exports.eslintConfigNextVersion = exports.nextVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
-exports.nextVersion = '13.4.1';
-exports.eslintConfigNextVersion = '13.4.1';
+exports.nextVersion = '13.4.4';
+exports.eslintConfigNextVersion = '13.4.4';
 exports.sassVersion = '1.62.1';
 exports.lessLoader = '11.1.0';
 exports.emotionServerVersion = '11.11.0';