@nx/next 18.0.3 → 18.1.0-beta.0

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.1.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,7 +34,7 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "18.0.3",
+    "@nx/devkit": "18.1.0-beta.0",
     "@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.1.0-beta.0",
+    "@nx/eslint": "18.1.0-beta.0",
+    "@nx/react": "18.1.0-beta.0",
+    "@nx/web": "18.1.0-beta.0",
+    "@nx/webpack": "18.1.0-beta.0",
+    "@nx/workspace": "18.1.0-beta.0",
+    "@nrwl/next": "18.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/plugins/with-nx.js

@@ -219,39 +219,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/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/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';