@nx/next 18.0.3 → 18.0.5

package/migrations.json

@@ -92,6 +92,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "18.0.4": {
+      "version": "18.0.4-beta.0",
+      "packages": {
+        "@swc-node/register": {
+          "version": "~1.8.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "18.0.3",
+  "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.3",
+    "@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.3",
-    "@nx/eslint": "18.0.3",
-    "@nx/react": "18.0.3",
-    "@nx/web": "18.0.3",
-    "@nx/webpack": "18.0.3",
-    "@nx/workspace": "18.0.3",
-    "@nrwl/next": "18.0.3"
+    "@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/executors/build/lib/create-next-config-file.js

@@ -41,7 +41,10 @@ function createNextConfigFile(options, context) {
     const moduleFilesToCopy = getRelativeFilesToCopy(configRelativeToProjectRoot, projectRoot);
     for (const moduleFile of moduleFilesToCopy) {
         (0, fs_extra_1.ensureDirSync)((0, path_1.dirname)((0, path_1.join)(context.root, options.outputPath, moduleFile)));
-        (0, fs_extra_1.copyFileSync)((0, path_1.join)(context.root, projectRoot, moduleFile), (0, path_1.join)(context.root, options.outputPath, moduleFile));
+        // We already generate a build version of package.json in the dist folder.
+        if (moduleFile !== 'package.json') {
+            (0, fs_extra_1.copyFileSync)((0, path_1.join)(context.root, projectRoot, moduleFile), (0, path_1.join)(context.root, options.outputPath, moduleFile));
+        }
     }
 }
 exports.createNextConfigFile = createNextConfigFile;

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/custom-server/custom-server.js

@@ -6,17 +6,26 @@ const path_1 = require("path");
 const add_swc_to_custom_server_1 = require("../../utils/add-swc-to-custom-server");
 async function customServerGenerator(host, options) {
     const project = (0, devkit_1.readProjectConfiguration)(host, options.project);
+    const nxJson = (0, devkit_1.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') {
+        project.targets?.build?.executor !== '@nrwl/next:build' &&
+        !hasPlugin) {
         devkit_1.logger.error(`Project ${options.project} is not a Next.js project. Did you generate it with "nx g @nx/next:app"?`);
         return;
     }
-    const outputPath = project.targets?.build?.options?.outputPath;
+    // 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 root = project.root;
-    if (!root ||
+    if ((!root ||
         !outputPath ||
         !project.targets?.build?.configurations?.development ||
-        !project.targets?.build?.configurations?.production) {
+        !project.targets?.build?.configurations?.production) &&
+        !hasPlugin) {
         devkit_1.logger.error(`Project ${options.project} has invalid config. Did you generate it with "nx g @nx/next:app"?`);
         return;
     }
@@ -25,16 +34,28 @@ async function customServerGenerator(host, options) {
         devkit_1.logger.warn(`Project ${options.project} has custom server targets already: build-custom-server, serve-custom-server. Remove these targets from project and try again.`);
         return;
     }
+    // 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_1.offsetFromRoot)(project.root)}${project.root}`;
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, 'files'), project.root, {
         ...options,
+        hasPlugin,
+        projectPathFromDist,
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(project.root),
         projectRoot: project.root,
         tmpl: '',
     });
-    project.targets.build.dependsOn = ['build-custom-server'];
-    project.targets.serve.options.customServerTarget = `${options.project}:serve-custom-server`;
-    project.targets.serve.configurations.development.customServerTarget = `${options.project}:serve-custom-server:development`;
-    project.targets.serve.configurations.production.customServerTarget = `${options.project}:serve-custom-server:production`;
+    if (!hasPlugin) {
+        project.targets.build.dependsOn = ['build-custom-server'];
+        project.targets.serve.options.customServerTarget = `${options.project}:serve-custom-server`;
+        project.targets.serve.configurations.development.customServerTarget = `${options.project}:serve-custom-server:development`;
+        project.targets.serve.configurations.production.customServerTarget = `${options.project}:serve-custom-server:production`;
+    }
+    else {
+        project.targets['build'] = {
+            dependsOn: ['^build', 'build-custom-server'],
+        };
+    }
     project.targets['build-custom-server'] = {
         executor: options.compiler === 'tsc' ? '@nx/js:tsc' : '@nx/js:swc',
         defaultConfiguration: 'production',

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

@@ -2,9 +2,8 @@
  * This is only a minimal custom server to get started.
  * You may want to consider using Express or another server framework, and enable security features such as CORS.
  *
- * For more examples, see the Next.js repo:
- * - Express: https://github.com/vercel/next.js/tree/canary/examples/custom-server-express
- * - Hapi: https://github.com/vercel/next.js/tree/canary/examples/custom-server-hapi
+ * For an example, see the Next.js repo:
+ * Node - https://github.com/vercel/next.js/blob/canary/examples/custom-server
  */
 import { createServer } from 'http';
 import { parse } from 'node:url';
@@ -15,7 +14,8 @@ import next from 'next';
 // - The environment variable is set by `@nx/next:server` when running the dev server.
 // - The fallback `__dirname` is for production builds.
 // - Feel free to change this to suit your needs.
-const dir = process.env.NX_NEXT_DIR || path.join(__dirname, '..');
+
+const dir = process.env.NX_NEXT_DIR || <%- hasPlugin ? `path.join(__dirname, '${projectPathFromDist}')` : `path.join(__dirname, '..')`; %> 
 const dev = process.env.NODE_ENV === 'development';
 
 // HTTP Server options:

package/src/generators/custom-server/files/tsconfig.server.json__tmpl__

@@ -4,7 +4,9 @@
     "module": "commonjs",
     "noEmit": false,
     "incremental": true,
+    <% if(hasPlugin && compiler === 'tsc') { %>
     "tsBuildInfoFile": "<%= offsetFromRoot %>tmp/buildcache/<%= projectRoot %>/server",
+    <% } %>
     "types": [
       "node"
     ]

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);
 }

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

@@ -12,7 +12,15 @@ function configureForSwc(tree, projectRoot) {
     const hasSwcCliDependency = rootPackageJson.dependencies?.['@swc/cli'] ||
         rootPackageJson.devDependencies?.['@swc/cli'];
     if (!tree.exists(swcConfigPath)) {
-        (0, add_swc_config_1.addSwcConfig)(tree, 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$'],
+            };
+        });
     }
     if (!hasSwcDepedency || !hasSwcCliDependency) {
         addSwcDependencies(tree);

package/src/utils/versions.d.ts

@@ -9,4 +9,4 @@ export declare const tsLibVersion = "^2.3.0";
 export declare const swcCliVersion = "~0.1.62";
 export declare const swcCoreVersion = "~1.3.85";
 export declare const swcHelpersVersion = "~0.5.2";
-export declare const swcNodeVersion = "~1.6.7";
+export declare const swcNodeVersion = "~1.8.0";

package/src/utils/versions.js

@@ -12,4 +12,4 @@ exports.tsLibVersion = '^2.3.0';
 exports.swcCliVersion = '~0.1.62';
 exports.swcCoreVersion = '~1.3.85';
 exports.swcHelpersVersion = '~0.5.2';
-exports.swcNodeVersion = '~1.6.7';
+exports.swcNodeVersion = '~1.8.0';