@nx/next 18.1.0-beta.0 → 18.1.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.1.0-beta.0",
+  "version": "18.1.0-beta.10",
   "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,7 +34,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.1.0-beta.0",
+    "@nx/devkit": "18.1.0-beta.10",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -45,13 +45,13 @@
     "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "18.1.0-beta.0",
-    "@nx/eslint": "18.1.0-beta.0",
-    "@nx/react": "18.1.0-beta.0",
-    "@nx/web": "18.1.0-beta.0",
-    "@nx/webpack": "18.1.0-beta.0",
-    "@nx/workspace": "18.1.0-beta.0",
-    "@nrwl/next": "18.1.0-beta.0"
+    "@nx/js": "18.1.0-beta.10",
+    "@nx/eslint": "18.1.0-beta.10",
+    "@nx/react": "18.1.0-beta.10",
+    "@nx/web": "18.1.0-beta.10",
+    "@nx/webpack": "18.1.0-beta.10",
+    "@nx/workspace": "18.1.0-beta.10",
+    "@nrwl/next": "18.1.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

package/plugins/with-nx.js

@@ -59,10 +59,12 @@ function getNxContext(graph, target) {
 function withNx(_nextConfig = {}, context = getWithNxContext()) {
     return async (phase) => {
         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.
+        // Two scenarios where we want to skip graph creation:
+        // 1. Running production server means the build is already done so we just need to start the Next.js server.
+        // 2. During graph creation (i.e. create nodes), we won't have a graph to read, and it is not needed anyway since it's a build-time concern.
+        //
+        // NOTE: Avoid any `require(...)` or `import(...)` statements here. Development dependencies are not available at production runtime.
+        if (PHASE_PRODUCTION_SERVER === phase || global.NX_GRAPH_CREATION) {
             const { nx, ...validNextConfig } = _nextConfig;
             return {
                 distDir: '.next',
@@ -70,15 +72,13 @@ function withNx(_nextConfig = {}, context = getWithNxContext()) {
             };
         }
         else {
-            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 { createProjectGraphAsync, joinPathFragments, offsetFromRoot, workspaceRoot, } = require('@nx/devkit');
+            let graph;
+            try {
+                graph = await createProjectGraphAsync();
+            }
+            catch (e) {
+                throw new Error('Could not create project graph. Please ensure that your workspace is valid.', { cause: e });
             }
             const originalTarget = {
                 project: process.env.NX_TASK_TARGET_PROJECT,
@@ -119,6 +119,11 @@ function withNx(_nextConfig = {}, context = getWithNxContext()) {
                         ? joinPathFragments(outputDir, nextConfig.distDir)
                         : joinPathFragments(outputDir, '.next');
             }
+            // If we are running a static serve of the Next.js app, we need to change the output to 'export' and the distDir to 'out'.
+            if (process.env.NX_SERVE_STATIC_BUILD_RUNNING === 'true') {
+                nextConfig.output = 'export';
+                nextConfig.distDir = 'out';
+            }
             const userWebpackConfig = nextConfig.webpack;
             const { createWebpackConfig } = require('@nx/next/src/utils/config');
             nextConfig.webpack = (a, b) => createWebpackConfig(workspaceRoot, projectDirectory, options.fileReplacements, options.assets)(userWebpackConfig ? userWebpackConfig(a, b) : a, b);

package/src/executors/build/build.impl.js

@@ -12,6 +12,7 @@ const create_next_config_file_1 = require("./lib/create-next-config-file");
 const check_project_1 = require("./lib/check-project");
 const child_process_1 = require("child_process");
 const create_cli_options_1 = require("../../utils/create-cli-options");
+const exit_codes_1 = require("nx/src/utils/exit-codes");
 let childProcess;
 async function buildExecutor(options, context) {
     // Cast to any to overwrite NODE_ENV
@@ -34,9 +35,14 @@ async function buildExecutor(options, context) {
     try {
         await runCliBuild(devkit_1.workspaceRoot, projectRoot, options);
     }
-    catch (error) {
-        devkit_1.logger.error(`Error occurred while trying to run the build command`);
-        devkit_1.logger.error(error);
+    catch ({ error, code, signal }) {
+        if (code || signal) {
+            devkit_1.logger.error(`Build process exited due to ${code ? 'code ' + code : ''} ${code && signal ? 'and' : ''} ${signal ? 'signal ' + signal : ''}`);
+        }
+        else {
+            devkit_1.logger.error(`Error occurred while trying to run the build command`);
+            devkit_1.logger.error(error);
+        }
         return { success: false };
     }
     finally {
@@ -85,21 +91,26 @@ function runCliBuild(workspaceRoot, projectRoot, options) {
     return new Promise((resolve, reject) => {
         childProcess = (0, child_process_1.fork)(require.resolve('next/dist/bin/next'), ['build', ...args], {
             cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
-            stdio: 'inherit',
+            stdio: ['ignore', 'inherit', 'inherit', 'ipc'],
             env: process.env,
         });
         // Ensure the child process is killed when the parent exits
         process.on('exit', () => childProcess.kill());
-        process.on('SIGTERM', () => childProcess.kill());
+        process.on('SIGTERM', (signal) => {
+            reject({ code: (0, exit_codes_1.signalToCode)(signal), signal });
+        });
+        process.on('SIGINT', (signal) => {
+            reject({ code: (0, exit_codes_1.signalToCode)(signal), signal });
+        });
         childProcess.on('error', (err) => {
-            reject(err);
+            reject({ error: err });
         });
-        childProcess.on('exit', (code) => {
+        childProcess.on('exit', (code, signal) => {
             if (code === 0) {
-                resolve(code);
+                resolve({ code, signal });
             }
             else {
-                reject(code);
+                reject({ code, signal });
             }
         });
     });

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

@@ -11,7 +11,7 @@ async function* serveExecutor(options, context) {
     const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context), context);
     const projectRoot = context.workspace.projects[context.projectName].root;
     // This is required for the default custom server to work. See the @nx/next:app generator.
-    const nextDir = (0, path_1.resolve)(context.root, buildOptions.outputPath);
+    const nextDir = !options.dev && (0, path_1.resolve)(context.root, buildOptions.outputPath);
     process.env.NX_NEXT_DIR ??= options.dev ? projectRoot : nextDir;
     if (options.customServerTarget) {
         return yield* (0, custom_server_impl_1.default)(options, context);

package/src/generators/application/files/app/page.tsx__tmpl__

@@ -15,7 +15,7 @@
   const StyledPage = styled.div`<%- pageStyleContent %>`;
   <% }%>
 <% } %>
-export default async function Index() {
+export default function Index() {
   /*
    * Replace the elements below with your own.
    *

package/src/generators/application/files/common/specs/__fileName__.spec.tsx__tmpl__

@@ -1,13 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-<% if (src) { %>
+<% if (src && !appDir) { %>
 import Index from '../src/pages/index';
-<% } else { %>
+<% } else if (!appDir) { %>
 import Index from '../pages/index';
+<% } else if (appDir && src) {%>
+import Page from '../src/app/page';
+<% } else { %>
+import Page from '../app/page';
 <% } %>
-describe('Index', () => {
+
+describe(<%- appDir ? `'Page'` : `'Index'` %>, () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Index />);
+    const { baseElement } = render(<%- appDir ? `<Page />` : `<Index />` %>);
     expect(baseElement).toBeTruthy();
   });
 });

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

@@ -4,6 +4,7 @@ exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
 const eslint_1 = require("@nx/eslint");
 const versions_1 = require("../../../utils/versions");
+const web_1 = require("@nx/web");
 async function addE2e(host, options) {
     const nxJson = (0, devkit_1.readNxJson)(host);
     const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
@@ -11,6 +12,13 @@ async function addE2e(host, options) {
         : p.plugin === '@nx/next/plugin');
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+        if (!hasPlugin) {
+            (0, web_1.webStaticServeGenerator)(host, {
+                buildTarget: `${options.projectName}:build`,
+                outputPath: `${options.outputPath}/out`,
+                targetName: 'serve-static',
+            });
+        }
         (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
             root: options.e2eProjectRoot,
             sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
@@ -27,6 +35,14 @@ async function addE2e(host, options) {
             devServerTarget: `${options.projectName}:${hasPlugin ? 'start' : 'serve'}`,
             baseUrl: `http://localhost:${hasPlugin ? '3000' : '4200'}`,
             jsx: true,
+            webServerCommands: hasPlugin
+                ? {
+                    default: `nx run ${options.projectName}:start`,
+                }
+                : undefined,
+            ciWebServerCommand: hasPlugin
+                ? `nx run ${options.projectName}:serve-static`
+                : undefined,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {

package/src/generators/application/lib/create-application-files.helpers.js

@@ -304,7 +304,7 @@ function createAppJsx(name) {
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect-to-nx-cloud</pre>
+              <pre>nx connect</pre>
               <a
                 href="https://nx.app/?utm_source=nx-project"
                 target="_blank"

package/src/generators/application/lib/create-application-files.js

@@ -38,8 +38,9 @@ function createApplicationFiles(host, options) {
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/common'), options.appProjectRoot, templateVariables);
     if (options.appDir) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app'), (0, path_1.join)(generatedAppFilePath, 'app'), templateVariables);
-        // RSC is not possible to unit test without extra helpers for data fetching. Leaving it to the user to figure out.
-        host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'specs', `index.spec.${options.js ? 'jsx' : 'tsx'}`));
+        if (options.unitTestRunner === 'none') {
+            host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'specs', `index.spec.${options.js ? 'jsx' : 'tsx'}`));
+        }
         if (options.style === 'styled-components') {
             (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/app-styled-components'), (0, path_1.join)(generatedAppFilePath, 'app'), templateVariables);
         }

package/src/generators/application/lib/normalize-options.js

@@ -16,7 +16,10 @@ async function normalizeOptions(host, options) {
     });
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
     const name = (0, devkit_1.names)(options.name).fileName;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -19,6 +19,7 @@ async function cypressComponentConfigurationInternal(tree, options) {
     tasks.push(await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
+        framework: 'next',
         jsx: true,
         addPlugin: options.addPlugin,
     }));

package/src/generators/init/init.js

@@ -24,7 +24,10 @@ function nextInitGenerator(tree, schema) {
 }
 exports.nextInitGenerator = nextInitGenerator;
 async function nextInitGeneratorInternal(host, schema) {
-    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    schema.addPlugin ??= addPluginDefault;
     if (schema.addPlugin) {
         (0, add_plugin_1.addPlugin)(host);
     }

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

@@ -18,6 +18,7 @@ function addPlugin(tree) {
             buildTargetName: 'build',
             devTargetName: 'dev',
             startTargetName: 'start',
+            serveStaticTargetName: 'serve-static',
         },
     });
     (0, devkit_1.updateNxJson)(tree, nxJson);

package/src/generators/library/lib/normalize-options.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 async function normalizeOptions(host, options) {
     const { projectRoot, importPath, projectNameAndRootFormat } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
@@ -12,7 +13,10 @@ async function normalizeOptions(host, options) {
         callingGenerator: '@nx/next:library',
     });
     options.projectNameAndRootFormat = projectNameAndRootFormat;
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     return {
         ...options,
         importPath,

package/src/plugins/plugin.d.ts

@@ -4,6 +4,7 @@ export interface NextPluginOptions {
     buildTargetName?: string;
     devTargetName?: string;
     startTargetName?: string;
+    serveStaticTargetName?: string;
 }
 export declare const createDependencies: CreateDependencies;
 export declare const createNodes: CreateNodes<NextPluginOptions>;

package/src/plugins/plugin.js

@@ -56,6 +56,7 @@ async function buildNextTargets(nextConfigPath, projectRoot, options, context) {
     targets[options.buildTargetName] = await getBuildTargetConfig(namedInputs, projectRoot, nextConfig);
     targets[options.devTargetName] = getDevTargetConfig(projectRoot);
     targets[options.startTargetName] = getStartTargetConfig(options, projectRoot);
+    targets[options.serveStaticTargetName] = getStaticServeTargetConfig(options);
     return targets;
 }
 async function getBuildTargetConfig(namedInputs, projectRoot, nextConfig) {
@@ -92,6 +93,17 @@ function getStartTargetConfig(options, projectRoot) {
     };
     return targetConfig;
 }
+function getStaticServeTargetConfig(options) {
+    const targetConfig = {
+        executor: '@nx/web:file-server',
+        options: {
+            buildTarget: options.buildTargetName,
+            staticFilePath: '{projectRoot}/out',
+            port: 3000,
+        },
+    };
+    return targetConfig;
+}
 async function getOutputs(projectRoot, nextConfig) {
     let dir = '.next';
     const { PHASE_PRODUCTION_BUILD } = require('next/constants');
@@ -129,6 +141,7 @@ function normalizeOptions(options) {
     options.buildTargetName ??= 'build';
     options.devTargetName ??= 'dev';
     options.startTargetName ??= 'start';
+    options.serveStaticTargetName ??= 'serve-static';
     return options;
 }
 function getInputs(namedInputs) {

package/src/utils/add-gitignore-entry.js

@@ -10,7 +10,7 @@ function addGitIgnoreEntry(host) {
     const ig = (0, ignore_1.default)();
     ig.add(host.read('.gitignore', 'utf-8'));
     if (!ig.ignores('apps/example/.next')) {
-        content = `${content}\n\n# Next.js\n.next\n`;
+        content = `${content}\n\n# Next.js\n.next\nout\n`;
     }
     host.write('.gitignore', content);
 }