@nx/next 21.0.0-beta.0 → 21.0.0-beta.2

package/migrations.json

@@ -38,6 +38,39 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.7.1-beta.0": {
+      "version": "20.7.1-beta.0",
+      "packages": {
+        "eslint-config-next": {
+          "version": "^15.2.4",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "20.7.1-beta.0-next14": {
+      "version": "20.7.1-beta.0",
+      "requires": {
+        "next": "^14.0.0"
+      },
+      "packages": {
+        "next": {
+          "version": "~14.2.26",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
+    "20.7.1-beta.0-next15": {
+      "version": "20.7.1-beta.0",
+      "requires": {
+        "next": "^15.0.0"
+      },
+      "packages": {
+        "next": {
+          "version": "~15.2.4",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "21.0.0-beta.0",
+  "version": "21.0.0-beta.2",
   "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, Playwright, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -35,7 +35,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "21.0.0-beta.0",
+    "@nx/devkit": "21.0.0-beta.2",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.1.0",
     "copy-webpack-plugin": "^10.2.4",
@@ -44,11 +44,11 @@
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "21.0.0-beta.0",
-    "@nx/eslint": "21.0.0-beta.0",
-    "@nx/react": "21.0.0-beta.0",
-    "@nx/web": "21.0.0-beta.0",
-    "@nx/webpack": "21.0.0-beta.0",
+    "@nx/js": "21.0.0-beta.2",
+    "@nx/eslint": "21.0.0-beta.2",
+    "@nx/react": "21.0.0-beta.2",
+    "@nx/web": "21.0.0-beta.2",
+    "@nx/webpack": "21.0.0-beta.2",
     "@phenomnomnominal/tsquery": "~5.0.1"
   },
   "publishConfig": {

package/src/generators/application/application.js

@@ -4,7 +4,7 @@ exports.applicationGenerator = applicationGenerator;
 exports.applicationGeneratorInternal = applicationGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const react_1 = require("@nx/react");
+const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const versions_1 = require("@nx/react/src/utils/versions");
 const version_utils_1 = require("@nx/react/src/utils/version-utils");
 const normalize_options_1 = require("./lib/normalize-options");
@@ -24,9 +24,11 @@ const versions_2 = require("../../utils/versions");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const add_swc_to_custom_server_1 = require("../../utils/add-swc-to-custom-server");
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
         addPlugin: false,
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -38,8 +40,8 @@ async function applicationGeneratorInternal(host, schema) {
         js: options.js,
         skipPackageJson: options.skipPackageJson,
         skipFormat: true,
-        addTsPlugin: schema.useTsSolution,
-        formatter: schema.formatter,
+        addTsPlugin: options.isTsSolutionSetup,
+        formatter: options.formatter,
         platform: 'web',
     });
     tasks.push(jsInitTask);
@@ -50,6 +52,11 @@ async function applicationGeneratorInternal(host, schema) {
     tasks.push(nextTask);
     (0, create_application_files_1.createApplicationFiles)(host, options);
     (0, add_project_1.addProject)(host, options);
+    // If we are using the new TS solution
+    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+    if (options.isTsSolutionSetup) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
+    }
     const e2eTask = await (0, add_e2e_1.addE2e)(host, options);
     tasks.push(e2eTask);
     const jestTask = await (0, add_jest_1.addJest)(host, options);
@@ -57,7 +64,7 @@ async function applicationGeneratorInternal(host, schema) {
     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, {
+        const tailwindTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
             project: options.projectName,
         });
         tasks.push(tailwindTask);
@@ -70,6 +77,10 @@ async function applicationGeneratorInternal(host, schema) {
     (0, update_jest_config_1.updateJestConfig)(host, options);
     (0, update_cypress_tsconfig_1.updateCypressTsConfig)(host, options);
     (0, set_defaults_1.setDefaults)(host, options);
+    if (options.swc) {
+        const swcTask = (0, add_swc_to_custom_server_1.configureForSwc)(host, options.appProjectRoot);
+        tasks.push(swcTask);
+    }
     if (options.customServer) {
         await (0, custom_server_1.customServerGenerator)(host, {
             project: options.projectName,
@@ -84,6 +95,7 @@ async function applicationGeneratorInternal(host, schema) {
         };
         if (options.unitTestRunner && options.unitTestRunner !== 'none') {
             devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+            devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
         }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
     }
@@ -94,11 +106,6 @@ async function applicationGeneratorInternal(host, schema) {
     }, options.linter === 'eslint'
         ? ['.next', 'eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : ['.next'], options.src ? 'src' : '.');
-    // If we are using the new TS solution
-    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
-    if (options.useTsSolution) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
-    }
     (0, sort_fields_1.sortPackageJsonFields)(host, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);

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

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addE2e = addE2e;
 const devkit_1 = require("@nx/devkit");
+const e2e_web_server_info_utils_1 = require("@nx/devkit/src/generators/e2e-web-server-info-utils");
+const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
+const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
 const eslint_1 = require("@nx/eslint");
-const versions_1 = require("../../../utils/versions");
 const web_1 = require("@nx/web");
-const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
-const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
-const e2e_web_server_info_utils_1 = require("@nx/devkit/src/generators/e2e-web-server-info-utils");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+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'
@@ -25,17 +24,15 @@ async function addE2e(host, options) {
                 spa: true,
             });
         }
-        if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
-            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                name: options.e2eProjectName,
-                version: '0.0.1',
-                private: true,
-                nx: {
-                    projectType: 'application',
-                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                    implicitDependencies: [options.projectName],
-                },
-            });
+        const packageJson = {
+            name: options.e2eProjectName,
+            version: '0.0.1',
+            private: true,
+        };
+        if (!options.useProjectJson) {
+            packageJson.nx = {
+                implicitDependencies: [options.projectName],
+            };
         }
         else {
             (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -47,6 +44,9 @@ async function addE2e(host, options) {
                 implicitDependencies: [options.projectName],
             });
         }
+        if (!options.useProjectJson || options.isTsSolutionSetup) {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+        }
         const e2eTask = await configurationGenerator(host, {
             ...options,
             linter: eslint_1.Linter.EsLint,
@@ -81,17 +81,15 @@ async function addE2e(host, options) {
     }
     else if (options.e2eTestRunner === 'playwright') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
-        if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
-            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
-                name: options.e2eProjectName,
-                version: '0.0.1',
-                private: true,
-                nx: {
-                    projectType: 'application',
-                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                    implicitDependencies: [options.projectName],
-                },
-            });
+        const packageJson = {
+            name: options.e2eProjectName,
+            version: '0.0.1',
+            private: true,
+        };
+        if (!options.useProjectJson) {
+            packageJson.nx = {
+                implicitDependencies: [options.projectName],
+            };
         }
         else {
             (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
@@ -103,6 +101,9 @@ async function addE2e(host, options) {
                 implicitDependencies: [options.projectName],
             });
         }
+        if (!options.useProjectJson || options.isTsSolutionSetup) {
+            (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), packageJson);
+        }
         const e2eTask = await configurationGenerator(host, {
             rootProject: options.rootProject,
             project: options.e2eProjectName,

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

@@ -61,6 +61,7 @@ async function addLinting(host, options) {
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, {
             ...lint_1.extraEslintDependencies.devDependencies,
             'eslint-config-next': versions_1.eslintConfigNextVersion,
+            '@next/eslint-plugin-next': versions_1.eslintConfigNextVersion,
         }));
     }
     return (0, devkit_1.runTasksInSerial)(...tasks);

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

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addProject = addProject;
 const devkit_1 = require("@nx/devkit");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 const versions_1 = require("../../../utils/versions");
 const react_1 = require("@nx/react");
 function addProject(host, options) {
@@ -57,27 +55,31 @@ function addProject(host, options) {
         targets,
         tags: options.parsedTags,
     };
-    if ((0, ts_solution_setup_1.isUsingTsSolutionSetup)(host)) {
-        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
-            name: (0, get_import_path_1.getImportPath)(host, options.name),
-            version: '0.0.1',
-            private: true,
-            dependencies: {
-                next: versions_1.nextVersion,
-                react: react_1.reactVersion,
-                'react-dom': react_1.reactDomVersion,
-            },
-            nx: {
-                name: options.name,
-                projectType: 'application',
-                sourceRoot: options.appProjectRoot,
-                tags: options.parsedTags?.length ? options.parsedTags : undefined,
-            },
-        });
+    const packageJson = {
+        name: options.importPath,
+        version: '0.0.1',
+        private: true,
+        dependencies: {
+            next: versions_1.nextVersion,
+            react: react_1.reactVersion,
+            'react-dom': react_1.reactDomVersion,
+        },
+    };
+    if (!options.useProjectJson) {
+        if (options.projectName !== options.importPath) {
+            packageJson.nx = { name: options.projectName };
+        }
+        if (options.parsedTags?.length) {
+            packageJson.nx ??= {};
+            packageJson.nx.tags = options.parsedTags;
+        }
     }
     else {
         (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
             ...project,
         });
     }
+    if (!options.useProjectJson || options.isTsSolutionSetup) {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), packageJson);
+    }
 }

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

@@ -18,7 +18,7 @@ function createApplicationFiles(host, options) {
                 : 'pages/'
         : '';
     const templateVariables = {
-        ...(0, devkit_1.names)(options.name),
+        ...(0, devkit_1.names)(options.projectSimpleName),
         ...options,
         dot: '.',
         tmpl: '',

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

@@ -1,14 +1,17 @@
 import { Tree } from '@nx/devkit';
 import { Schema } from '../schema';
-export interface NormalizedSchema extends Schema {
+export interface NormalizedSchema extends Omit<Schema, 'name' | 'useTsSolution'> {
     projectName: string;
+    projectSimpleName: string;
     appProjectRoot: string;
+    importPath: string;
     outputPath: string;
     e2eProjectName: string;
     e2eProjectRoot: string;
     parsedTags: string[];
     fileName: string;
     styledModule: null | string;
+    isTsSolutionSetup: boolean;
     js?: boolean;
 }
 export declare function normalizeOptions(host: Tree, options: Schema): Promise<NormalizedSchema>;

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

@@ -5,9 +5,10 @@ const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const eslint_1 = require("@nx/eslint");
 const assertion_1 = require("@nx/react/src/utils/assertion");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
-    const { projectName: appProjectName, projectRoot: appProjectRoot } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'application');
+    const { projectName, names: projectNames, projectRoot: appProjectRoot, importPath, } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'application',
         directory: options.directory,
@@ -18,10 +19,11 @@ async function normalizeOptions(host, options) {
     const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
+    const isTsSolutionSetup = options.useTsSolution || (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
+    const appProjectName = !isTsSolutionSetup || options.name ? projectName : importPath;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
-    const name = (0, devkit_1.names)(options.name).fileName;
-    const outputPath = (0, devkit_1.joinPathFragments)('dist', appProjectRoot, ...(options.rootProject ? [name] : []));
+    const outputPath = (0, devkit_1.joinPathFragments)('dist', appProjectRoot, ...(options.rootProject ? [projectNames.projectFileName] : []));
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
@@ -42,12 +44,16 @@ async function normalizeOptions(host, options) {
         e2eTestRunner: options.e2eTestRunner || 'playwright',
         fileName,
         linter: options.linter || eslint_1.Linter.EsLint,
-        name,
         outputPath,
         parsedTags,
         projectName: appProjectName,
+        projectSimpleName: projectNames.projectSimpleName,
         style: options.style || 'css',
+        swc: options.swc ?? true,
         styledModule,
         unitTestRunner: options.unitTestRunner || 'jest',
+        importPath,
+        isTsSolutionSetup,
+        useProjectJson: options.useProjectJson ?? !isTsSolutionSetup,
     };
 }

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

@@ -22,4 +22,5 @@ export interface Schema {
   addPlugin?: boolean;
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
+  useProjectJson?: boolean;
 }

package/src/generators/application/schema.json

@@ -144,6 +144,10 @@
       "default": false,
       "hidden": true,
       "x-priority": "internal"
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],

package/src/generators/custom-server/custom-server.js

@@ -8,20 +8,17 @@ const add_swc_to_custom_server_1 = require("../../utils/add-swc-to-custom-server
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function customServerGenerator(host, options) {
     const project = (0, devkit_2.readProjectConfiguration)(host, options.project);
+    const swcServerName = '.server.swcrc';
     const nxJson = (0, devkit_2.readNxJson)(host);
     const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
         ? p === '@nx/next/plugin'
         : p.plugin === '@nx/next/plugin');
-    if (project.targets?.build?.executor !== '@nx/next:build' &&
-        project.targets?.build?.executor !== '@nrwl/next:build' &&
-        !hasPlugin) {
+    if (project.targets?.build?.executor !== '@nx/next:build' && !hasPlugin) {
         devkit_2.logger.error(`Project ${options.project} is not a Next.js project. Did you generate it with "nx g @nx/next:app"?`);
         return;
     }
     // In Nx 18 next artifacts are inside the project root .next/ & dist/ (for custom server)
-    const outputPath = hasPlugin
-        ? `dist/${project.root}`
-        : project.targets?.build?.options?.outputPath;
+    const outputPath = `dist/${project.root}-server`;
     const root = project.root;
     if ((!root ||
         !outputPath ||
@@ -38,7 +35,9 @@ async function customServerGenerator(host, options) {
     }
     // In Nx 18 next artifacts are inside the project root .next/ & dist/ (for custom server)
     // So we need ensure the mapping is correct from dist to the project root
-    const projectPathFromDist = `../../${(0, devkit_2.offsetFromRoot)(project.root)}${project.root}`;
+    const projectPathFromDist = hasPlugin
+        ? `../../${(0, devkit_2.offsetFromRoot)(project.root)}${project.root}`
+        : `${(0, devkit_2.offsetFromRoot)(`dist/${project.root}`)}${project.root}`;
     const offset = (0, devkit_2.offsetFromRoot)(project.root);
     const isTsSolution = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
     (0, devkit_2.generateFiles)(host, (0, path_1.join)(__dirname, 'files'), project.root, {
@@ -72,6 +71,9 @@ async function customServerGenerator(host, options) {
             tsConfig: `${root}/tsconfig.server.json`,
             clean: false,
             assets: [],
+            ...(options.compiler === 'tsc'
+                ? {}
+                : { swcrc: `${root}/${swcServerName}` }),
         },
         configurations: {
             development: {},
@@ -105,6 +107,11 @@ async function customServerGenerator(host, options) {
         return json;
     });
     if (options.compiler === 'swc') {
-        return (0, add_swc_to_custom_server_1.configureForSwc)(host, project.root);
+        // Update app swc to exlude server files
+        (0, devkit_2.updateJson)(host, (0, path_1.join)(project.root, '.swcrc'), (json) => {
+            json.exclude = [...(json.exclude ?? []), 'server/**'];
+            return json;
+        });
+        return (0, add_swc_to_custom_server_1.configureForSwc)(host, project.root, swcServerName, ['src/**/*']);
     }
 }

package/src/generators/custom-server/files/server/main.ts__tmpl__

@@ -15,8 +15,8 @@ import next from 'next';
 // - The fallback `__dirname` is for production builds.
 // - Feel free to change this to suit your needs.
 
-const dir = process.env.NX_NEXT_DIR || <%- hasPlugin ? `path.join(__dirname, '${projectPathFromDist}')` : `path.join(__dirname, '..')`; %> 
 const dev = process.env.NODE_ENV === 'development';
+const dir = process.env.NX_NEXT_DIR || <%- hasPlugin ? `path.join(__dirname, '${projectPathFromDist}')` : `path.join(__dirname, dev ? '..' : '', '${projectPathFromDist}')`; %> 
 
 // HTTP Server options:
 // - Feel free to change this to suit your needs.

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

@@ -47,9 +47,12 @@ async function cypressComponentConfigurationInternal(tree, options) {
 }
 async function addFiles(tree, projectConfig, opts) {
     const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const { getInstalledCypressMajorVersion } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/versions'));
+    const installedCypressMajorVersion = getInstalledCypressMajorVersion(tree);
     const ctFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(ctFile, 'utf-8'));
-    tree.write(ctFile, `import { mount } from 'cypress/react18';\nimport './styles.ct.css';\n${updatedCommandFile}`);
+    const moduleSpecifier = installedCypressMajorVersion >= 14 ? 'cypress/react' : 'cypress/react18';
+    tree.write(ctFile, `import { mount } from '${moduleSpecifier}';\nimport './styles.ct.css';\n${updatedCommandFile}`);
     const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
     const updatedCyConfig = await addDefaultCTConfig(tree.read(cyFile, 'utf-8'));
     tree.write(cyFile, `import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';\n${updatedCyConfig}`);

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

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function normalizeOptions(host, options) {
-    await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'library');
+    await (0, project_name_and_root_utils_1.ensureRootProjectName)(options, 'library');
     const { projectRoot, importPath } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(host, {
         name: options.name,
         projectType: 'library',
@@ -16,10 +16,12 @@ async function normalizeOptions(host, options) {
     const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
         nxJson.useInferencePlugins !== false;
     options.addPlugin ??= addPlugin;
+    const isUsingTsSolutionConfig = (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host);
     return {
         ...options,
         importPath,
         projectRoot,
-        isUsingTsSolutionConfig: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+        isUsingTsSolutionConfig,
+        useProjectJson: options.useProjectJson ?? !isUsingTsSolutionConfig,
     };
 }

package/src/generators/library/library.js

@@ -14,6 +14,7 @@ const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
 async function libraryGenerator(host, rawOptions) {
     return await libraryGeneratorInternal(host, {
         addPlugin: false,
+        useProjectJson: true,
         ...rawOptions,
     });
 }
@@ -33,7 +34,6 @@ async function libraryGeneratorInternal(host, rawOptions) {
     tasks.push(initTask);
     const libTask = await (0, library_1.libraryGenerator)(host, {
         ...options,
-        bundler: 'none',
         skipFormat: true,
     });
     tasks.push(libTask);
@@ -41,9 +41,11 @@ async function libraryGeneratorInternal(host, rawOptions) {
         const devDependencies = {};
         if (options.linter === 'eslint') {
             devDependencies['eslint-config-next'] = versions_2.eslintConfigNextVersion;
+            devDependencies['@next/eslint-plugin-next'] = versions_2.eslintConfigNextVersion;
         }
         if (options.unitTestRunner && options.unitTestRunner !== 'none') {
             devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+            devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
         }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
     }
@@ -95,7 +97,7 @@ async function libraryGeneratorInternal(host, rawOptions) {
         ? ['eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
         : undefined);
     if (options.isUsingTsSolutionConfig) {
-        (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.projectRoot);
     }
     (0, sort_fields_1.sortPackageJsonFields)(host, options.projectRoot);
     if (!options.skipFormat) {

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

@@ -24,4 +24,5 @@ export interface Schema {
   setParserOptionsProject?: boolean;
   skipPackageJson?: boolean;
   addPlugin?: boolean;
+  useProjectJson?: boolean;
 }

package/src/generators/library/schema.json

@@ -158,6 +158,10 @@
       "default": false,
       "description": "Do not add dependencies to `package.json`.",
       "x-priority": "internal"
+    },
+    "useProjectJson": {
+      "type": "boolean",
+      "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
     }
   },
   "required": ["directory"],

package/src/generators/setup-tailwind/files/postcss.config.js__tmpl__

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+}

package/src/generators/setup-tailwind/files/tailwind.config.js__tmpl__

@@ -0,0 +1,23 @@
+// const { createGlobPatternsForDependencies } = require('@nx/next/tailwind');
+
+// The above utility import will not work if you are using Next.js' --turbo.
+// Instead you will have to manually add the dependent paths to be included.
+// For example
+// ../libs/buttons/**/*.{ts,tsx,js,jsx,html}',                 <--- Adding a shared lib
+// !../libs/buttons/**/*.{stories,spec}.{ts,tsx,js,jsx,html}', <--- Skip adding spec/stories files from shared lib
+
+// If you are **not** using `--turbo` you can uncomment both lines 1 & 19.
+// A discussion of the issue can be found: https://github.com/nrwl/nx/issues/26510
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './{src,pages,components,app}/**/*.{ts,tsx,js,jsx,html}',
+    '!./{src,pages,components,app}/**/*.{stories,spec}.{ts,tsx,js,jsx,html}',
+//     ...createGlobPatternsForDependencies(__dirname)
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.d.ts

@@ -0,0 +1,3 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function addTailwindStyleImports(tree: Tree, project: ProjectConfiguration, _options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/add-tailwind-style-imports.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTailwindStyleImports = addTailwindStyleImports;
+const devkit_1 = require("@nx/devkit");
+// base directories and file types to simplify locating the stylesheet
+const baseDirs = ['src', 'pages', 'src/pages', 'src/app', 'app'];
+const fileNames = ['styles', 'global'];
+const extensions = ['.css', '.scss', '.less'];
+const knownLocations = baseDirs.flatMap((dir) => fileNames.flatMap((name) => extensions.map((ext) => `${dir}/${name}${ext}`)));
+function addTailwindStyleImports(tree, project, _options) {
+    const candidates = knownLocations.map((currentPath) => (0, devkit_1.joinPathFragments)(project.root, currentPath));
+    const stylesPath = candidates.find((currentStylePath) => tree.exists(currentStylePath));
+    if (stylesPath) {
+        const content = tree.read(stylesPath).toString();
+        tree.write(stylesPath, `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n${content}`);
+    }
+    else {
+        devkit_1.logger.warn((0, devkit_1.stripIndents) `
+        Could not find stylesheet to update. Add the following imports to your stylesheet (e.g. styles.css):
+        
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+          
+        See our guide for more details: https://nx.dev/guides/using-tailwind-css-in-react`);
+    }
+}

package/src/generators/setup-tailwind/lib/update-project.d.ts

@@ -0,0 +1,3 @@
+import type { ProjectConfiguration, Tree } from '@nx/devkit';
+import { SetupTailwindOptions } from '../schema';
+export declare function updateProject(tree: Tree, config: ProjectConfiguration, options: SetupTailwindOptions): void;

package/src/generators/setup-tailwind/lib/update-project.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateProject = updateProject;
+const devkit_1 = require("@nx/devkit");
+function updateProject(tree, config, options) {
+    if (config?.targets?.build?.executor === '@nx/webpack:webpack') {
+        config.targets.build.options ??= {};
+        config.targets.build.options.postcssConfig = (0, devkit_1.joinPathFragments)(config.root, 'postcss.config.js');
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, config);
+    }
+}

package/src/generators/setup-tailwind/schema.d.ts

@@ -0,0 +1,6 @@
+export interface SetupTailwindOptions {
+    project: string;
+    buildTarget?: string;
+    skipFormat?: boolean;
+    skipPackageJson?: boolean;
+}

package/src/generators/setup-tailwind/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/generators/setup-tailwind/schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxNextTailwindSetupGenerator",
+  "title": "Configures Tailwind CSS for an application or a buildable/publishable library.",
+  "description": "Adds the Tailwind CSS configuration files for a Next.js project and installs, if needed, the packages required for Tailwind CSS to work.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g setup-tailwind --project=my-app",
+      "description": "Initialize Tailwind configuration for the `my-app` project."
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add the Tailwind CSS setup for.",
+      "alias": "p",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-dropdown": "projects",
+      "x-prompt": "What project would you like to add the Tailwind CSS setup?",
+      "x-priority": "important"
+    },
+    "buildTarget": {
+      "type": "string",
+      "description": "The name of the target used to build the project. This option is not needed in most cases.",
+      "default": "build",
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skips formatting the workspace after the generator completes.",
+      "x-priority": "internal"
+    },
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add dependencies to `package.json`.",
+      "x-priority": "internal"
+    }
+  },
+  "additionalProperties": false,
+  "required": ["project"]
+}

package/src/generators/setup-tailwind/setup-tailwind.d.ts

@@ -0,0 +1,4 @@
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+import type { SetupTailwindOptions } from './schema';
+export declare function setupTailwindGenerator(tree: Tree, options: SetupTailwindOptions): Promise<GeneratorCallback>;
+export default setupTailwindGenerator;

package/src/generators/setup-tailwind/setup-tailwind.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupTailwindGenerator = setupTailwindGenerator;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("@nx/react/src/utils/versions");
+const add_tailwind_style_imports_1 = require("./lib/add-tailwind-style-imports");
+const update_project_1 = require("./lib/update-project");
+const path_1 = require("path");
+async function setupTailwindGenerator(tree, options) {
+    const tasks = [];
+    const project = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'postcss.config.js')) ||
+        tree.exists((0, devkit_1.joinPathFragments)(project.root, 'tailwind.config.js'))) {
+        devkit_1.logger.info(`Skipping setup since there are existing PostCSS or Tailwind configuration files. For manual setup instructions, see https://nx.dev/guides/using-tailwind-css-in-react.`);
+        return;
+    }
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, './files'), project.root, {
+        tmpl: '',
+    });
+    (0, add_tailwind_style_imports_1.addTailwindStyleImports)(tree, project, options);
+    (0, update_project_1.updateProject)(tree, project, options);
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
+            autoprefixer: versions_1.autoprefixerVersion,
+            postcss: versions_1.postcssVersion,
+            tailwindcss: versions_1.tailwindcssVersion,
+        }));
+    }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = setupTailwindGenerator;

package/src/utils/add-swc-to-custom-server.d.ts

@@ -1,2 +1,2 @@
 import { Tree } from '@nx/devkit';
-export declare function configureForSwc(tree: Tree, projectRoot: string): () => void;
+export declare function configureForSwc(tree: Tree, projectRoot: string, swcConfigName?: string, additonalExludes?: string[]): () => void;

package/src/utils/add-swc-to-custom-server.js

@@ -4,28 +4,24 @@ exports.configureForSwc = configureForSwc;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("@nx/js/src/utils/versions");
 const add_swc_config_1 = require("@nx/js/src/utils/swc/add-swc-config");
-function configureForSwc(tree, projectRoot) {
-    const swcConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, '.swcrc');
+function configureForSwc(tree, projectRoot, swcConfigName = '.swcrc', additonalExludes = []) {
+    const swcConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, swcConfigName);
     const rootPackageJson = (0, devkit_1.readJson)(tree, 'package.json');
     const hasSwcDepedency = rootPackageJson.dependencies?.['@swc/core'] ||
         rootPackageJson.devDependencies?.['@swc/core'];
     const hasSwcCliDependency = rootPackageJson.dependencies?.['@swc/cli'] ||
         rootPackageJson.devDependencies?.['@swc/cli'];
     if (!tree.exists(swcConfigPath)) {
-        (0, add_swc_config_1.addSwcConfig)(tree, projectRoot);
-    }
-    if (tree.exists(swcConfigPath)) {
-        (0, devkit_1.updateJson)(tree, swcConfigPath, (json) => {
-            return {
-                ...json,
-                exclude: [...json.exclude, '.*.d.ts$'],
-            };
-        });
+        // We need to create a swc config file specific for custom server
+        (0, add_swc_config_1.addSwcConfig)(tree, projectRoot, 'commonjs', false, swcConfigName, [
+            ...additonalExludes,
+            '.*.d.ts$',
+        ]);
     }
     if (!hasSwcDepedency || !hasSwcCliDependency) {
         addSwcDependencies(tree);
-        return () => (0, devkit_1.installPackagesTask)(tree);
     }
+    return () => (0, devkit_1.installPackagesTask)(tree);
 }
 function addSwcDependencies(tree) {
     return (0, devkit_1.addDependenciesToPackageJson)(tree, {

package/src/utils/versions.d.ts

@@ -1,7 +1,7 @@
 export declare const nxVersion: any;
-export declare const nextVersion = "~15.1.4";
-export declare const next14Version = "~14.2.16";
-export declare const eslintConfigNextVersion = "14.2.16";
+export declare const nextVersion = "~15.2.4";
+export declare const next14Version = "~14.2.26";
+export declare const eslintConfigNextVersion = "^15.2.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,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tsLibVersion = exports.babelPluginStyledComponentsVersion = exports.emotionServerVersion = exports.lessLoader = exports.sassVersion = exports.eslintConfigNextVersion = exports.next14Version = exports.nextVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
-exports.nextVersion = '~15.1.4';
-exports.next14Version = '~14.2.16';
-exports.eslintConfigNextVersion = '14.2.16';
+exports.nextVersion = '~15.2.4';
+exports.next14Version = '~14.2.26';
+exports.eslintConfigNextVersion = '^15.2.4';
 exports.sassVersion = '1.62.1';
 exports.lessLoader = '11.1.0';
 exports.emotionServerVersion = '11.11.0';

package/tailwind.d.ts

@@ -1,2 +1,7 @@
-import { createGlobPatternsForDependencies } from '@nx/react/tailwind';
-export { createGlobPatternsForDependencies };
+/**
+ * Generates a set of glob patterns based off the source root of the app and its dependencies
+ * @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies
+ * @param fileGlobPatternToInclude pass a custom glob pattern to be used
+ * @param fileGlobPatternToExclude pass a custom glob pattern for files to be excluded
+ */
+export declare function createGlobPatternsForDependencies(dirPath: string, fileGlobPatternToInclude?: string, fileGlobPatternToExclude?: string): any;

package/tailwind.js

@@ -1,6 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createGlobPatternsForDependencies = void 0;
-// Re-exporting for convenience and backwards compatibility.
-const tailwind_1 = require("@nx/react/tailwind");
-Object.defineProperty(exports, "createGlobPatternsForDependencies", { enumerable: true, get: function () { return tailwind_1.createGlobPatternsForDependencies; } });
+exports.createGlobPatternsForDependencies = createGlobPatternsForDependencies;
+const generate_globs_1 = require("@nx/js/src/utils/generate-globs");
+const path_1 = require("path");
+/**
+ * Generates a set of glob patterns based off the source root of the app and its dependencies
+ * @param dirPath workspace relative directory path that will be used to infer the parent project and dependencies
+ * @param fileGlobPatternToInclude pass a custom glob pattern to be used
+ * @param fileGlobPatternToExclude pass a custom glob pattern for files to be excluded
+ */
+function createGlobPatternsForDependencies(dirPath, fileGlobPatternToInclude = '/**/*.{tsx,ts,jsx,js,html}', fileGlobPatternToExclude = '/**/*.{stories,spec}.{tsx,ts,jsx,js,html}') {
+    /**
+     * There is an issue with TailwindCSS v4 and how globs patterns are consumed.
+     * This is a temporary workaround to support both TailwindCSS v4 and v3.
+     * Once TailwindCSS v3 is no longer supported, this workaround can be removed.
+     */
+    const tailwindVersion = require(require.resolve('tailwindcss/package.json', {
+        paths: [dirPath],
+    })).version;
+    if (tailwindVersion && typeof tailwindVersion === 'string') {
+        const majorVersion = parseInt(tailwindVersion.split('.')[0], 10);
+        if (majorVersion >= 4) {
+            try {
+                return [
+                    ...(0, generate_globs_1.createGlobPatternsForDependencies)(dirPath, fileGlobPatternToInclude).map((glob) => (0, path_1.relative)(dirPath, glob)),
+                    ...(0, generate_globs_1.createGlobPatternsForDependencies)(dirPath, fileGlobPatternToExclude).map((glob) => `!${(0, path_1.relative)(dirPath, glob)}`),
+                ];
+            }
+            catch (e) {
+                console.warn('\nWARNING: There was an error creating glob patterns, returning an empty array\n' +
+                    `${e.message}\n`);
+            }
+        }
+        else {
+            const { createGlobPatternsForDependencies: reactGlobPatternFunction, } = require('@nx/react/tailwind');
+            return reactGlobPatternFunction(dirPath, fileGlobPatternToInclude);
+        }
+    }
+    return [];
+}