feat(nextjs): use helper to determine project name and root in projects generators (#18733)

docs/generated/packages/next/generators/application.json

@@ -1,6 +1,6 @@
 {
   "name": "application",
-  "factory": "./src/generators/application/application#applicationGenerator",
+  "factory": "./src/generators/application/application#applicationGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -14,7 +14,7 @@
         "type": "string",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the application?",
-        "pattern": "^[a-zA-Z].*$",
+        "pattern": "^[a-zA-Z][^:]*$",
         "x-priority": "important"
       },
       "directory": {
@@ -23,6 +23,11 @@
         "alias": "d",
         "x-priority": "important"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -138,7 +143,7 @@
   "aliases": ["app"],
   "x-type": "application",
   "description": "Create an application.",
-  "implementation": "/packages/next/src/generators/application/application#applicationGenerator.ts",
+  "implementation": "/packages/next/src/generators/application/application#applicationGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/next/src/generators/application/schema.json",
   "type": "generator"

docs/generated/packages/next/generators/library.json

@@ -1,6 +1,6 @@
 {
   "name": "library",
-  "factory": "./src/generators/library/library#libraryGenerator",
+  "factory": "./src/generators/library/library#libraryGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -14,7 +14,7 @@
         "description": "Library name",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the library?",
-        "pattern": "^[a-zA-Z].*$",
+        "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
         "x-priority": "important"
       },
       "directory": {
@@ -23,6 +23,11 @@
         "alias": "dir",
         "x-priority": "important"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -154,7 +159,7 @@
   "aliases": ["lib"],
   "x-type": "library",
   "description": "Create a library.",
-  "implementation": "/packages/next/src/generators/library/library#libraryGenerator.ts",
+  "implementation": "/packages/next/src/generators/library/library#libraryGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/next/src/generators/library/schema.json",
   "type": "generator"

e2e/next/src/next.test.ts

@@ -213,6 +213,47 @@ describe('Next.js Applications', () => {
     await killPort(selfContainedPort);
   }, 600_000);
 
+  it('should support generating projects with the new name and root format', () => {
+    const appName = uniq('app1');
+    const libName = uniq('@my-org/lib1');
+
+    runCLI(
+      `generate @nx/next:app ${appName} --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${appName}/app/page.tsx`);
+    // check build works
+    expect(runCLI(`build ${appName}`)).toContain(
+      `Successfully ran target build for project ${appName}`
+    );
+    // check tests pass
+    const appTestResult = runCLI(`test ${appName}`);
+    expect(appTestResult).toContain(
+      `Successfully ran target test for project ${appName}`
+    );
+
+    // assert scoped project names are not supported when --project-name-and-root-format=derived
+    expect(() =>
+      runCLI(
+        `generate @nx/next:lib ${libName} --buildable --project-name-and-root-format=derived --no-interactive`
+      )
+    ).toThrow();
+
+    runCLI(
+      `generate @nx/next:lib ${libName} --buildable --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("libs/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${libName}/src/index.ts`);
+    // check build works
+    expect(runCLI(`build ${libName}`)).toContain(
+      `Successfully ran target build for project ${libName}`
+    );
+  }, 600_000);
+
   it('should build and install pruned lock file', () => {
     const appName = uniq('app');
     runCLI(`generate @nx/next:app ${appName} --no-interactive --style=css`);

packages/next/generators.json

@@ -40,7 +40,7 @@
       "hidden": true
     },
     "application": {
-      "factory": "./src/generators/application/application#applicationGenerator",
+      "factory": "./src/generators/application/application#applicationGeneratorInternal",
       "schema": "./src/generators/application/schema.json",
       "aliases": ["app"],
       "x-type": "application",
@@ -57,7 +57,7 @@
       "description": "Create a component."
     },
     "library": {
-      "factory": "./src/generators/library/library#libraryGenerator",
+      "factory": "./src/generators/library/library#libraryGeneratorInternal",
       "schema": "./src/generators/library/schema.json",
       "aliases": ["lib"],
       "x-type": "library",

packages/next/src/generators/application/application.ts

@@ -23,8 +23,15 @@ import { updateCypressTsConfig } from './lib/update-cypress-tsconfig';
 import { showPossibleWarnings } from './lib/show-possible-warnings';
 
 export async function applicationGenerator(host: Tree, schema: Schema) {
+  return await applicationGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function applicationGeneratorInternal(host: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
-  const options = normalizeOptions(host, schema);
+  const options = await normalizeOptions(host, schema);
 
   showPossibleWarnings(host, options);
 
@@ -58,7 +65,7 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
 
   if (options.customServer) {
     await customServerGenerator(host, {
-      project: options.name,
+      project: options.projectName,
       compiler: options.swc ? 'swc' : 'tsc',
     });
   }

packages/next/src/generators/application/lib/add-e2e.ts

@@ -19,7 +19,9 @@ export async function addE2e(host: Tree, options: NormalizedSchema) {
       ...options,
       linter: Linter.EsLint,
       name: options.e2eProjectName,
-      directory: options.directory,
+      directory: options.e2eProjectRoot,
+      // the name and root are already normalized, instruct the generator to use them as is
+      projectNameAndRootFormat: 'as-provided',
       project: options.projectName,
       skipFormat: true,
     });
@@ -43,7 +45,7 @@ export async function addE2e(host: Tree, options: NormalizedSchema) {
       setParserOptionsProject: options.setParserOptionsProject,
       webServerAddress: 'http://127.0.0.1:4200',
       webServerCommand: `${getPackageManagerCommand().exec} nx serve ${
-        options.name
+        options.projectName
       }`,
     });
   }

packages/next/src/generators/application/lib/create-application-files.ts

@@ -41,7 +41,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
       host,
       options.appProjectRoot
     ),
-    appContent: createAppJsx(options.name),
+    appContent: createAppJsx(options.projectName),
     styleContent: createStyleRules(),
     pageStyleContent: `.page {}`,
 
@@ -133,7 +133,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
             ...(updatedJson.exclude || []),
             ...(appJSON.exclude || []),
             '**e2e/**/*',
-            `dist/${options.name}/**/*`,
+            `dist/${options.projectName}/**/*`,
           ]),
         ],
       };

packages/next/src/generators/application/lib/normalize-options.ts

@@ -1,13 +1,7 @@
-import { assertValidStyle } from '@nx/react/src/utils/assertion';
+import { joinPathFragments, names, Tree } from '@nx/devkit';
-import {
+import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
-  extractLayoutDirectory,
-  getWorkspaceLayout,
-  joinPathFragments,
-  names,
-  Tree,
-} from '@nx/devkit';
 import { Linter } from '@nx/linter';
-
+import { assertValidStyle } from '@nx/react/src/utils/assertion';
 import { Schema } from '../schema';
 
 export interface NormalizedSchema extends Schema {
@@ -22,32 +16,42 @@ export interface NormalizedSchema extends Schema {
   js?: boolean;
 }
 
-export function normalizeOptions(
+export async function normalizeOptions(
   host: Tree,
   options: Schema
-): NormalizedSchema {
+): Promise<NormalizedSchema> {
-  const { layoutDirectory, projectDirectory } = extractLayoutDirectory(
+  const {
-    options.directory
+    projectName: appProjectName,
-  );
+    projectRoot: appProjectRoot,
+    projectNameAndRootFormat,
+  } = await determineProjectNameAndRootOptions(host, {
+    name: options.name,
+    projectType: 'application',
+    directory: options.directory,
+    projectNameAndRootFormat: options.projectNameAndRootFormat,
+    rootProject: options.rootProject,
+    callingGenerator: '@nx/next:application',
+  });
+  options.rootProject = appProjectRoot === '.';
+  options.projectNameAndRootFormat = projectNameAndRootFormat;
+
+  let e2eProjectName = 'e2e';
+  let e2eProjectRoot = 'e2e';
+  if (!options.rootProject) {
+    const projectNameAndRoot = await determineProjectNameAndRootOptions(host, {
+      name: `${options.name}-e2e`,
+      projectType: 'application',
+      directory: options.directory,
+      projectNameAndRootFormat: options.projectNameAndRootFormat,
+      rootProject: options.rootProject,
+      callingGenerator: '@nx/next:application',
+    });
+    e2eProjectName = projectNameAndRoot.projectName;
+    e2eProjectRoot = projectNameAndRoot.projectRoot;
+  }
+
   const name = names(options.name).fileName;
 
-  const appDirectory = projectDirectory
-    ? `${names(projectDirectory).fileName}/${names(options.name).fileName}`
-    : names(options.name).fileName;
-
-  const appsDir = layoutDirectory ?? getWorkspaceLayout(host).appsDir;
-
-  const appProjectName = appDirectory.replace(new RegExp('/', 'g'), '-');
-  const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
-
-  const appProjectRoot = options.rootProject
-    ? '.'
-    : joinPathFragments(appsDir, appDirectory);
-
-  const e2eProjectRoot = options.rootProject
-    ? 'e2e'
-    : joinPathFragments(appsDir, `${appDirectory}-e2e`);
-
   const outputPath = joinPathFragments(
     'dist',
     appProjectRoot,

packages/next/src/generators/application/schema.d.ts

@@ -1,11 +1,13 @@
-import { Linter } from '@nx/linter';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
-import { SupportedStyles } from '@nx/react';
+import type { Linter } from '@nx/linter';
+import type { SupportedStyles } from '@nx/react';
 
 export interface Schema {
   name: string;
   style?: SupportedStyles;
   skipFormat?: boolean;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   tags?: string;
   unitTestRunner?: 'jest' | 'none';
   e2eTestRunner?: 'cypress' | 'playwright' | 'none';

packages/next/src/generators/application/schema.json

@@ -14,7 +14,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use for the application?",
-      "pattern": "^[a-zA-Z].*$",
+      "pattern": "^[a-zA-Z][^:]*$",
       "x-priority": "important"
     },
     "directory": {
@@ -23,6 +23,11 @@
       "alias": "d",
       "x-priority": "important"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",

packages/next/src/generators/library/lib/normalize-options.spec.ts

@@ -10,8 +10,8 @@ describe('normalizeOptions', () => {
     tree = createTreeWithEmptyWorkspace();
   });
 
-  it('should set importPath and projectRoot', () => {
+  it('should set importPath and projectRoot', async () => {
-    const options = normalizeOptions(tree, {
+    const options = await normalizeOptions(tree, {
       name: 'my-lib',
       style: 'css',
       linter: Linter.None,

packages/next/src/generators/library/lib/normalize-options.ts

@@ -1,5 +1,5 @@
-import { getWorkspaceLayout, joinPathFragments, names, Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
-import { getImportPath } from '@nx/js/src/utils/get-import-path';
+import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { Schema } from '../schema';
 
 export interface NormalizedSchema extends Schema {
@@ -7,20 +7,24 @@ export interface NormalizedSchema extends Schema {
   projectRoot: string;
 }
 
-export function normalizeOptions(
+export async function normalizeOptions(
   host: Tree,
   options: Schema
-): NormalizedSchema {
+): Promise<NormalizedSchema> {
-  const name = names(options.name).fileName;
+  const { projectRoot, importPath, projectNameAndRootFormat } =
-  const projectDirectory = options.directory
+    await determineProjectNameAndRootOptions(host, {
-    ? `${names(options.directory).fileName}/${name}`
+      name: options.name,
-    : name;
+      projectType: 'library',
+      directory: options.directory,
+      importPath: options.importPath,
+      projectNameAndRootFormat: options.projectNameAndRootFormat,
+      callingGenerator: '@nx/next:library',
+    });
+  options.projectNameAndRootFormat = projectNameAndRootFormat;
 
-  const { libsDir } = getWorkspaceLayout(host);
-  const projectRoot = joinPathFragments(libsDir, projectDirectory);
   return {
     ...options,
-    importPath: options.importPath ?? getImportPath(host, projectDirectory),
+    importPath,
     projectRoot,
   };
 }

packages/next/src/generators/library/library.ts

@@ -15,7 +15,14 @@ import { Schema } from './schema';
 import { normalizeOptions } from './lib/normalize-options';
 
 export async function libraryGenerator(host: Tree, rawOptions: Schema) {
-  const options = normalizeOptions(host, rawOptions);
+  return await libraryGeneratorInternal(host, {
+    projectNameAndRootFormat: 'derived',
+    ...rawOptions,
+  });
+}
+
+export async function libraryGeneratorInternal(host: Tree, rawOptions: Schema) {
+  const options = await normalizeOptions(host, rawOptions);
   const tasks: GeneratorCallback[] = [];
   const initTask = await nextInitGenerator(host, {
     ...options,

packages/next/src/generators/library/schema.d.ts

@@ -1,9 +1,11 @@
-import { Linter } from '@nx/linter';
+import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-directory-utils';
+import type { Linter } from '@nx/linter';
 import type { SupportedStyles } from '@nx/react';
 
 export interface Schema {
   name: string;
   directory?: string;
+  projectNameAndRootFormat?: ProjectNameAndRootFormat;
   style: SupportedStyles;
   skipTsConfig?: boolean;
   skipFormat?: boolean;

packages/next/src/generators/library/schema.json

@@ -14,7 +14,7 @@
         "index": 0
       },
       "x-prompt": "What name would you like to use for the library?",
-      "pattern": "^[a-zA-Z].*$",
+      "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
       "x-priority": "important"
     },
     "directory": {
@@ -23,6 +23,11 @@
       "alias": "dir",
       "x-priority": "important"
     },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
     "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",