@nx/next 18.2.2 → 18.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.2.2",
+  "version": "18.3.0-beta.0",
   "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,25 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.2.2",
+    "@nx/devkit": "18.3.0-beta.0",
     "@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.3.0-beta.0",
+    "@nx/eslint": "18.3.0-beta.0",
+    "@nx/react": "18.3.0-beta.0",
+    "@nx/web": "18.3.0-beta.0",
+    "@nx/webpack": "18.3.0-beta.0",
+    "@nx/workspace": "18.3.0-beta.0",
+    "@nrwl/next": "18.3.0-beta.0"
   },
   "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/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/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
@@ -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,