@nx/next 0.0.0-pr-22179-271588f → 0.0.0-pr-26482-ebe2dba

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2023 Narwhal Technologies Inc.
+Copyright (c) 2017-2024 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/migrations.json

@@ -1,11 +1,5 @@
 {
   "generators": {
-    "add-style-packages": {
-      "cli": "nx",
-      "version": "15.8.8-beta.0",
-      "description": "Add less and stylus packages if used.",
-      "factory": "./src/migrations/update-15-8-8/add-style-packages"
-    },
     "update-16-0-0-add-nx-packages": {
       "cli": "nx",
       "version": "16.0.0-beta.1",
@@ -32,40 +26,6 @@
     }
   },
   "packageJsonUpdates": {
-    "15.0.4": {
-      "version": "15.0.4-beta.0",
-      "packages": {
-        "next": {
-          "version": "13.0.0",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-config-next": {
-          "version": "13.0.0",
-          "alwaysAddToPackageJson": false
-        },
-        "less-loader": {
-          "version": "11.1.0",
-          "alwaysAddToPackageJson": false
-        },
-        "stylus-loader": {
-          "version": "7.1.0",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "15.4.5": {
-      "version": "15.4.5-beta.0",
-      "packages": {
-        "next": {
-          "version": "13.1.1",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-config-next": {
-          "version": "13.1.1",
-          "alwaysAddToPackageJson": false
-        }
-      }
-    },
     "16.0.0": {
       "version": "16.0.0-beta.0",
       "packages": {
@@ -101,6 +61,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "19.0.3": {
+      "version": "19.0.3-beta.0",
+      "packages": {
+        "next": {
+          "version": "14.2.3",
+          "alwaysAddToPackageJson": false
+        },
+        "eslint-config-next": {
+          "version": "14.2.3",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nx/next",
-  "version": "0.0.0-pr-22179-271588f",
+  "version": "0.0.0-pr-26482-ebe2dba",
   "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.",
+  "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, Playwright, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",
@@ -14,9 +14,10 @@
     "Next",
     "Jest",
     "Cypress",
-    "CLI"
+    "CLI",
+    "Front-end"
   ],
-  "main": "./index.js",
+  "main": "./index",
   "typings": "./index.d.ts",
   "author": "Victor Savkin",
   "license": "MIT",
@@ -34,24 +35,24 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "0.0.0-pr-22179-271588f",
+    "@nx/devkit": "0.0.0-pr-26482-ebe2dba",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
     "copy-webpack-plugin": "^10.2.4",
+    "file-loader": "^6.2.0",
     "fs-extra": "^11.1.0",
     "ignore": "^5.0.4",
     "semver": "^7.5.3",
-    "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "0.0.0-pr-22179-271588f",
-    "@nx/eslint": "0.0.0-pr-22179-271588f",
-    "@nx/react": "0.0.0-pr-22179-271588f",
-    "@nx/web": "0.0.0-pr-22179-271588f",
-    "@nx/webpack": "0.0.0-pr-22179-271588f",
-    "@nx/workspace": "0.0.0-pr-22179-271588f",
-    "@nrwl/next": "0.0.0-pr-22179-271588f"
+    "@nx/js": "0.0.0-pr-26482-ebe2dba",
+    "@nx/eslint": "0.0.0-pr-26482-ebe2dba",
+    "@nx/react": "0.0.0-pr-26482-ebe2dba",
+    "@nx/web": "0.0.0-pr-26482-ebe2dba",
+    "@nx/webpack": "0.0.0-pr-26482-ebe2dba",
+    "@nx/workspace": "0.0.0-pr-26482-ebe2dba",
+    "@nrwl/next": "0.0.0-pr-26482-ebe2dba"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing.js

@@ -8,7 +8,7 @@ const react_1 = require("@nx/react");
 const webpack_1 = require("@nx/webpack");
 const path_1 = require("path");
 function nxComponentTestingPreset(pathToConfig, options) {
-    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+    if (global.NX_GRAPH_CREATION) {
         // this is only used by plugins, so we don't need the component testing
         // options, cast to any to avoid type errors
         return (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig);

package/plugins/with-nx.d.ts

@@ -5,9 +5,14 @@
 import type { NextConfig } from 'next';
 import type { NextConfigFn } from '../src/utils/config';
 import { type ProjectGraphProjectNode } from '@nx/devkit';
+export interface SvgrOptions {
+    svgo?: boolean;
+    titleProp?: boolean;
+    ref?: boolean;
+}
 export interface WithNxOptions extends NextConfig {
     nx?: {
-        svgr?: boolean;
+        svgr?: boolean | SvgrOptions;
         babelUpwardRootMode?: boolean;
     };
 }

package/plugins/with-nx.js

@@ -216,27 +216,60 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
                 delete nextGlobalCssLoader.issuer.and;
             }
             /**
-             * 5. Add env variables prefixed with NX_
-             */
-            addNxEnvVariables(config);
-            /**
-             * 6. Add SVGR support if option is on.
+             * 5. Add SVGR support if option is on.
              */
             // Default SVGR support to be on for projects.
-            if (nx?.svgr !== false) {
-                config.module.rules.push(
-                // Apply rule for svg imports ending in ?url
-                {
-                    test: /\.svg$/i,
-                    type: 'asset',
-                    resourceQuery: /url/, // apply to *.svg?url
-                }, 
-                // Convert all other svg imports to React components
-                {
-                    test: /\.svg$/i,
-                    issuer: /\.[jt]sx?$/,
-                    resourceQuery: { not: [/url/] },
-                    use: ['@svgr/webpack'],
+            if (nx?.svgr !== false || typeof nx?.svgr === 'object') {
+                const defaultSvgrOptions = {
+                    svgo: false,
+                    titleProp: true,
+                    ref: true,
+                };
+                const svgrOptions = typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
+                // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+                // It should be:
+                // use: [{
+                //   test: /\.svg$/i,
+                //   type: 'asset',
+                //   resourceQuery: /react/, // *.svg?react
+                // },
+                // {
+                //   test: /\.svg$/i,
+                //   issuer: /\.[jt]sx?$/,
+                //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
+                //   use: ['@svgr/webpack'],
+                // }],
+                // See:
+                // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+                // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
+                // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
+                // Note: We also need a migration for any projects that are using SVGR to convert
+                //       `import { ReactComponent as X } from './x.svg` to
+                //       `import X from './x.svg?react';
+                config.module.rules.push({
+                    test: /\.svg$/,
+                    issuer: { not: /\.(css|scss|sass)$/ },
+                    resourceQuery: {
+                        not: [
+                            /__next_metadata__/,
+                            /__next_metadata_route__/,
+                            /__next_metadata_image_meta__/,
+                        ],
+                    },
+                    use: [
+                        {
+                            loader: require.resolve('@svgr/webpack'),
+                            options: svgrOptions,
+                        },
+                        {
+                            loader: require.resolve('file-loader'),
+                            options: {
+                                // Next.js hard-codes assets to load from "static/media".
+                                // See: https://github.com/vercel/next.js/blob/53d017d/packages/next/src/build/webpack-config.ts#L1993
+                                name: 'static/media/[name].[hash].[ext]',
+                            },
+                        },
+                    ],
                 });
             }
             return userWebpack(config, options);
@@ -244,30 +277,6 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
     };
 }
 exports.getNextConfig = getNextConfig;
-function getNxEnvironmentVariables() {
-    return Object.keys(process.env)
-        .filter((env) => /^NX_/i.test(env))
-        .reduce((env, key) => {
-        env[key] = process.env[key];
-        return env;
-    }, {});
-}
-/**
- * TODO(v19)
- * @deprecated Use Next.js 9.4+ built-in support for environment variables. Reference https://nextjs.org/docs/pages/api-reference/next-config-js/env
- */
-function addNxEnvVariables(config) {
-    const maybeDefinePlugin = config.plugins?.find((plugin) => {
-        return plugin.definitions?.['process.env.NODE_ENV'];
-    });
-    if (maybeDefinePlugin) {
-        const env = getNxEnvironmentVariables();
-        Object.entries(env)
-            .map(([name, value]) => [`process.env.${name}`, `"${value}"`])
-            .filter(([name]) => !maybeDefinePlugin.definitions[name])
-            .forEach(([name, value]) => (maybeDefinePlugin.definitions[name] = value));
-    }
-}
 function getAliasForProject(node, paths) {
     // Match workspace libs to their alias in tsconfig paths.
     for (const [alias, lookup] of Object.entries(paths ?? {})) {
@@ -284,7 +293,7 @@ exports.getAliasForProject = getAliasForProject;
 function forNextVersion(range, fn) {
     const semver = require('semver');
     const nextJsVersion = require('next/package.json').version;
-    if (semver.satisfies(nextJsVersion, range)) {
+    if (semver.satisfies(nextJsVersion, range, { includePrerelease: true })) {
         fn();
     }
 }

package/plugins/with-stylus.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withStylus = void 0;
-// TODO(v19): Remove file, it is here until users migrate over to SASS manually.
+// TODO(v20): Remove file, it is here until users migrate over to SASS manually.
 function withStylus(configOrFn) {
     return async (phase) => {
         throw new Error(`Stylus support has been removed and you should use the built-in SASS support. Remove the "withStylus" plugin from your Next.js config, and rename your files from .styl to .scss.`);

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/build/lib/create-next-config-file.js

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const ts = require("typescript");
 const fs_extra_1 = require("fs-extra");
 const path_1 = require("path");
-const typescript_1 = require("nx/src/utils/typescript");
+const js_1 = require("@nx/js");
 function createNextConfigFile(options, context) {
     // Don't overwrite the next.config.js file if output path is the same as the source path.
     if (options.outputPath.replace(/\/$/, '') ===
@@ -57,7 +57,7 @@ function readSource(getFile) {
 // Exported for testing
 function getWithNxContent({ file, content } = readSource(() => (0, path_1.join)(__dirname, '../../../../plugins/with-nx.js'))) {
     const withNxSource = ts.createSourceFile(file, content, ts.ScriptTarget.Latest, true);
-    const getWithNxContextDeclaration = (0, typescript_1.findNodes)(withNxSource, ts.SyntaxKind.FunctionDeclaration)?.find((node) => node.name?.text === 'getWithNxContext');
+    const getWithNxContextDeclaration = (0, js_1.findNodes)(withNxSource, ts.SyntaxKind.FunctionDeclaration)?.find((node) => node.name?.text === 'getWithNxContext');
     if (getWithNxContextDeclaration) {
         content = (0, devkit_1.applyChangesToString)(content, [
             {
@@ -122,7 +122,7 @@ exports.getRelativeFilesToCopy = getRelativeFilesToCopy;
 // Exported for testing
 function getRelativeImports({ file, content, }) {
     const source = ts.createSourceFile(file, content, ts.ScriptTarget.Latest, true);
-    const callExpressionsOrImportDeclarations = (0, typescript_1.findNodes)(source, [
+    const callExpressionsOrImportDeclarations = (0, js_1.findNodes)(source, [
         ts.SyntaxKind.CallExpression,
         ts.SyntaxKind.ImportDeclaration,
     ]);

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

@@ -19,7 +19,8 @@ exports.default = serveExecutor;
 async function* runCustomServer(root, options, context) {
     process.env.NX_NEXT_DIR ??= root;
     process.env.NX_NEXT_PUBLIC_DIR = (0, path_1.join)(root, 'public');
-    const baseUrl = `http://${options.hostname || 'localhost'}:${options.port}`;
+    const httpProtocol = options.customServerHttps ? 'https' : 'http';
+    const baseUrl = `${httpProtocol}://${options.hostname || 'localhost'}:${options.port}`;
     const customServerBuild = await (0, devkit_1.runExecutor)((0, devkit_1.parseTargetString)(options.customServerTarget, context), {
         watch: options.dev ? true : false,
     }, context);

package/src/executors/server/schema.json

@@ -56,6 +56,22 @@
     "experimentalHttps": {
       "type": "boolean",
       "description": "Enable HTTPS support for the Next.js development server."
+    },
+    "experimentalHttpsKey": {
+      "type": "string",
+      "description": "Path to a HTTPS key file."
+    },
+    "experimentalHttpsCert": {
+      "type": "string",
+      "description": "Path to a HTTPS certificate file."
+    },
+    "experimentalHttpsCa": {
+      "type": "string",
+      "description": "Path to a HTTPS certificate authority file."
+    },
+    "customServerHttps:": {
+      "type": "boolean",
+      "description": "Enable HTTPS support for the custom server."
     }
   },
   "required": ["buildTarget"],

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

@@ -32,10 +32,9 @@ async function* serveExecutor(options, context) {
     }
     const mode = options.dev ? 'dev' : 'start';
     const turbo = options.turbo && options.dev ? '--turbo' : '';
-    const experimentalHttps = options.experimentalHttps && options.dev ? '--experimental-https' : '';
     const nextBin = require.resolve('next/dist/bin/next');
     yield* (0, async_iterable_1.createAsyncIterable)(async ({ done, next, error }) => {
-        const server = (0, child_process_1.fork)(nextBin, [mode, ...args, turbo, experimentalHttps], {
+        const server = (0, child_process_1.fork)(nextBin, [mode, ...args, turbo, ...getExperimentalHttpsFlags(options)], {
             cwd: options.dev ? projectRoot : nextDir,
             stdio: 'inherit',
         });
@@ -64,3 +63,17 @@ async function* serveExecutor(options, context) {
     });
 }
 exports.default = serveExecutor;
+function getExperimentalHttpsFlags(options) {
+    if (!options.dev)
+        return [];
+    const flags = [];
+    if (options.experimentalHttps)
+        flags.push('--experimental-https');
+    if (options.experimentalHttpsKey)
+        flags.push(`--experimental-https-key=${options.experimentalHttpsKey}`);
+    if (options.experimentalHttpsCert)
+        flags.push(`--experimental-https-cert=${options.experimentalHttpsCert}`);
+    if (options.experimentalHttpsCa)
+        flags.push(`--experimental-https-ca=${options.experimentalHttpsCa}`);
+    return flags;
+}

package/src/generators/application/application.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.applicationGeneratorInternal = exports.applicationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
+const react_1 = require("@nx/react");
 const versions_1 = require("@nx/react/src/utils/versions");
 const normalize_options_1 = require("./lib/normalize-options");
 const add_e2e_1 = require("./lib/add-e2e");
@@ -50,6 +51,12 @@ async function applicationGeneratorInternal(host, schema) {
     tasks.push(jestTask);
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
+    if (options.style === 'tailwind') {
+        const tailwindTask = await (0, react_1.setupTailwindGenerator)(host, {
+            project: options.projectName,
+        });
+        tasks.push(tailwindTask);
+    }
     const styledTask = (0, styles_1.addStyleDependencies)(host, {
         style: options.style,
         swc: !host.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, '.babelrc')),

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

@@ -7,7 +7,7 @@
   %>import styled from '<%= styledModule %>';<% } else {
     var wrapper = 'div';
   %>
-    <%- style !== 'styled-jsx' ? `import styles from './page.module.${style}';` : '' %>
+    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './page.module.${style}';` : '' %>
   <% }
   %>
 
@@ -22,9 +22,9 @@ export default function Index() {
    * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
    */
   return (
-    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+    <<%= wrapper %><% if (!styledModule && style !== 'tailwind') {%> className={styles.page}<% } %>>
       <%- styledModule === 'styled-jsx' && style !== 'none' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
       <%- appContent %>
     </<%= wrapper %>>
   );
-};
+};

package/src/generators/application/files/pages/__fileName__.tsx__tmpl__

@@ -4,7 +4,7 @@
   %>import styled from '<%= styledModule %>';<% } else {
     var wrapper = 'div';
   %>
-    <%- style !== 'styled-jsx' ? `import styles from './${fileName}.module.${style}';` : '' %>
+    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './${fileName}.module.${style}';` : '' %>
   <% }
   %>
 
@@ -20,7 +20,7 @@ export function Index() {
    * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
    */
   return (
-    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+    <<%= wrapper %><% if (!styledModule && style !== 'tailwind') {%> className={styles.page}<% } %>>
       <%- styledModule === 'styled-jsx' && style !== 'none' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
       <%- appContent %>
     </<%= wrapper %>>

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

@@ -13,10 +13,11 @@ async function addE2e(host, options) {
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         if (!hasPlugin) {
-            (0, web_1.webStaticServeGenerator)(host, {
+            await (0, web_1.webStaticServeGenerator)(host, {
                 buildTarget: `${options.projectName}:build`,
                 outputPath: `${options.outputPath}/out`,
                 targetName: 'serve-static',
+                spa: true,
             });
         }
         (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -32,12 +33,12 @@ async function addE2e(host, options) {
             project: options.e2eProjectName,
             directory: 'src',
             skipFormat: true,
-            devServerTarget: `${options.projectName}:${hasPlugin ? 'start' : 'serve'}`,
-            baseUrl: `http://localhost:${hasPlugin ? '3000' : '4200'}`,
+            devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+            baseUrl: options.e2eWebServerAddress,
             jsx: true,
             webServerCommands: hasPlugin
                 ? {
-                    default: `nx run ${options.projectName}:start`,
+                    default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
                 }
                 : undefined,
             ciWebServerCommand: hasPlugin
@@ -51,6 +52,7 @@ async function addE2e(host, options) {
             root: options.e2eProjectRoot,
             sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
             targets: {},
+            tags: [],
             implicitDependencies: [options.projectName],
         });
         return configurationGenerator(host, {
@@ -62,8 +64,8 @@ async function addE2e(host, options) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerAddress: `http://127.0.0.1:${hasPlugin ? '3000' : '4200'}`,
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${hasPlugin ? 'start' : 'serve'} ${options.projectName}`,
+            webServerAddress: `http://127.0.0.1:${options.e2ePort}`,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.projectName}`,
             addPlugin: options.addPlugin,
         });
     }

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

@@ -94,7 +94,7 @@ function createApplicationFiles(host, options) {
     if (options.swc !== false) {
         host.delete(`${options.appProjectRoot}/.babelrc`);
     }
-    if (options.styledModule) {
+    if (options.styledModule || options.style === 'tailwind') {
         if (options.appDir) {
             host.delete(`${generatedAppFilePath}/app/page.module.${options.style}`);
         }

package/src/generators/application/lib/normalize-options.d.ts

@@ -6,6 +6,9 @@ export interface NormalizedSchema extends Schema {
     outputPath: string;
     e2eProjectName: string;
     e2eProjectRoot: string;
+    e2eWebServerAddress: string;
+    e2eWebServerTarget: string;
+    e2ePort: number;
     parsedTags: string[];
     fileName: string;
     styledModule: null | string;

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

@@ -20,8 +20,30 @@ async function normalizeOptions(host, options) {
     const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
+    let e2eWebServerTarget = options.addPlugin ? 'start' : 'serve';
+    if (options.addPlugin) {
+        if (nxJson.plugins) {
+            for (const plugin of nxJson.plugins) {
+                if (typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/next/plugin' &&
+                    plugin.options.startTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .startTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = options.addPlugin ? 3000 : 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        (nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT)) {
+        e2ePort =
+            nxJson.targetDefaults?.[e2eWebServerTarget].options?.port ||
+                nxJson.targetDefaults?.[e2eWebServerTarget].options?.env?.PORT;
+    }
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const name = (0, devkit_1.names)(options.name).fileName;
     const outputPath = (0, devkit_1.joinPathFragments)('dist', appProjectRoot, ...(options.rootProject ? [name] : []));
     const parsedTags = options.tags
@@ -30,7 +52,7 @@ async function normalizeOptions(host, options) {
     const fileName = 'index';
     const appDir = options.appDir ?? true;
     const src = options.src ?? true;
-    const styledModule = /^(css|scss|less)$/.test(options.style)
+    const styledModule = /^(css|scss|less|tailwind)$/.test(options.style)
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
@@ -41,7 +63,10 @@ async function normalizeOptions(host, options) {
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
-        e2eTestRunner: options.e2eTestRunner || 'cypress',
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
+        e2eTestRunner: options.e2eTestRunner || 'playwright',
         fileName,
         linter: options.linter || eslint_1.Linter.EsLint,
         name,

package/src/generators/application/schema.json

@@ -46,6 +46,10 @@
             "value": "less",
             "label": "LESS              [ https://lesscss.org            ]"
           },
+          {
+            "value": "tailwind",
+            "label": "tailwind          [ https://tailwindcss.com/       ]"
+          },
           {
             "value": "styled-components",
             "label": "styled-components [ https://styled-components.com ]"
@@ -85,10 +89,10 @@
     },
     "e2eTestRunner": {
       "type": "string",
-      "enum": ["cypress", "playwright", "none"],
+      "enum": ["playwright", "cypress", "none"],
       "description": "Test runner to use for end to end (E2E) tests.",
       "x-prompt": "Which E2E test runner would you like to use?",
-      "default": "cypress"
+      "default": "playwright"
     },
     "tags": {
       "type": "string",

package/src/generators/component/component.d.ts

@@ -3,7 +3,7 @@ import type { SupportedStyles } from '@nx/react';
 interface Schema {
     name: string;
     /**
-     * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
+     * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20.
      */
     project?: string;
     style: SupportedStyles;

package/src/generators/component/component.js

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const react_1 = require("@nx/react");
 const styles_1 = require("../../utils/styles");
 const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
-// TODO(v19): Remove this logic once we no longer derive directory.
+// TODO(v20): Remove this logic once we no longer derive directory.
 function maybeGetDerivedDirectory(host, options) {
     if (!options.project)
         return options.directory;

package/src/generators/component/schema.json

@@ -13,7 +13,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
     },
     "name": {
       "type": "string",

package/src/generators/init/init.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nextInitGeneratorInternal = exports.nextInitGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const update_package_scripts_1 = require("@nx/devkit/src/utils/update-package-scripts");
+const add_plugin_1 = require("@nx/devkit/src/utils/add-plugin");
 const versions_1 = require("@nx/react/src/utils/versions");
 const add_gitignore_entry_1 = require("../../utils/add-gitignore-entry");
 const versions_2 = require("../../utils/versions");
-const add_plugin_1 = require("./lib/add-plugin");
 function updateDependencies(host, schema) {
     const tasks = [];
     tasks.push((0, devkit_1.removeDependenciesFromPackageJson)(host, ['@nx/next'], []));
@@ -29,17 +28,23 @@ async function nextInitGeneratorInternal(host, schema) {
         nxJson.useInferencePlugins !== false;
     schema.addPlugin ??= addPluginDefault;
     if (schema.addPlugin) {
-        (0, add_plugin_1.addPlugin)(host);
+        const { createNodes } = await Promise.resolve().then(() => require('../../plugins/plugin'));
+        await (0, add_plugin_1.addPluginV1)(host, await (0, devkit_1.createProjectGraphAsync)(), '@nx/next/plugin', createNodes, {
+            startTargetName: ['start', 'next:start', 'next-start'],
+            buildTargetName: ['build', 'next:build', 'next-build'],
+            devTargetName: ['dev', 'next:dev', 'next-dev'],
+            serveStaticTargetName: [
+                'serve-static',
+                'next:serve-static',
+                'next-serve-static',
+            ],
+        }, schema.updatePackageScripts);
     }
     (0, add_gitignore_entry_1.addGitIgnoreEntry)(host);
     let installTask = () => { };
     if (!schema.skipPackageJson) {
         installTask = updateDependencies(host, schema);
     }
-    if (schema.updatePackageScripts) {
-        const { createNodes } = await Promise.resolve().then(() => require('../../plugins/plugin'));
-        await (0, update_package_scripts_1.updatePackageScripts)(host, createNodes);
-    }
     return installTask;
 }
 exports.nextInitGeneratorInternal = nextInitGeneratorInternal;

package/src/generators/page/page.js

@@ -46,7 +46,7 @@ async function normalizeOptions(host, options) {
     let routerDirectory;
     if (options.project) {
         // Legacy behavior, detect app vs page router from specified project.
-        // TODO(v19): remove this logic
+        // TODO(v20): remove this logic
         const project = (0, devkit_1.readProjectConfiguration)(host, options.project);
         // app/ is a reserved folder in nextjs so it is safe to check it's existence
         isAppRouter =

package/src/generators/page/schema.d.ts

@@ -3,7 +3,7 @@ import { SupportedStyles } from '@nx/react';
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20.
    */
   project?: string;
   style: SupportedStyles;

package/src/generators/page/schema.json

@@ -13,7 +13,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
     },
     "name": {
       "type": "string",
@@ -97,7 +97,7 @@
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v20."
     },
     "skipFormat": {
       "description": "Skip formatting files.",

package/src/plugins/plugin.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { CreateDependencies, CreateNodes } from '@nx/devkit';
 export interface NextPluginOptions {
     buildTargetName?: string;
@@ -8,4 +7,3 @@ export interface NextPluginOptions {
 }
 export declare const createDependencies: CreateDependencies;
 export declare const createNodes: CreateNodes<NextPluginOptions>;
-export declare function loadEsmModule<T>(modulePath: string | URL): Promise<T>;

package/src/plugins/plugin.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadEsmModule = exports.createNodes = exports.createDependencies = void 0;
+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");
@@ -8,17 +8,21 @@ 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 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 = {};
+const config_utils_1 = require("@nx/devkit/src/utils/config-utils");
+const cachePath = (0, path_1.join)(cache_directory_1.workspaceDataDirectory, 'next.hash');
+const targetsCache = readTargetsCache();
 function readTargetsCache() {
-    return (0, devkit_1.readJsonFile)(cachePath);
+    return (0, fs_1.existsSync)(cachePath) ? (0, devkit_1.readJsonFile)(cachePath) : {};
 }
-function writeTargetsToCache(targets) {
-    (0, devkit_1.writeJsonFile)(cachePath, targets);
+function writeTargetsToCache() {
+    const oldCache = readTargetsCache();
+    (0, devkit_1.writeJsonFile)(cachePath, {
+        ...oldCache,
+        ...targetsCache,
+    });
 }
 const createDependencies = () => {
-    writeTargetsToCache(calculatedTargets);
+    writeTargetsToCache();
     return [];
 };
 exports.createDependencies = createDependencies;
@@ -33,17 +37,13 @@ exports.createNodes = [
             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;
+        const hash = await (0, calculate_hash_for_create_nodes_1.calculateHashForCreateNodes)(projectRoot, options, context, [(0, js_1.getLockFileName)((0, devkit_1.detectPackageManager)(context.workspaceRoot))]);
+        targetsCache[hash] ??= await buildNextTargets(configFilePath, projectRoot, options, context);
         return {
             projects: {
                 [projectRoot]: {
                     root: projectRoot,
-                    targets,
+                    targets: targetsCache[hash],
                 },
             },
         };
@@ -72,6 +72,9 @@ async function getBuildTargetConfig(namedInputs, projectRoot, nextConfig) {
         inputs: getInputs(namedInputs),
         outputs: [nextOutputPath, `${nextOutputPath}/!(cache)`],
     };
+    // TODO(ndcunningham): Update this to be consider different versions of next.js which is running
+    // This doesn't actually need to be tty, but next.js has a bug, https://github.com/vercel/next.js/issues/62906, where it exits 0 when SIGINT is sent.
+    targetConfig.options.tty = false;
     return targetConfig;
 }
 function getDevTargetConfig(projectRoot) {
@@ -100,6 +103,8 @@ function getStaticServeTargetConfig(options) {
             buildTarget: options.buildTargetName,
             staticFilePath: '{projectRoot}/out',
             port: 3000,
+            // Routes are found correctly with serve-static
+            spa: false,
         },
     };
     return targetConfig;
@@ -125,16 +130,9 @@ async function getOutputs(projectRoot, nextConfig) {
         return `{workspaceRoot}/${projectRoot}/${dir}`;
     }
 }
-async function getNextConfig(configFilePath, context) {
+function getNextConfig(configFilePath, context) {
     const resolvedPath = (0, path_1.join)(context.workspaceRoot, configFilePath);
-    let module;
-    if ((0, path_1.extname)(configFilePath) === '.mjs') {
-        module = await loadEsmModule(resolvedPath);
-    }
-    else {
-        module = load(resolvedPath);
-    }
-    return module.default ?? module;
+    return (0, config_utils_1.loadConfigFile)(resolvedPath);
 }
 function normalizeOptions(options) {
     options ??= {};
@@ -154,29 +152,3 @@ function getInputs(namedInputs) {
         },
     ];
 }
-const packageInstallationDirectories = ['node_modules', '.yarn'];
-/**
- * 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 key of Object.keys(require.cache)) {
-            if (!packageInstallationDirectories.some((dir) => key.includes(dir))) {
-                delete require.cache[key];
-            }
-        }
-    }
-    // Then require
-    return require(path);
-}
-/**
- * Lazily compiled dynamic import loader function.
- */
-let dynamicLoad;
-function loadEsmModule(modulePath) {
-    const modulePathWithCacheBust = `${modulePath}?version=${Date.now()}`;
-    dynamicLoad ??= new Function('modulePath', `return import(modulePath);`);
-    return dynamicLoad(modulePathWithCacheBust);
-}
-exports.loadEsmModule = loadEsmModule;

package/src/utils/create-cli-options.js

@@ -5,7 +5,10 @@ function createCliOptions(obj) {
     return Object.entries(obj).reduce((arr, [key, value]) => {
         if (value !== undefined) {
             const kebabCase = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
-            arr.push(`--${kebabCase}=${value}`);
+            if (value === true || typeof value !== 'boolean') {
+                // Boolean flags don't need a value (e.g. --debug)
+                arr.push(`--${kebabCase}` + (typeof value !== 'boolean' ? `=${value}` : ''));
+            }
         }
         return arr;
     }, []);

package/src/utils/styles.d.ts

@@ -1,7 +1,7 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 export declare const nextSpecificStyleDependenciesBabel: {
     'styled-components': {
-        dependencies: import("../../../../build/packages/react/src/utils/dependencies").DependencyEntries;
+        dependencies: import("@nx/react/src/utils/dependencies").DependencyEntries;
         devDependencies: {
             'babel-plugin-styled-components': string;
         };
@@ -10,7 +10,7 @@ export declare const nextSpecificStyleDependenciesBabel: {
         dependencies: {
             '@emotion/server': string;
         };
-        devDependencies: import("../../../../build/packages/react/src/utils/dependencies").DependencyEntries;
+        devDependencies: import("@nx/react/src/utils/dependencies").DependencyEntries;
     };
     css: {
         dependencies: {};
@@ -32,7 +32,7 @@ export declare const nextSpecificStyleDependenciesBabel: {
 };
 export declare const nextSpecificStyleDependenciesSwc: {
     'styled-components': {
-        dependencies: import("../../../../build/packages/react/src/utils/dependencies").DependencyEntries;
+        dependencies: import("@nx/react/src/utils/dependencies").DependencyEntries;
         devDependencies: {
             'babel-plugin-styled-components': string;
         };
@@ -41,7 +41,7 @@ export declare const nextSpecificStyleDependenciesSwc: {
         dependencies: {
             '@emotion/server': string;
         };
-        devDependencies: import("../../../../build/packages/react/src/utils/dependencies").DependencyEntries;
+        devDependencies: import("@nx/react/src/utils/dependencies").DependencyEntries;
     };
     css: {
         dependencies: {};

package/src/utils/types.d.ts

@@ -45,6 +45,10 @@ export interface NextServeBuilderOptions {
     keepAliveTimeout?: number;
     turbo?: boolean;
     experimentalHttps?: boolean;
+    experimentalHttpsKey?: string;
+    experimentalHttpsCert?: string;
+    experimentalHttpsCa?: string;
+    customServerHttps?: boolean;
 }
 export interface NextExportBuilderOptions {
     buildTarget: string;

package/src/utils/versions.d.ts

@@ -1,6 +1,6 @@
 export declare const nxVersion: any;
-export declare const nextVersion = "14.0.4";
-export declare const eslintConfigNextVersion = "14.0.4";
+export declare const nextVersion = "14.2.3";
+export declare const eslintConfigNextVersion = "14.2.3";
 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.swcNodeVersion = exports.swcHelpersVersion = exports.swcCoreVersion = exports.swcCliVersion = 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 = '14.0.4';
-exports.eslintConfigNextVersion = '14.0.4';
+exports.nextVersion = '14.2.3';
+exports.eslintConfigNextVersion = '14.2.3';
 exports.sassVersion = '1.62.1';
 exports.lessLoader = '11.1.0';
 exports.emotionServerVersion = '11.11.0';

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

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

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

@@ -1,26 +0,0 @@
-"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',
-            serveStaticTargetName: 'serve-static',
-        },
-    });
-    (0, devkit_1.updateNxJson)(tree, nxJson);
-}
-exports.addPlugin = addPlugin;

package/src/migrations/update-15-8-8/add-style-packages.d.ts

@@ -1,3 +0,0 @@
-import { Tree } from '@nx/devkit';
-export declare function update(tree: Tree): Promise<import("@nx/devkit").GeneratorCallback>;
-export default update;

package/src/migrations/update-15-8-8/add-style-packages.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.update = void 0;
-const devkit_1 = require("@nx/devkit");
-async function update(tree) {
-    const projects = (0, devkit_1.getProjects)(tree);
-    const missingDeps = {};
-    for (const [, config] of projects) {
-        if (config.targets?.build?.executor === '@nrwl/next:build' &&
-            tree.exists((0, devkit_1.joinPathFragments)(config.root, 'next.config.js'))) {
-            const nextConfigContent = tree.read((0, devkit_1.joinPathFragments)(config.root, 'next.config.js'), 'utf-8');
-            if (nextConfigContent.includes('@nrwl/next/plugins/with-less')) {
-                missingDeps['less'] = '3.12.2';
-            }
-            if (nextConfigContent.includes('@nrwl/next/plugins/with-stylus')) {
-                missingDeps['stylus'] = '^0.55.0';
-            }
-        }
-    }
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, missingDeps);
-}
-exports.update = update;
-exports.default = update;