@nx/next 17.0.3 → 17.0.4

package/src/executors/export/export.impl.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const devkit_1 = require("@nx/devkit");
 const export_1 = require("next/dist/export");
-const buildable_libs_utils_1 = require("@nx/js/src/utils/buildable-libs-utils");
 const nextTrace = require("next/dist/trace");
 const os_1 = require("os");
 const child_process_1 = require("child_process");
 const chalk = require("chalk");
+const semver_1 = require("semver");
 // platform specific command name
 const pmCmd = (0, os_1.platform)() === 'win32' ? `npx.cmd` : 'npx';
 /**
@@ -22,15 +22,15 @@ const pmCmd = (0, os_1.platform)() === 'win32' ? `npx.cmd` : 'npx';
  * Read https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
  **/
 async function exportExecutor(options, context) {
-    let dependencies = [];
-    if (!options.buildLibsFromSource) {
-        const result = (0, buildable_libs_utils_1.calculateProjectBuildableDependencies)(context.taskGraph, context.projectGraph, context.root, context.projectName, 'build', // this should be generalized
-        context.configurationName);
-        dependencies = result.dependencies;
+    const nextJsVersion = require('next/package.json').version;
+    if ((0, semver_1.satisfies)(nextJsVersion, '>=14.0.0')) {
+        throw new Error('The export command has been removed in Next.js 14. Please update your Next config to use the output property. Read more: https://nextjs.org/docs/pages/building-your-application/deploying/static-exports');
     }
+    // Returns { project: ProjectGraphNode; target: string; configuration?: string;}
     const buildTarget = (0, devkit_1.parseTargetString)(options.buildTarget, context);
     try {
-        const args = getBuildTargetCommand(options);
+        const buildTargetName = (0, devkit_1.targetToTargetString)(buildTarget);
+        const args = getBuildTargetCommand(buildTargetName);
         (0, child_process_1.execFileSync)(pmCmd, args, {
             stdio: [0, 1, 2],
         });
@@ -52,7 +52,7 @@ async function exportExecutor(options, context) {
     return { success: true };
 }
 exports.default = exportExecutor;
-function getBuildTargetCommand(options) {
-    const cmd = ['nx', 'run', options.buildTarget];
+function getBuildTargetCommand(buildTarget) {
+    const cmd = ['nx', 'run', buildTarget];
     return cmd;
 }

package/src/executors/server/custom-server.impl.js

@@ -10,13 +10,14 @@ async function* serveExecutor(options, context) {
             ? 'development'
             : 'production';
     // Setting port that the custom server should use.
-    process.env.PORT = options.port;
+    process.env.PORT = options.port ? `${options.port}` : process.env.PORT;
+    options.port = parseInt(process.env.PORT);
     const projectRoot = context.projectGraph.nodes[context.projectName].data.root;
     yield* runCustomServer(projectRoot, options, context);
 }
 exports.default = serveExecutor;
 async function* runCustomServer(root, options, context) {
-    process.env.NX_NEXT_DIR = root;
+    process.env.NX_NEXT_DIR ??= root;
     process.env.NX_NEXT_PUBLIC_DIR = (0, path_1.join)(root, 'public');
     const baseUrl = `http://${options.hostname || 'localhost'}:${options.port}`;
     const customServerBuild = await (0, devkit_1.runExecutor)((0, devkit_1.parseTargetString)(options.customServerTarget, context), {

package/src/executors/server/schema.json

@@ -52,6 +52,10 @@
     "turbo": {
       "type": "boolean",
       "description": "Activate the incremental bundler for Next.js, which is implemented in Rust. Please note, this feature is exclusively available in development mode."
+    },
+    "experimentalHttps": {
+      "type": "boolean",
+      "description": "Enable HTTPS support for the Next.js development server."
     }
   },
   "required": ["buildTarget"],

package/src/executors/server/server.impl.js

@@ -8,14 +8,15 @@ const create_cli_options_1 = require("../../utils/create-cli-options");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 async function* serveExecutor(options, context) {
+    const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context), context);
+    const projectRoot = context.workspace.projects[context.projectName].root;
+    // This is required for the default custom server to work. See the @nx/next:app generator.
+    const nextDir = !options.dev && (0, path_1.resolve)(context.root, buildOptions.outputPath);
+    process.env.NX_NEXT_DIR ??= options.dev ? projectRoot : nextDir;
     if (options.customServerTarget) {
         return yield* (0, custom_server_impl_1.default)(options, context);
     }
-    const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context.projectGraph), context);
-    const projectRoot = context.workspace.projects[context.projectName].root;
-    const { port, keepAliveTimeout, hostname } = options;
-    // This is required for the default custom server to work. See the @nx/next:app generator.
-    process.env.NX_NEXT_DIR = projectRoot;
+    const { keepAliveTimeout, hostname } = options;
     // Cast to any to overwrite NODE_ENV
     process.env.NODE_ENV = process.env.NODE_ENV
         ? process.env.NODE_ENV
@@ -23,17 +24,18 @@ async function* serveExecutor(options, context) {
             ? 'development'
             : 'production';
     // Setting port that the custom server should use.
-    process.env.PORT = `${options.port}`;
-    const args = (0, create_cli_options_1.createCliOptions)({ port, hostname });
+    process.env.PORT = options.port ? `${options.port}` : process.env.PORT;
+    options.port = parseInt(process.env.PORT);
+    const args = (0, create_cli_options_1.createCliOptions)({ port: options.port, hostname });
     if (keepAliveTimeout && !options.dev) {
         args.push(`--keepAliveTimeout=${keepAliveTimeout}`);
     }
-    const nextDir = (0, path_1.resolve)(context.root, buildOptions.outputPath);
     const mode = options.dev ? 'dev' : 'start';
     const turbo = options.turbo && options.dev ? '--turbo' : '';
+    const experimentalHttps = options.experimentalHttps && options.dev ? '--experimental-https' : '';
     const nextBin = require.resolve('next/dist/bin/next');
     yield* (0, async_iterable_1.createAsyncIterable)(async ({ done, next, error }) => {
-        const server = (0, child_process_1.fork)(nextBin, [mode, ...args, turbo], {
+        const server = (0, child_process_1.fork)(nextBin, [mode, ...args, turbo, experimentalHttps], {
             cwd: options.dev ? projectRoot : nextDir,
             stdio: 'inherit',
         });
@@ -54,10 +56,10 @@ async function* serveExecutor(options, context) {
         process.on('SIGINT', () => killServer());
         process.on('SIGTERM', () => killServer());
         process.on('SIGHUP', () => killServer());
-        await (0, wait_for_port_open_1.waitForPortOpen)(port, { host: options.hostname });
+        await (0, wait_for_port_open_1.waitForPortOpen)(options.port, { host: options.hostname });
         next({
             success: true,
-            baseUrl: `http://${options.hostname ?? 'localhost'}:${port}`,
+            baseUrl: `http://${options.hostname ?? 'localhost'}:${options.port}`,
         });
     });
 }

package/src/generators/application/application.js

@@ -2,6 +2,8 @@
 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 versions_1 = require("@nx/react/src/utils/versions");
 const normalize_options_1 = require("./lib/normalize-options");
 const add_e2e_1 = require("./lib/add-e2e");
 const add_jest_1 = require("./lib/add-jest");
@@ -15,8 +17,11 @@ const add_linting_1 = require("./lib/add-linting");
 const custom_server_1 = require("../custom-server/custom-server");
 const update_cypress_tsconfig_1 = require("./lib/update-cypress-tsconfig");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
+const versions_2 = require("../../utils/versions");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -26,6 +31,12 @@ async function applicationGeneratorInternal(host, schema) {
     const tasks = [];
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
+    const jsInitTask = await (0, js_1.initGenerator)(host, {
+        js: options.js,
+        skipPackageJson: options.skipPackageJson,
+        skipFormat: true,
+    });
+    tasks.push(jsInitTask);
     const nextTask = await (0, init_1.nextInitGenerator)(host, {
         ...options,
         skipFormat: true,
@@ -53,9 +64,22 @@ async function applicationGeneratorInternal(host, schema) {
             compiler: options.swc ? 'swc' : 'tsc',
         });
     }
+    if (!options.skipPackageJson) {
+        const devDependencies = {
+            '@types/react': versions_1.typesReactVersion,
+            '@types/react-dom': versions_1.typesReactDomVersion,
+        };
+        if (schema.unitTestRunner && schema.unitTestRunner !== 'none') {
+            devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+        }
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
+    tasks.push(() => {
+        (0, log_show_project_command_1.logShowProjectCommand)(options.projectName);
+    });
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.applicationGeneratorInternal = applicationGeneratorInternal;

package/src/generators/application/files/app/page.tsx__tmpl__

@@ -15,7 +15,7 @@
   const StyledPage = styled.div`<%- pageStyleContent %>`;
   <% }%>
 <% } %>
-export default async function Index() {
+export default function Index() {
   /*
    * Replace the elements below with your own.
    *

package/src/generators/application/files/common/specs/__fileName__.spec.tsx__tmpl__

@@ -1,11 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-
+<% if (src && !appDir) { %>
+import Index from '../src/pages/index';
+<% } else if (!appDir) { %>
 import Index from '../pages/index';
+<% } else if (appDir && src) {%>
+import Page from '../src/app/page';
+<% } else { %>
+import Page from '../app/page';
+<% } %>
 
-describe('Index', () => {
+describe(<%- appDir ? `'Page'` : `'Index'` %>, () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Index />);
+    const { baseElement } = render(<%- appDir ? `<Page />` : `<Index />` %>);
     expect(baseElement).toBeTruthy();
   });
 });

package/src/generators/application/files/common/tsconfig.json__tmpl__

@@ -15,15 +15,15 @@
     "plugins": [{ "name": "next" }]
   },
   "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.js",
-    "**/*.jsx",
+    "<%= rootPath %>**/*.ts",
+    "<%= rootPath %>**/*.tsx",
+    "<%= rootPath %>**/*.js",
+    "<%= rootPath %>**/*.jsx",
     <% if (appDir) { %>
       "<%= layoutTypeSrcPath %>",
       "<%= layoutTypeDistPath %>",
     <% } %>
     "next-env.d.ts"
   ],
-  "exclude": ["node_modules", "jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+  "exclude": ["node_modules", "jest.config.ts", "<%= rootPath %>**/*.spec.ts", "<%= rootPath %>**/*.test.ts"]
 }

package/src/generators/application/files/pages/__fileName__.tsx__tmpl__

@@ -25,6 +25,6 @@ export function Index() {
       <%- appContent %>
     </<%= wrapper %>>
   );
-};
+}
 
 export default Index;

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

@@ -4,9 +4,22 @@ 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'
+        ? p === '@nx/next/plugin'
+        : p.plugin === '@nx/next/plugin');
     if (options.e2eTestRunner === 'cypress') {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+        if (!hasPlugin) {
+            await (0, web_1.webStaticServeGenerator)(host, {
+                buildTarget: `${options.projectName}:build`,
+                outputPath: `${options.outputPath}/out`,
+                targetName: 'serve-static',
+                spa: true,
+            });
+        }
         (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
             root: options.e2eProjectRoot,
             sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
@@ -20,8 +33,17 @@ async function addE2e(host, options) {
             project: options.e2eProjectName,
             directory: 'src',
             skipFormat: true,
-            devServerTarget: `${options.projectName}:serve`,
+            devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+            baseUrl: options.e2eWebServerAddress,
             jsx: true,
+            webServerCommands: hasPlugin
+                ? {
+                    default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
+                }
+                : undefined,
+            ciWebServerCommand: hasPlugin
+                ? `nx run ${options.projectName}:serve-static`
+                : undefined,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {
@@ -33,6 +55,7 @@ async function addE2e(host, options) {
             implicitDependencies: [options.projectName],
         });
         return configurationGenerator(host, {
+            rootProject: options.rootProject,
             project: options.e2eProjectName,
             skipFormat: true,
             skipPackageJson: options.skipPackageJson,
@@ -40,8 +63,9 @@ async function addE2e(host, options) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerAddress: 'http://127.0.0.1:4200',
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx 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,
         });
     }
     return () => { };

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

@@ -5,35 +5,27 @@ const eslint_1 = require("@nx/eslint");
 const devkit_1 = require("@nx/devkit");
 const lint_1 = require("@nx/react/src/utils/lint");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
-const lint_project_1 = require("@nx/eslint/src/generators/lint-project/lint-project");
+const versions_1 = require("../../../utils/versions");
 async function addLinting(host, options) {
-    const lintTask = await (0, eslint_1.lintProjectGenerator)(host, {
+    const tasks = [];
+    tasks.push(await (0, eslint_1.lintProjectGenerator)(host, {
         linter: options.linter,
         project: options.projectName,
         tsConfigPaths: [
             (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
         ],
         unitTestRunner: options.unitTestRunner,
-        eslintFilePatterns: [
-            (0, lint_project_1.mapLintPattern)(options.appProjectRoot, '{ts,tsx,js,jsx}', options.rootProject),
-        ],
         skipFormat: true,
         rootProject: options.rootProject,
-    });
+        setParserOptionsProject: options.setParserOptionsProject,
+        addPlugin: options.addPlugin,
+    }));
     if (options.linter === eslint_1.Linter.EsLint && (0, eslint_file_1.isEslintConfigSupported)(host)) {
         (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, [
             'plugin:@nx/react-typescript',
             'next',
             'next/core-web-vitals',
         ]);
-        // Turn off @next/next/no-html-link-for-pages since there is an issue with nextjs throwing linting errors
-        // TODO(nicholas): remove after Vercel updates nextjs linter to only lint ["*.ts", "*.tsx", "*.js", "*.jsx"]
-        (0, eslint_file_1.addOverrideToLintConfig)(host, options.appProjectRoot, {
-            files: ['*.*'],
-            rules: {
-                '@next/next/no-html-link-for-pages': 'off',
-            },
-        }, { insertAtTheEnd: false });
         (0, eslint_file_1.updateOverrideInLintConfig)(host, options.appProjectRoot, (o) => Array.isArray(o.files) &&
             o.files.some((f) => f.match(/\*\.ts$/)) &&
             o.files.some((f) => f.match(/\*\.tsx$/)) &&
@@ -59,7 +51,12 @@ async function addLinting(host, options) {
         }
         (0, eslint_file_1.addIgnoresToLintConfig)(host, options.appProjectRoot, ['.next/**/*']);
     }
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, lint_1.extraEslintDependencies.devDependencies);
-    return (0, devkit_1.runTasksInSerial)(lintTask, installTask);
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, {
+            ...lint_1.extraEslintDependencies.devDependencies,
+            'eslint-config-next': versions_1.eslintConfigNextVersion,
+        }));
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.addLinting = addLinting;

package/src/generators/application/lib/add-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function addPlugin(tree: Tree): void;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function addPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    nxJson.plugins ??= [];
+    for (const plugin of nxJson.plugins) {
+        if (typeof plugin === 'string'
+            ? plugin === '@nx/next/plugin'
+            : plugin.plugin === '@nx/next/plugin') {
+            return;
+        }
+    }
+    nxJson.plugins.push({
+        plugin: '@nx/next/plugin',
+        options: {
+            buildTargetName: 'build',
+            serveTargetName: 'serve',
+            exportTargetName: 'export',
+        },
+    });
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+exports.addPlugin = addPlugin;

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

@@ -2,46 +2,56 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
+const add_build_target_defaults_1 = require("@nx/devkit/src/generators/add-build-target-defaults");
 function addProject(host, options) {
     const targets = {};
-    targets.build = {
-        executor: '@nx/next:build',
-        outputs: ['{options.outputPath}'],
-        defaultConfiguration: 'production',
-        options: {
-            outputPath: options.outputPath,
-        },
-        configurations: {
-            development: {
-                outputPath: options.appProjectRoot,
+    // Check if plugin exists in nx.json and if it doesn't then we can continue
+    // with the default targets.
+    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 (!hasPlugin) {
+        (0, add_build_target_defaults_1.addBuildTargetDefaults)(host, '@nx/next:build');
+        targets.build = {
+            executor: '@nx/next:build',
+            outputs: ['{options.outputPath}'],
+            defaultConfiguration: 'production',
+            options: {
+                outputPath: options.outputPath,
             },
-            production: {},
-        },
-    };
-    targets.serve = {
-        executor: '@nx/next:server',
-        defaultConfiguration: 'development',
-        options: {
-            buildTarget: `${options.projectName}:build`,
-            dev: true,
-        },
-        configurations: {
-            development: {
-                buildTarget: `${options.projectName}:build:development`,
+            configurations: {
+                development: {
+                    outputPath: options.appProjectRoot,
+                },
+                production: {},
+            },
+        };
+        targets.serve = {
+            executor: '@nx/next:server',
+            defaultConfiguration: 'development',
+            options: {
+                buildTarget: `${options.projectName}:build`,
                 dev: true,
             },
-            production: {
+            configurations: {
+                development: {
+                    buildTarget: `${options.projectName}:build:development`,
+                    dev: true,
+                },
+                production: {
+                    buildTarget: `${options.projectName}:build:production`,
+                    dev: false,
+                },
+            },
+        };
+        targets.export = {
+            executor: '@nx/next:export',
+            options: {
                 buildTarget: `${options.projectName}:build:production`,
-                dev: false,
             },
-        },
-    };
-    targets.export = {
-        executor: '@nx/next:export',
-        options: {
-            buildTarget: `${options.projectName}:build:production`,
-        },
-    };
+        };
+    }
     const project = {
         root: options.appProjectRoot,
         sourceRoot: options.appProjectRoot,

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

@@ -249,10 +249,44 @@ function createAppJsx(name) {
                 <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
               </svg>
               <span>
-                Install Nx Console
-                <span>Plugin for VSCode</span>
+                Install Nx Console for VSCode
+                <span>The official VSCode extension for Nx.</span>
               </span>
             </a>
+            <a
+                id="nx-console-jetbrains"
+                className="button-pill rounded shadow"
+                href="https://plugins.jetbrains.com/plugin/21060-nx-console"
+                target="_blank"
+                rel="noreferrer"
+              >
+              <svg
+                  height="48"
+                  width="48"
+                  viewBox="20 20 60 60"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="m22.5 22.5h60v60h-60z" />
+                  <g fill="#fff">
+                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
+                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
+                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
+                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
+                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
+                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
+                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
+                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
+                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
+                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
+                  </g>
+                </svg>
+                <span>
+                  Install Nx Console for JetBrains
+                  <span>
+                    Available for WebStorm, Intellij IDEA Ultimate and more!
+                  </span>
+                </span>
+              </a>
             <div id="nx-cloud" className="rounded shadow">
               <div>
                 <svg id="nx-cloud-logo" role="img" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="transparent" viewBox="0 0 24 24">
@@ -260,7 +294,7 @@ function createAppJsx(name) {
                   <path strokeWidth="2" d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z" />
                 </svg>
                 <h2>
-                  NxCloud
+                  Nx Cloud
                   <span>
                     Enable faster CI & better DX
                   </span>
@@ -270,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"
@@ -327,9 +361,28 @@ function createAppJsx(name) {
               <span># Generate UI lib</span>
               nx g @nx/next:library ui
               <span># Add a component</span>
-              nx g @nx/next:component button --project=ui
+              nx g @nx/next:component ui/src/lib/button
             </pre>
           </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project ${name} --web</pre>
+          </details>
           <details>
             <summary>
               <svg
@@ -650,6 +703,15 @@ function createStyleRules() {
     #nx-console svg {
       color: rgba(0, 122, 204, 1);
     }
+    #nx-console-jetbrains {
+      margin-top: 2rem;
+    }
+    #nx-console-jetbrains:hover {
+      background-color: rgba(255, 49, 140, 1);
+    }
+    #nx-console-jetbrains svg {
+      color: rgba(255, 49, 140, 1);
+    }
     #nx-repo:hover {
       background-color: rgba(24, 23, 23, 1);
     }