@nx/next 18.2.2 → 18.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.2.2",
+  "version": "18.2.4",
   "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,24 +34,24 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.2.2",
+    "@nx/devkit": "18.2.4",
     "@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": "18.2.2",
-    "@nx/eslint": "18.2.2",
-    "@nx/react": "18.2.2",
-    "@nx/web": "18.2.2",
-    "@nx/webpack": "18.2.2",
-    "@nx/workspace": "18.2.2",
-    "@nrwl/next": "18.2.2"
+    "@nx/js": "18.2.4",
+    "@nx/eslint": "18.2.4",
+    "@nx/react": "18.2.4",
+    "@nx/web": "18.2.4",
+    "@nx/webpack": "18.2.4",
+    "@nx/workspace": "18.2.4",
+    "@nrwl/next": "18.2.4"
   },
   "publishConfig": {
     "access": "public"

package/plugins/with-nx.js

@@ -224,19 +224,54 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
              */
             // 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'],
+                // 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: {
+                                svgo: false,
+                                titleProp: true,
+                                ref: true,
+                            },
+                        },
+                        {
+                            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);

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/lib/add-e2e.js

@@ -33,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
@@ -63,8 +63,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

@@ -31,6 +31,7 @@ function createApplicationFiles(host, options) {
         styleContent: (0, create_application_files_helpers_1.createStyleRules)(),
         pageStyleContent: `.page {}`,
         stylesExt: options.style === 'less' ? options.style : 'css',
+        style: options.style === 'tailwind' ? 'css' : options.style,
     };
     const generatedAppFilePath = options.src
         ? (0, path_1.join)(options.appProjectRoot, 'src')

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,6 +63,9 @@ async function normalizeOptions(host, options) {
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
         e2eTestRunner: options.e2eTestRunner || 'cypress',
         fileName,
         linter: options.linter || eslint_1.Linter.EsLint,

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 ]"