@nx/next 18.0.4 → 18.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.0.4",
+  "version": "18.0.5",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -34,7 +34,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.0.4",
+    "@nx/devkit": "18.0.5",
     "@babel/plugin-proposal-decorators": "^7.22.7",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -45,13 +45,13 @@
     "url-loader": "^4.1.1",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "18.0.4",
-    "@nx/eslint": "18.0.4",
-    "@nx/react": "18.0.4",
-    "@nx/web": "18.0.4",
-    "@nx/webpack": "18.0.4",
-    "@nx/workspace": "18.0.4",
-    "@nrwl/next": "18.0.4"
+    "@nx/js": "18.0.5",
+    "@nx/eslint": "18.0.5",
+    "@nx/react": "18.0.5",
+    "@nx/web": "18.0.5",
+    "@nx/webpack": "18.0.5",
+    "@nx/workspace": "18.0.5",
+    "@nrwl/next": "18.0.5"
   },
   "publishConfig": {
     "access": "public"

package/plugins/with-nx.js

@@ -119,6 +119,11 @@ function withNx(_nextConfig = {}, context = getWithNxContext()) {
                         ? joinPathFragments(outputDir, nextConfig.distDir)
                         : joinPathFragments(outputDir, '.next');
             }
+            // If we are running a static serve of the Next.js app, we need to change the output to 'export' and the distDir to 'out'.
+            if (process.env.NX_SERVE_STATIC_BUILD_RUNNING === 'true') {
+                nextConfig.output = 'export';
+                nextConfig.distDir = 'out';
+            }
             const userWebpackConfig = nextConfig.webpack;
             const { createWebpackConfig } = require('@nx/next/src/utils/config');
             nextConfig.webpack = (a, b) => createWebpackConfig(workspaceRoot, projectDirectory, options.fileReplacements, options.assets)(userWebpackConfig ? userWebpackConfig(a, b) : a, b);
@@ -219,39 +224,19 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
              */
             // Default SVGR support to be on for projects.
             if (nx?.svgr !== false) {
-                config.module.rules.push({
-                    test: /\.svg$/,
-                    oneOf: [
-                        // If coming from JS/TS file, then transform into React component using SVGR.
-                        {
-                            issuer: /\.[jt]sx?$/,
-                            use: [
-                                {
-                                    loader: require.resolve('@svgr/webpack'),
-                                    options: {
-                                        svgo: false,
-                                        titleProp: true,
-                                        ref: true,
-                                    },
-                                },
-                                {
-                                    loader: require.resolve('url-loader'),
-                                    options: {
-                                        limit: 10000, // 10kB
-                                        name: '[name].[hash:7].[ext]',
-                                    },
-                                },
-                            ],
-                        },
-                        // Fallback to plain URL loader if someone just imports the SVG and references it on the <img src> tag
-                        {
-                            loader: require.resolve('url-loader'),
-                            options: {
-                                limit: 10000, // 10kB
-                                name: '[name].[hash:7].[ext]',
-                            },
-                        },
-                    ],
+                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'],
                 });
             }
             return userWebpack(config, options);

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

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

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

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

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

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

package/src/plugins/plugin.d.ts

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

package/src/plugins/plugin.js

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

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

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