chore(nextjs): update nextjs plugin's unit test to use as-provided (#18969)

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

@@ -12,34 +12,38 @@ describe('app', () => {
   let tree: Tree;
 
   beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
   });
 
   it('should add a .gitkeep file to the public directory', async () => {
+    const name = uniq();
     await applicationGenerator(tree, {
-      name: 'myApp',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    expect(tree.exists('apps/my-app/public/.gitkeep')).toBe(true);
+    expect(tree.exists(`${name}/public/.gitkeep`)).toBe(true);
   });
 
   it('should update tags and implicit dependencies', async () => {
+    const name = uniq();
     await applicationGenerator(tree, {
-      name: 'myApp',
+      name,
       style: 'css',
       tags: 'one,two',
+      projectNameAndRootFormat: 'as-provided',
     });
 
     const projects = Object.fromEntries(getProjects(tree));
 
     expect(projects).toMatchObject({
-      'my-app': {
+      [`${name}`]: {
         tags: ['one', 'two'],
       },
-      'my-app-e2e': {
+      [`${name}-e2e`]: {
         tags: [],
-        implicitDependencies: ['my-app'],
+        implicitDependencies: [name],
       },
     });
   });
@@ -47,47 +51,53 @@ describe('app', () => {
   it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
     tree.rename('tsconfig.base.json', 'tsconfig.json');
 
+    const name = uniq();
     await applicationGenerator(tree, {
-      name: 'myApp',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    const tsConfig = readJson(tree, 'apps/my-app/tsconfig.json');
+    const tsConfig = readJson(tree, `${name}/tsconfig.json`);
-    expect(tsConfig.extends).toBe('../../tsconfig.json');
+    expect(tsConfig.extends).toBe('../tsconfig.json');
   });
 
   describe('App Router', () => {
     it('should generate files for app layout', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'testApp',
+        name,
         style: 'css',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      const tsConfig = readJson(tree, 'apps/test-app/tsconfig.json');
+      const tsConfig = readJson(tree, `${name}/tsconfig.json`);
       expect(tsConfig.include).toEqual([
         '**/*.ts',
         '**/*.tsx',
         '**/*.js',
         '**/*.jsx',
-        '../../apps/test-app/.next/types/**/*.ts',
+        `../${name}/.next/types/**/*.ts`,
-        '../../dist/apps/test-app/.next/types/**/*.ts',
+        `../dist/${name}/.next/types/**/*.ts`,
         'next-env.d.ts',
       ]);
-      expect(tree.exists('apps/test-app/pages/styles.css')).toBeFalsy();
+      expect(tree.exists(`${name}/pages/styles.css`)).toBeFalsy();
-      expect(tree.exists('apps/test-app/app/global.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
-      expect(tree.exists('apps/test-app/app/page.tsx')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.tsx`)).toBeTruthy();
-      expect(tree.exists('apps/test-app/app/layout.tsx')).toBeTruthy();
+      expect(tree.exists(`${name}/app/layout.tsx`)).toBeTruthy();
-      expect(tree.exists('apps/test-app/app/api/hello/route.ts')).toBeTruthy();
+      expect(tree.exists(`${name}/app/api/hello/route.ts`)).toBeTruthy();
-      expect(tree.exists('apps/test-app/app/page.module.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.module.css`)).toBeTruthy();
-      expect(tree.exists('apps/test-app/public/favicon.ico')).toBeTruthy();
+      expect(tree.exists(`${name}/public/favicon.ico`)).toBeTruthy();
     });
 
     it('should add layout types correctly for standalone apps', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'testApp',
+        name,
         style: 'css',
         appDir: true,
         rootProject: true,
+        projectNameAndRootFormat: 'as-provided',
       });
 
       const tsConfig = readJson(tree, 'tsconfig.json');
@@ -97,17 +107,19 @@ describe('app', () => {
         '**/*.js',
         '**/*.jsx',
         '.next/types/**/*.ts',
-        'dist/test-app/.next/types/**/*.ts',
+        `dist/${name}/.next/types/**/*.ts`,
         'next-env.d.ts',
       ]);
     });
 
     it('should generate an unstyled component page', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'testApp',
+        name,
         style: 'none',
         appDir: true,
         rootProject: true,
+        projectNameAndRootFormat: 'as-provided',
       });
 
       const content = tree.read('app/page.tsx').toString();
@@ -120,39 +132,43 @@ describe('app', () => {
 
   describe('Pages Router', () => {
     it('should generate files for pages layout', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'css',
         appDir: false,
+        projectNameAndRootFormat: 'as-provided',
       });
-      expect(tree.exists('apps/my-app/tsconfig.json')).toBeTruthy();
+      expect(tree.exists(`${name}/tsconfig.json`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/pages/index.tsx')).toBeTruthy();
+      expect(tree.exists(`${name}/pages/index.tsx`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/specs/index.spec.tsx')).toBeTruthy();
+      expect(tree.exists(`${name}/specs/index.spec.tsx`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/pages/index.module.css')).toBeTruthy();
+      expect(tree.exists(`${name}/pages/index.module.css`)).toBeTruthy();
     });
 
     it('should update configurations', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'css',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      expect(readProjectConfiguration(tree, 'my-app').root).toEqual(
+      expect(readProjectConfiguration(tree, name).root).toEqual(name);
-        'apps/my-app'
+      expect(readProjectConfiguration(tree, `${name}-e2e`).root).toEqual(
-      );
+        `${name}-e2e`
-      expect(readProjectConfiguration(tree, 'my-app-e2e').root).toEqual(
-        'apps/my-app-e2e'
       );
     });
 
     it('should generate an unstyled component page', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'testApp',
+        name,
         style: 'none',
         appDir: false,
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      const content = tree.read('apps/test-app/pages/index.tsx').toString();
+      const content = tree.read(`${name}/pages/index.tsx`).toString();
 
       expect(content).not.toContain('import styles from');
       expect(content).not.toContain('const StyledPage');
@@ -162,22 +178,24 @@ describe('app', () => {
 
   describe('--style scss', () => {
     it('should generate scss styles', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'scss',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      expect(tree.exists('apps/my-app/app/page.module.scss')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.module.scss`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
       expect(indexContent).toContain(`import styles from './page.module.scss'`);
-      expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "import './global.css';
 
         export const metadata = {
-          title: 'Welcome to my-app',
+          title: 'Welcome to ${name}',
           description: 'Generated by create-nx-workspace',
         };
 
@@ -198,23 +216,25 @@ describe('app', () => {
   });
 
   describe('--style less', () => {
-    it('should generate scss styles', async () => {
+    it('should generate less styles', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'less',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      expect(tree.exists('apps/my-app/app/page.module.less')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.module.less`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/app/global.less')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.less`)).toBeTruthy();
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
       expect(indexContent).toContain(`import styles from './page.module.less'`);
-      expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "import './global.less';
 
         export const metadata = {
-          title: 'Welcome to my-app',
+          title: 'Welcome to ${name}',
           description: 'Generated by create-nx-workspace',
         };
 
@@ -235,36 +255,40 @@ describe('app', () => {
   });
 
   describe('--style styl', () => {
-    it('should generate scss styles', async () => {
+    it('should generate styl styles', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'styl',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      expect(tree.exists('apps/my-app/app/page.module.styl')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.module.styl`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/app/global.styl')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.styl`)).toBeTruthy();
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
       expect(indexContent).toContain(`import styles from './page.module.styl'`);
     });
   });
 
   describe('--style styled-components', () => {
-    it('should generate styles', async () => {
+    it('should generate styled-components styles', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'styled-components',
+        projectNameAndRootFormat: 'as-provided',
       });
 
       expect(
-        tree.exists('apps/my-app/app/page.module.styled-components')
+        tree.exists(`${name}/app/page.module.styled-components`)
       ).toBeFalsy();
-      expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
       expect(indexContent).not.toContain(`import styles from './page.module`);
       expect(indexContent).toContain(`import styled from 'styled-components'`);
-      expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "import './global.css';
         import { StyledComponentsRegistry } from './registry';
@@ -289,7 +313,7 @@ describe('app', () => {
         }
         "
       `);
-      expect(tree.read('apps/my-app/app/registry.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/registry.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "'use client';
 
@@ -330,26 +354,29 @@ describe('app', () => {
   });
 
   describe('--style @emotion/styled', () => {
-    it('should generate styles', async () => {
+    it('should generate  @emotion/styled styles', async () => {
+      const name = uniq();
+
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: '@emotion/styled',
+        projectNameAndRootFormat: 'as-provided',
       });
 
       expect(
-        tree.exists('apps/my-app/app/page.module.styled-components')
+        tree.exists(`${name}/app/page.module.styled-components`)
       ).toBeFalsy();
-      expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
       expect(indexContent).not.toContain(`import styles from './page.module`);
       expect(indexContent).toContain(`import styled from '@emotion/styled'`);
-      expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "import './global.css';
 
         export const metadata = {
-          title: 'Welcome to my-app',
+          title: 'Welcome to ${name}',
           description: 'Generated by create-nx-workspace',
         };
 
@@ -369,12 +396,15 @@ describe('app', () => {
     });
 
     it('should add jsxImportSource in tsconfig.json', async () => {
+      const name = uniq();
+
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: '@emotion/styled',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      const tsconfigJson = readJson(tree, 'apps/my-app/tsconfig.json');
+      const tsconfigJson = readJson(tree, `${name}/tsconfig.json`);
 
       expect(tsconfigJson.compilerOptions['jsxImportSource']).toEqual(
         '@emotion/react'
@@ -384,22 +414,25 @@ describe('app', () => {
 
   describe('--style styled-jsx', () => {
     it('should use <style jsx> in index page', async () => {
+      const name = 'my-app';
+
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'styled-jsx',
+        projectNameAndRootFormat: 'as-provided',
       });
 
-      const indexContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+      const indexContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
 
       expect(indexContent).toMatchSnapshot();
-      expect(tree.exists('apps/my-app/app/page.module.styled-jsx')).toBeFalsy();
+      expect(tree.exists(`${name}/app/page.module.styled-jsx`)).toBeFalsy();
-      expect(tree.exists('apps/my-app/app/global.css')).toBeTruthy();
+      expect(tree.exists(`${name}/app/global.css`)).toBeTruthy();
 
       expect(indexContent).not.toContain(`import styles from './page.module`);
       expect(indexContent).not.toContain(
         `import styled from 'styled-components'`
       );
-      expect(tree.read('apps/my-app/app/layout.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/layout.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "import './global.css';
         import { StyledJsxRegistry } from './registry';
@@ -419,7 +452,7 @@ describe('app', () => {
         }
         "
       `);
-      expect(tree.read('apps/my-app/app/registry.tsx', 'utf-8'))
+      expect(tree.read(`${name}/app/registry.tsx`, 'utf-8'))
         .toMatchInlineSnapshot(`
         "'use client';
 
@@ -446,110 +479,132 @@ describe('app', () => {
   });
 
   it('should setup jest with tsx support', async () => {
+    const name = uniq();
+
     await applicationGenerator(tree, {
-      name: 'my-app',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    expect(tree.read('apps/my-app/jest.config.ts', 'utf-8')).toContain(
+    expect(tree.read(`${name}/jest.config.ts`, 'utf-8')).toContain(
       `moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],`
     );
   });
 
   it('should setup jest with SVGR support', async () => {
+    const name = uniq();
+
     await applicationGenerator(tree, {
-      name: 'my-app',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    expect(tree.read('apps/my-app/jest.config.ts', 'utf-8')).toContain(
+    expect(tree.read(`${name}/jest.config.ts`, 'utf-8')).toContain(
       `'^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest'`
     );
   });
 
   it('should set up the nx next build builder', async () => {
+    const name = uniq();
+
     await applicationGenerator(tree, {
-      name: 'my-app',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    const projectConfiguration = readProjectConfiguration(tree, 'my-app');
+    const projectConfiguration = readProjectConfiguration(tree, name);
     expect(projectConfiguration.targets.build.executor).toEqual(
       '@nx/next:build'
     );
     expect(projectConfiguration.targets.build.options).toEqual({
-      outputPath: 'dist/apps/my-app',
+      outputPath: `dist/${name}`,
     });
   });
 
   it('should set up the nx next server builder', async () => {
+    const name = uniq();
     await applicationGenerator(tree, {
-      name: 'my-app',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    const projectConfiguration = readProjectConfiguration(tree, 'my-app');
+    const projectConfiguration = readProjectConfiguration(tree, name);
     expect(projectConfiguration.targets.serve.executor).toEqual(
       '@nx/next:server'
     );
     expect(projectConfiguration.targets.serve.options).toEqual({
-      buildTarget: 'my-app:build',
+      buildTarget: `${name}:build`,
       dev: true,
     });
     expect(projectConfiguration.targets.serve.configurations).toEqual({
       development: {
-        buildTarget: 'my-app:build:development',
+        buildTarget: `${name}:build:development`,
         dev: true,
       },
-      production: { dev: false, buildTarget: 'my-app:build:production' },
+      production: { dev: false, buildTarget: `${name}:build:production` },
     });
   });
 
   it('should set up the nx next export builder', async () => {
+    const name = uniq();
+
     await applicationGenerator(tree, {
-      name: 'my-app',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    const projectConfiguration = readProjectConfiguration(tree, 'my-app');
+    const projectConfiguration = readProjectConfiguration(tree, name);
     expect(projectConfiguration.targets.export.executor).toEqual(
       '@nx/next:export'
     );
     expect(projectConfiguration.targets.export.options).toEqual({
-      buildTarget: 'my-app:build:production',
+      buildTarget: `${name}:build:production`,
     });
   });
 
   describe('--unit-test-runner none', () => {
     it('should not generate test configuration', async () => {
+      const name = uniq();
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'css',
         unitTestRunner: 'none',
+        projectNameAndRootFormat: 'as-provided',
       });
       expect(tree.exists('jest.config.ts')).toBeFalsy();
-      expect(tree.exists('apps/my-app/specs/index.spec.tsx')).toBeFalsy();
+      expect(tree.exists(`${name}/specs/index.spec.tsx`)).toBeFalsy();
     });
   });
 
   describe('--e2e-test-runner none', () => {
     it('should not generate test configuration', async () => {
+      const name = uniq();
+
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'css',
         e2eTestRunner: 'none',
+        projectNameAndRootFormat: 'as-provided',
       });
-      expect(tree.exists('apps/my-app-e2e')).toBeFalsy();
+      expect(tree.exists(`${name}-e2e`)).toBeFalsy();
     });
   });
 
   it('should generate functional components by default', async () => {
+    const name = uniq();
+
     await applicationGenerator(tree, {
-      name: 'myApp',
+      name,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
 
-    const appContent = tree.read('apps/my-app/app/page.tsx', 'utf-8');
+    const appContent = tree.read(`${name}/app/page.tsx`, 'utf-8');
 
     expect(appContent).not.toMatch(/extends Component/);
   });
@@ -557,9 +612,12 @@ describe('app', () => {
   describe('--linter', () => {
     describe('default (eslint)', () => {
       it('should add .eslintrc.json and dependencies', async () => {
+        const name = uniq();
+
         await applicationGenerator(tree, {
-          name: 'myApp',
+          name,
           style: 'css',
+          projectNameAndRootFormat: 'as-provided',
         });
 
         const packageJson = readJson(tree, '/package.json');
@@ -570,14 +628,14 @@ describe('app', () => {
           },
         });
 
-        const eslintJson = readJson(tree, '/apps/my-app/.eslintrc.json');
+        const eslintJson = readJson(tree, `${name}/.eslintrc.json`);
         expect(eslintJson).toMatchInlineSnapshot(`
           {
             "extends": [
               "plugin:@nx/react-typescript",
               "next",
               "next/core-web-vitals",
-              "../../.eslintrc.json",
+              "../.eslintrc.json",
             ],
             "ignorePatterns": [
               "!**/*",
@@ -602,7 +660,7 @@ describe('app', () => {
                 "rules": {
                   "@next/next/no-html-link-for-pages": [
                     "error",
-                    "apps/my-app/pages",
+                    "${name}/pages",
                   ],
                 },
               },
@@ -639,11 +697,14 @@ describe('app', () => {
 
     describe('root level', () => {
       it('should adjust eslint config for root level projects', async () => {
+        const name = uniq();
+
         await applicationGenerator(tree, {
-          name: 'testApp',
+          name,
           style: 'css',
           appDir: true,
           rootProject: true,
+          projectNameAndRootFormat: 'as-provided',
         });
 
         const eslintJSON = readJson(tree, '.eslintrc.json');
@@ -664,23 +725,29 @@ describe('app', () => {
 
   describe('--js', () => {
     it('generates JS files', async () => {
+      const name = uniq();
+
       await applicationGenerator(tree, {
-        name: 'myApp',
+        name,
         style: 'css',
         js: true,
       });
 
-      expect(tree.exists('apps/my-app/app/page.js')).toBeTruthy();
+      expect(tree.exists(`${name}/app/page.js`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/specs/index.spec.js')).toBeTruthy();
+      expect(tree.exists(`${name}/specs/index.spec.js`)).toBeTruthy();
-      expect(tree.exists('apps/my-app/index.d.js')).toBeFalsy();
+      expect(tree.exists(`${name}/index.d.js`)).toBeFalsy();
-      expect(tree.exists('apps/my-app/index.d.ts')).toBeFalsy();
+      expect(tree.exists(`${name}/index.d.ts`)).toBeFalsy();
 
-      const tsConfig = readJson(tree, 'apps/my-app/tsconfig.json');
+      const tsConfig = readJson(tree, `${name}/tsconfig.json`);
       expect(tsConfig.compilerOptions.allowJs).toEqual(true);
 
-      const tsConfigApp = readJson(tree, 'apps/my-app/tsconfig.json');
+      const tsConfigApp = readJson(tree, `${name}/tsconfig.json`);
       expect(tsConfigApp.include).toContain('**/*.js');
       expect(tsConfigApp.exclude).not.toContain('**/*.spec.js');
     });
   });
 });
+
+function uniq() {
+  return `str-${(Math.random() * 10000).toFixed(0)}`;
+}

packages/next/src/generators/application/lib/add-linting.spec.ts

@@ -16,19 +16,20 @@ describe('updateEslint', () => {
   beforeEach(async () => {
     schema = {
       projectName: 'my-app',
-      appProjectRoot: 'apps/my-app',
+      appProjectRoot: 'my-app',
       linter: Linter.EsLint,
       unitTestRunner: 'jest',
       e2eProjectName: 'my-app-e2e',
-      e2eProjectRoot: 'apps/my-app-e2e',
+      e2eProjectRoot: 'my-app-e2e',
-      outputPath: 'dist/apps/my-app',
+      outputPath: 'dist/my-app',
       name: 'my-app',
       parsedTags: [],
       fileName: 'index',
       e2eTestRunner: 'cypress',
       styledModule: null,
+      projectNameAndRootFormat: 'as-provided',
     };
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
     const project: ProjectConfiguration = {
       root: schema.appProjectRoot,
       sourceRoot: schema.appProjectRoot,
@@ -54,7 +55,7 @@ describe('updateEslint', () => {
           "plugin:@nx/react-typescript",
           "next",
           "next/core-web-vitals",
-          "../../.eslintrc.json",
+          "../.eslintrc.json",
         ],
         "ignorePatterns": [
           "!**/*",
@@ -79,7 +80,7 @@ describe('updateEslint', () => {
             "rules": {
               "@next/next/no-html-link-for-pages": [
                 "error",
-                "apps/my-app/pages",
+                "my-app/pages",
               ],
             },
           },
@@ -122,7 +123,7 @@ describe('updateEslint', () => {
       .toMatchInlineSnapshot(`
       "const FlatCompat = require("@eslint/eslintrc");
       const js = require("@eslint/js");
-      const baseConfig = require("../../eslint.config.js");
+      const baseConfig = require("../eslint.config.js");
       const compat = new FlatCompat({
             baseDirectory: __dirname,
             recommendedConfig: js.configs.recommended,
@@ -131,35 +132,35 @@ describe('updateEslint', () => {
 
       module.exports = [
       {
-          files: ["apps/my-app/**/*.*"],
+          files: ["my-app/**/*.*"],
           rules: { "@next/next/no-html-link-for-pages": "off" }
       },
           ...baseConfig,
           {
         "files": [
-          "apps/my-app/**/*.ts",
+          "my-app/**/*.ts",
-          "apps/my-app/**/*.tsx",
+          "my-app/**/*.tsx",
-          "apps/my-app/**/*.js",
+          "my-app/**/*.js",
-          "apps/my-app/**/*.jsx"
+          "my-app/**/*.jsx"
         ],
         "rules": {
           "@next/next/no-html-link-for-pages": [
             "error",
-            "apps/my-app/pages"
+            "my-app/pages"
           ]
         }
           },
           {
               files: [
-                  "apps/my-app/**/*.ts",
+                  "my-app/**/*.ts",
-                  "apps/my-app/**/*.tsx"
+                  "my-app/**/*.tsx"
               ],
               rules: {}
           },
           {
               files: [
-                  "apps/my-app/**/*.js",
+                  "my-app/**/*.js",
-                  "apps/my-app/**/*.jsx"
+                  "my-app/**/*.jsx"
               ],
               rules: {}
           },
@@ -167,13 +168,13 @@ describe('updateEslint', () => {
       ...compat.config({ env: { jest: true } }).map(config => ({
           ...config,
           files: [
-              "apps/my-app/**/*.spec.ts",
+              "my-app/**/*.spec.ts",
-              "apps/my-app/**/*.spec.tsx",
+              "my-app/**/*.spec.tsx",
-              "apps/my-app/**/*.spec.js",
+              "my-app/**/*.spec.js",
-              "apps/my-app/**/*.spec.jsx"
+              "my-app/**/*.spec.jsx"
           ]
       })),
-      { ignores: ["apps/my-app/.next/**/*"] }
+      { ignores: ["my-app/.next/**/*"] }
       ];
       "
     `);

packages/next/src/generators/component/component.spec.ts

@@ -11,10 +11,11 @@ describe('component', () => {
   const libName = 'my-lib';
 
   beforeEach(async () => {
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
     await applicationGenerator(tree, {
       name: appName,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
     await libraryGenerator(tree, {
       name: libName,
@@ -23,6 +24,7 @@ describe('component', () => {
       skipFormat: true,
       skipTsConfig: false,
       unitTestRunner: 'jest',
+      projectNameAndRootFormat: 'as-provided',
     });
   });
 
@@ -33,12 +35,10 @@ describe('component', () => {
       style: 'css',
     });
 
-    expect(tree.exists('apps/my-app/components/hello/hello.tsx')).toBeTruthy();
+    expect(tree.exists('my-app/components/hello/hello.tsx')).toBeTruthy();
+    expect(tree.exists('my-app/components/hello/hello.spec.tsx')).toBeTruthy();
     expect(
-      tree.exists('apps/my-app/components/hello/hello.spec.tsx')
+      tree.exists('my-app/components/hello/hello.module.css')
-    ).toBeTruthy();
-    expect(
-      tree.exists('apps/my-app/components/hello/hello.module.css')
     ).toBeTruthy();
   });
 
@@ -49,13 +49,9 @@ describe('component', () => {
       style: 'css',
     });
 
-    expect(tree.exists('libs/my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
+    expect(tree.exists('my-lib/src/lib/hello/hello.tsx')).toBeTruthy();
-    expect(
+    expect(tree.exists('my-lib/src/lib/hello/hello.spec.tsx')).toBeTruthy();
-      tree.exists('libs/my-lib/src/lib/hello/hello.spec.tsx')
+    expect(tree.exists('my-lib/src/lib/hello/hello.module.css')).toBeTruthy();
-    ).toBeTruthy();
-    expect(
-      tree.exists('libs/my-lib/src/lib/hello/hello.module.css')
-    ).toBeTruthy();
   });
 
   it('should allow directory override', async () => {
@@ -72,15 +68,11 @@ describe('component', () => {
       style: 'css',
     });
 
-    expect(tree.exists('apps/my-app/foo/hello/hello.tsx')).toBeTruthy();
+    expect(tree.exists('my-app/foo/hello/hello.tsx')).toBeTruthy();
-    expect(tree.exists('apps/my-app/foo/hello/hello.spec.tsx')).toBeTruthy();
+    expect(tree.exists('my-app/foo/hello/hello.spec.tsx')).toBeTruthy();
-    expect(tree.exists('apps/my-app/foo/hello/hello.module.css')).toBeTruthy();
+    expect(tree.exists('my-app/foo/hello/hello.module.css')).toBeTruthy();
-    expect(tree.exists('libs/my-lib/src/bar/world/world.tsx')).toBeTruthy();
+    expect(tree.exists('my-lib/src/bar/world/world.tsx')).toBeTruthy();
-    expect(
+    expect(tree.exists('my-lib/src/bar/world/world.spec.tsx')).toBeTruthy();
-      tree.exists('libs/my-lib/src/bar/world/world.spec.tsx')
+    expect(tree.exists('my-lib/src/bar/world/world.module.css')).toBeTruthy();
-    ).toBeTruthy();
-    expect(
-      tree.exists('libs/my-lib/src/bar/world/world.module.css')
-    ).toBeTruthy();
   });
 });

packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap

@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cypress-component-configuration generator should setup nextjs app 1`] = `
+exports[`cypress-component-configuration generator should setup nextjs app: 
+    {
+      "compilerOptions": {
+        "allowJs": true,
+        "module": "commonjs",
+        "outDir": "../dist/out-tsc",
+        "sourceMap": false,
+        "types": [
+          "cypress",
+          "node",
+        ],
+      }
+    } 1`] = `
 {
   "compilerOptions": {
     "allowJs": true,
     "module": "commonjs",
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../dist/out-tsc",
     "sourceMap": false,
     "types": [
       "cypress",
@@ -26,12 +38,24 @@ exports[`cypress-component-configuration generator should setup nextjs app 1`] =
 }
 `;
 
-exports[`cypress-component-configuration generator should setup nextjs lib 1`] = `
+exports[`cypress-component-configuration generator should setup nextjs lib: 
+    {
+      "compilerOptions": {
+        "allowJs": true,
+        "module": "commonjs",
+        "outDir": "../dist/out-tsc",
+        "sourceMap": false,
+        "types": [
+          "cypress",
+          "node",
+        ],
+      }
+    } 1`] = `
 {
   "compilerOptions": {
     "allowJs": true,
     "module": "commonjs",
-    "outDir": "../../dist/out-tsc",
+    "outDir": "../dist/out-tsc",
     "sourceMap": false,
     "types": [
       "cypress",

packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts

@@ -7,19 +7,23 @@ import { setupTailwindGenerator } from '@nx/react';
 import { Linter } from '@nx/linter';
 
 describe('cypress-component-configuration generator', () => {
-  let tree: any;
+  let tree: Tree;
 
   beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
   });
 
   it('should setup nextjs app', async () => {
-    await applicationGenerator(tree, { name: 'demo', style: 'css' });
+    await applicationGenerator(tree, {
+      name: 'demo',
+      style: 'css',
+      projectNameAndRootFormat: 'as-provided',
+    });
     await cypressComponentConfiguration(tree, {
       generateTests: true,
       project: 'demo',
     });
-    expect(readJson(tree, 'apps/demo/tsconfig.json').exclude).toEqual(
+    expect(readJson(tree, 'demo/tsconfig.json').exclude).toEqual(
       expect.arrayContaining([
         'cypress/**/*',
         'cypress.config.ts',
@@ -29,9 +33,20 @@ describe('cypress-component-configuration generator', () => {
         '**/*.cy.jsx',
       ])
     );
-    expect(readJson(tree, 'apps/demo/cypress/tsconfig.json')).toMatchSnapshot();
+    expect(readJson(tree, 'demo/cypress/tsconfig.json')).toMatchSnapshot(`
-    expect(tree.read('apps/demo/cypress.config.ts', 'utf-8'))
+    {
-      .toMatchInlineSnapshot(`
+      "compilerOptions": {
+        "allowJs": true,
+        "module": "commonjs",
+        "outDir": "../dist/out-tsc",
+        "sourceMap": false,
+        "types": [
+          "cypress",
+          "node",
+        ],
+      }
+    }`);
+    expect(tree.read('demo/cypress.config.ts', 'utf-8')).toMatchInlineSnapshot(`
       "import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
       import { defineConfig } from 'cypress';
 
@@ -40,7 +55,7 @@ describe('cypress-component-configuration generator', () => {
       });
       "
     `);
-    expect(tree.read('apps/demo/cypress/support/component.ts', 'utf-8'))
+    expect(tree.read('demo/cypress/support/component.ts', 'utf-8'))
       .toMatchInlineSnapshot(`
       "import { mount } from 'cypress/react18';
       import './styles.ct.css';
@@ -76,13 +91,13 @@ describe('cypress-component-configuration generator', () => {
       Cypress.Commands.add('mount', mount);
       "
     `);
-    expect(tree.exists('apps/demo/pages/index.cy.ts')).toBeFalsy();
+    expect(tree.exists('demo/pages/index.cy.ts')).toBeFalsy();
     expect(
       readProjectConfiguration(tree, 'demo').targets['component-test']
     ).toEqual({
       executor: '@nx/cypress:cypress',
       options: {
-        cypressConfig: 'apps/demo/cypress.config.ts',
+        cypressConfig: 'demo/cypress.config.ts',
         skipServe: true,
         testingType: 'component',
       },
@@ -90,14 +105,18 @@ describe('cypress-component-configuration generator', () => {
   });
 
   it('should add styles setup in app', async () => {
-    await applicationGenerator(tree, { name: 'demo', style: 'css' });
+    await applicationGenerator(tree, {
+      name: 'demo',
+      style: 'css',
+      projectNameAndRootFormat: 'as-provided',
+    });
     await setupTailwindGenerator(tree, { project: 'demo' });
     await cypressComponentConfiguration(tree, {
       generateTests: false,
       project: 'demo',
     });
 
-    expect(tree.read('apps/demo/cypress/support/styles.ct.css', 'utf-8'))
+    expect(tree.read('demo/cypress/support/styles.ct.css', 'utf-8'))
       .toMatchInlineSnapshot(`
       "/* This is where you can load global styles to apply to all components. */
       @tailwind base;
@@ -105,9 +124,9 @@ describe('cypress-component-configuration generator', () => {
       @tailwind utilities;
       "
     `);
-    expect(
+    expect(tree.read('demo/cypress/support/component.ts', 'utf-8')).toContain(
-      tree.read('apps/demo/cypress/support/component.ts', 'utf-8')
+      `import './styles.ct.css';`
-    ).toContain(`import './styles.ct.css';`);
+    );
   });
 
   it('should setup nextjs lib', async () => {
@@ -117,21 +136,33 @@ describe('cypress-component-configuration generator', () => {
       style: 'css',
       unitTestRunner: 'jest',
       component: true,
+      projectNameAndRootFormat: 'as-provided',
     });
     await cypressComponentConfiguration(tree, {
       generateTests: true,
       project: 'demo',
     });
-    expect(readJson(tree, 'libs/demo/tsconfig.json').references).toEqual(
+    expect(readJson(tree, 'demo/tsconfig.json').references).toEqual(
       expect.arrayContaining([
         {
           path: './cypress/tsconfig.json',
         },
       ])
     );
-    expect(readJson(tree, 'libs/demo/cypress/tsconfig.json')).toMatchSnapshot();
+    expect(readJson(tree, 'demo/cypress/tsconfig.json')).toMatchSnapshot(`
-    expect(tree.read('libs/demo/cypress.config.ts', 'utf-8'))
+    {
-      .toMatchInlineSnapshot(`
+      "compilerOptions": {
+        "allowJs": true,
+        "module": "commonjs",
+        "outDir": "../dist/out-tsc",
+        "sourceMap": false,
+        "types": [
+          "cypress",
+          "node",
+        ],
+      }
+    }`);
+    expect(tree.read('demo/cypress.config.ts', 'utf-8')).toMatchInlineSnapshot(`
       "import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
       import { defineConfig } from 'cypress';
 
@@ -140,13 +171,13 @@ describe('cypress-component-configuration generator', () => {
       });
       "
     `);
-    expect(tree.exists('libs/demo/pages/index.cy.ts')).toBeFalsy();
+    expect(tree.exists('demo/pages/index.cy.ts')).toBeFalsy();
     expect(
       readProjectConfiguration(tree, 'demo').targets['component-test']
     ).toEqual({
       executor: '@nx/cypress:cypress',
       options: {
-        cypressConfig: 'libs/demo/cypress.config.ts',
+        cypressConfig: 'demo/cypress.config.ts',
         skipServe: true,
         testingType: 'component',
       },

packages/next/src/generators/init/init.spec.ts

@@ -7,7 +7,7 @@ describe('init', () => {
   let tree: Tree;
 
   beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
   });
 
   it('should add react dependencies', async () => {

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

@@ -22,14 +22,15 @@ describe('next library', () => {
       unitTestRunner: 'jest',
       style: 'css',
       component: true,
+      projectNameAndRootFormat: 'as-provided',
     };
-    const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    const appTree = createTreeWithEmptyWorkspace();
 
     await libraryGenerator(appTree, {
       ...baseOptions,
       name: 'myLib',
     });
-    const tsconfigTypes = readJson(appTree, 'libs/my-lib/tsconfig.lib.json')
+    const tsconfigTypes = readJson(appTree, 'my-lib/tsconfig.lib.json')
       .compilerOptions.types;
 
     expect(tsconfigTypes).toContain('@nx/next/typings/image.d.ts');
@@ -44,9 +45,10 @@ describe('next library', () => {
       unitTestRunner: 'jest',
       style: 'css',
       component: true,
+      projectNameAndRootFormat: 'as-provided',
     };
 
-    const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    const appTree = createTreeWithEmptyWorkspace();
 
     await libraryGenerator(appTree, {
       ...baseOptions,
@@ -59,12 +61,10 @@ describe('next library', () => {
     });
 
     expect(
-      readJson(appTree, 'libs/my-lib/tsconfig.json').compilerOptions
+      readJson(appTree, 'my-lib/tsconfig.json').compilerOptions.jsxImportSource
-        .jsxImportSource
     ).not.toBeDefined();
     expect(
-      readJson(appTree, 'libs/my-lib2/tsconfig.json').compilerOptions
+      readJson(appTree, 'my-lib2/tsconfig.json').compilerOptions.jsxImportSource
-        .jsxImportSource
     ).toEqual('@emotion/react');
   });
 
@@ -79,6 +79,7 @@ describe('next library', () => {
       unitTestRunner: 'jest',
       style: 'css',
       component: true,
+      projectNameAndRootFormat: 'as-provided',
     });
 
     expect(appTree.read('my-lib/src/index.ts', 'utf-8')).toContain(

packages/next/src/generators/page/page.spec.ts

@@ -11,16 +11,18 @@ describe('component', () => {
   beforeEach(async () => {
     projectName = 'my-app';
     appRouterProjectName = 'my-app-router';
-    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    tree = createTreeWithEmptyWorkspace();
     await applicationGenerator(tree, {
       name: projectName,
       style: 'css',
       appDir: false,
+      projectNameAndRootFormat: 'as-provided',
     });
 
     await applicationGenerator(tree, {
       name: appRouterProjectName,
       style: 'css',
+      projectNameAndRootFormat: 'as-provided',
     });
   });
 
@@ -32,10 +34,8 @@ describe('component', () => {
         style: 'css',
       });
 
-      expect(tree.exists('apps/my-app/pages/hello/index.tsx')).toBeTruthy();
+      expect(tree.exists('my-app/pages/hello/index.tsx')).toBeTruthy();
-      expect(
+      expect(tree.exists('my-app/pages/hello/index.module.css')).toBeTruthy();
-        tree.exists('apps/my-app/pages/hello/index.module.css')
-      ).toBeTruthy();
     });
 
     it('should support dynamic routes and directories', async () => {
@@ -47,14 +47,14 @@ describe('component', () => {
       });
 
       expect(
-        tree.exists('apps/my-app/pages/posts/[dynamic]/index.tsx')
+        tree.exists('my-app/pages/posts/[dynamic]/index.tsx')
       ).toBeTruthy();
       expect(
-        tree.exists('apps/my-app/pages/posts/[dynamic]/index.module.css')
+        tree.exists('my-app/pages/posts/[dynamic]/index.module.css')
       ).toBeTruthy();
 
       const content = tree
-        .read('apps/my-app/pages/posts/[dynamic]/index.tsx')
+        .read('my-app/pages/posts/[dynamic]/index.tsx')
         .toString();
       expect(content).toMatch(/DynamicProps/);
     });
@@ -69,10 +69,10 @@ describe('component', () => {
       });
 
       expect(
-        tree.exists(`apps/${appRouterProjectName}/app/about/page.tsx`)
+        tree.exists(`${appRouterProjectName}/app/about/page.tsx`)
       ).toBeTruthy();
       expect(
-        tree.exists(`apps/${appRouterProjectName}/app/about/page.module.css`)
+        tree.exists(`${appRouterProjectName}/app/about/page.module.css`)
       ).toBeTruthy();
     });
 
@@ -85,16 +85,16 @@ describe('component', () => {
       });
 
       expect(
-        tree.exists(`apps/${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
+        tree.exists(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
       ).toBeTruthy();
       expect(
         tree.exists(
-          `apps/${appRouterProjectName}/app/posts/[dynamic]/page.module.css`
+          `${appRouterProjectName}/app/posts/[dynamic]/page.module.css`
         )
       ).toBeTruthy();
 
       const content = tree
-        .read(`apps/${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
+        .read(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
         .toString();
       expect(content).toMatch(/DynamicProps/);
     });