diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
index 81e944090b214..394b72f2bdedc 100644
--- a/docs/generated/manifests/menus.json
+++ b/docs/generated/manifests/menus.json
@@ -5183,6 +5183,14 @@
                 "children": [],
                 "isExternal": false,
                 "disableCollapsible": false
+              },
+              {
+                "id": "cypress-component-configuration",
+                "path": "/packages/next/generators/cypress-component-configuration",
+                "name": "cypress-component-configuration",
+                "children": [],
+                "isExternal": false,
+                "disableCollapsible": false
               }
             ],
             "isExternal": false,
diff --git a/docs/generated/manifests/packages.json b/docs/generated/manifests/packages.json
index 531b9847bcb20..4989c4f058ddb 100644
--- a/docs/generated/manifests/packages.json
+++ b/docs/generated/manifests/packages.json
@@ -1380,6 +1380,15 @@
         "originalFilePath": "/packages/next/src/generators/custom-server/schema.json",
         "path": "/packages/next/generators/custom-server",
         "type": "generator"
+      },
+      "/packages/next/generators/cypress-component-configuration": {
+        "description": "cypress-component-configuration generator",
+        "file": "generated/packages/next/generators/cypress-component-configuration.json",
+        "hidden": false,
+        "name": "cypress-component-configuration",
+        "originalFilePath": "/packages/next/src/generators/cypress-component-configuration/schema.json",
+        "path": "/packages/next/generators/cypress-component-configuration",
+        "type": "generator"
       }
     },
     "path": "/packages/next"
diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json
index 7d134e5ccb70a..550955329139f 100644
--- a/docs/generated/packages-metadata.json
+++ b/docs/generated/packages-metadata.json
@@ -1361,6 +1361,15 @@
         "originalFilePath": "/packages/next/src/generators/custom-server/schema.json",
         "path": "next/generators/custom-server",
         "type": "generator"
+      },
+      {
+        "description": "cypress-component-configuration generator",
+        "file": "generated/packages/next/generators/cypress-component-configuration.json",
+        "hidden": false,
+        "name": "cypress-component-configuration",
+        "originalFilePath": "/packages/next/src/generators/cypress-component-configuration/schema.json",
+        "path": "next/generators/cypress-component-configuration",
+        "type": "generator"
       }
     ],
     "githubRoot": "https://github.com/nrwl/nx/blob/master",
diff --git a/docs/generated/packages/next/generators/cypress-component-configuration.json b/docs/generated/packages/next/generators/cypress-component-configuration.json
new file mode 100644
index 0000000000000..5d60d013595df
--- /dev/null
+++ b/docs/generated/packages/next/generators/cypress-component-configuration.json
@@ -0,0 +1,53 @@
+{
+  "name": "cypress-component-configuration",
+  "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration",
+  "schema": {
+    "$schema": "http://json-schema.org/schema",
+    "cli": "nx",
+    "$id": "CypressComponentConfiguration",
+    "title": "NextJS Component Testing Configuration",
+    "description": "Add Cypress Componet Testing to an existing NextJS project.",
+    "type": "object",
+    "examples": [
+      {
+        "command": "nx g @nrwl/next:cypress-component-configuration --project=my-next-project",
+        "description": "Add component testing to your Next project"
+      },
+      {
+        "command": "nx g @nrwl/next:cypress-component-configuration --project=my-next-project --generate-tests",
+        "description": "Add component testing to your Next project and generate component tests for your existing components"
+      }
+    ],
+    "properties": {
+      "project": {
+        "type": "string",
+        "description": "The name of the project to add cypress component testing configuration to",
+        "x-dropdown": "projects",
+        "x-prompt": "What project should we add Cypress component testing to?",
+        "x-priority": "important"
+      },
+      "generateTests": {
+        "type": "boolean",
+        "description": "Generate default component tests for existing components in the project",
+        "x-prompt": "Automatically generate tests for components declared in this project?",
+        "default": false,
+        "x-priority": "important"
+      },
+      "skipFormat": {
+        "type": "boolean",
+        "description": "Skip formatting files",
+        "default": false,
+        "x-priority": "internal"
+      }
+    },
+    "required": ["project"],
+    "examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nNext component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-11 generator](/packages/cypress/generators/migrate-to-cypress-11).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your Next project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/next:cypress-component-configuration --project=my-cool-next-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/next/plugins/component-testing';\n\nexport default defineConfig({\n  component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/next/plugins/component-testing';\n\nexport default defineConfig({\n  component: {\n    ...nxComponentTestingPreset(__filename),\n    // extra options here\n  },\n});\n```\n\n```shell\nnx g @nrwl/next:cypress-component-project --project=my-cool-next-project\n```\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/next:cypress-component-configuration --project=my-cool-next-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-next-project\n```\n\nHere is an example of the project configuration that is generated.\n\n```json {% fileName=\"project.json\" %}\n{\n  \"targets\" {\n    \"component-test\": {\n      \"executor\": \"@nrwl/cypress:cypress\",\n      \"options\": {\n        \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n        \"testingType\": \"component\",\n        \"skipServe\": true\n      }\n    }\n  }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n",
+    "presets": []
+  },
+  "description": "cypress-component-configuration generator",
+  "implementation": "/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts",
+  "aliases": [],
+  "hidden": false,
+  "path": "/packages/next/src/generators/cypress-component-configuration/schema.json",
+  "type": "generator"
+}
diff --git a/e2e/next/src/next-component-tests.test.ts b/e2e/next/src/next-component-tests.test.ts
new file mode 100644
index 0000000000000..98de2658362c2
--- /dev/null
+++ b/e2e/next/src/next-component-tests.test.ts
@@ -0,0 +1,190 @@
+import {
+  createFile,
+  newProject,
+  runCLI,
+  uniq,
+  updateFile,
+  runCypressTests,
+  updateJson,
+} from '@nrwl/e2e/utils';
+
+describe('NextJs Component Testing', () => {
+  beforeAll(() => {
+    newProject({
+      name: uniq('next-ct'),
+    });
+  });
+
+  it('should test a NextJs app', () => {
+    const appName = uniq('next-app');
+    createAppWithCt(appName);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${appName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+    addTailwindToApp(appName);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${appName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+
+  it('should test a NextJs lib', async () => {
+    const libName = uniq('next-lib');
+    createLibWithCt(libName, false);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+    addTailwindToLib(libName);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+
+  it('should test a NextJs buildable lib', async () => {
+    const buildableLibName = uniq('next-buildable-lib');
+    createLibWithCt(buildableLibName, true);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+
+    addTailwindToLib(buildableLibName);
+    if (runCypressTests()) {
+      expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
+});
+
+function createAppWithCt(appName: string) {
+  runCLI(`generate @nrwl/next:app ${appName} --no-interactive`);
+  runCLI(
+    `generate @nrwl/next:component button --project=${appName} --directory=components --flat --no-interactive`
+  );
+  createFile(
+    `apps/${appName}/public/data.json`,
+    JSON.stringify({ message: 'loaded from app data.json' })
+  );
+
+  updateFile(`apps/${appName}/components/button.tsx`, (content) => {
+    return `import { useEffect, useState } from 'react';
+
+export interface ButtonProps {
+  text: string;
+}
+
+const data = fetch('/data.json').then((r) => r.json());
+export default function Button(props: ButtonProps) {
+  const [state, setState] = useState<Record<string, any>>();
+  useEffect(() => {
+    data.then(setState);
+  }, []);
+  return (
+    <>
+      {state && <pre>{JSON.stringify(state, null, 2)}</pre>}
+      <p className="text-blue-600">Button</p>
+      <button className="text-white bg-black p-4">{props.text}</button>
+    </>
+  );
+}
+`;
+  });
+
+  runCLI(
+    `generate @nrwl/next:cypress-component-configuration --project=${appName} --generate-tests --no-interactive`
+  );
+}
+
+function addTailwindToApp(appName: string) {
+  runCLI(
+    `generate @nrwl/react:setup-tailwind --project=${appName} --no-interactive`
+  );
+  updateFile(`apps/${appName}/cypress/support/component.ts`, (content) => {
+    return `${content}
+import '../../pages/styles.css'`;
+  });
+
+  updateFile(`apps/${appName}/components/button.cy.tsx`, (content) => {
+    return `import * as React from 'react';
+import Button from './button';
+
+describe(Button.name, () => {
+  it('renders', () => {
+    cy.mount(<Button text={'test'} />);
+  });
+
+  it('should apply tailwind', () => {
+    cy.mount(<Button text={'tailwind'} />);
+    // should have tailwind styles
+    cy.get('p').should('have.css', 'color', 'rgb(37, 99, 235)');
+  });
+});
+`;
+  });
+}
+
+function createLibWithCt(libName: string, buildable: boolean) {
+  runCLI(
+    `generate @nrwl/next:lib ${libName} --buildable=${buildable} --no-interactive`
+  );
+
+  runCLI(
+    `generate @nrwl/next:component button --project=${libName} --flat --export --no-interactive`
+  );
+  updateFile(`libs/${libName}/src/lib/button.tsx`, (content) => {
+    return `import { useEffect, useState } from 'react';
+export interface ButtonProps {
+text: string
+}
+
+export function Button(props: ButtonProps) {
+return <button className="text-white bg-black p-4">{props.text}</button>
+}
+
+export default Button;
+`;
+  });
+
+  runCLI(
+    `generate @nrwl/next:cypress-component-configuration --project=${libName} --generate-tests --no-interactive`
+  );
+}
+function addTailwindToLib(libName: string) {
+  createFile(`libs/${libName}/src/lib/styles.css`, ``);
+  runCLI(
+    `generate @nrwl/react:setup-tailwind --project=${libName} --no-interactive`
+  );
+  updateFile(`libs/${libName}/src/lib/button.cy.tsx`, (content) => {
+    return `import * as React from 'react';
+import Button from './button';
+
+describe(Button.name, () => {
+  it('renders', () => {
+    cy.mount(<Button text={'test'} />);
+  });
+
+  it('should apply tailwind', () => {
+    cy.mount(<Button text={'tailwind'} />);
+    // should have tailwind styles
+    cy.get('button').should('have.css', 'color', 'rgb(255, 255, 255)');
+  });
+});
+`;
+  });
+  updateFile(`libs/${libName}/cypress/support/styles.ct.css`, (content) => {
+    return `${content}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+  });
+}
diff --git a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts b/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts
index 01dcdacd04316..6a40f37d19554 100644
--- a/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts
+++ b/packages/cypress/src/generators/cypress-component-project/cypress-component-project.spec.ts
@@ -129,7 +129,7 @@ describe('Cypress Component Project', () => {
       '../**/*.cy.jsx',
       '../**/*.d.ts',
     ]);
-    expect(cyTsConfig.compilerOptions.outDir).toEqual('../../../dist/out-tsc');
+    expect(cyTsConfig.compilerOptions.outDir).toEqual('../../dist/out-tsc');
     const libTsConfig = readJson(tree, 'libs/cool-lib/tsconfig.lib.json');
     expect(libTsConfig.exclude).toEqual(
       expect.arrayContaining([
diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__ b/packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__
index 461548759d03a..340423834319b 100644
--- a/packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__
+++ b/packages/cypress/src/generators/cypress-component-project/files/cypress/support/commands.ts__ext__
@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite
@@ -9,18 +10,25 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 
+declare global {
 // eslint-disable-next-line @typescript-eslint/no-namespace
-  declare namespace Cypress {
+  namespace Cypress {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Chainable<Subject> {
       login(email: string, password: string): void;
+      // TODO: define a mount command
+      // mount: typeof mount;
     }
   }
+}
+
+// Cypress.Commands.add('mount', mount)
+
 //
 // -- This is a parent command --
-    Cypress.Commands.add('login', (email, password) => {
-      console.log('Custom command example: Login', email, password);
-    });
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
diff --git a/packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json b/packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json
index 9c26314dd83ef..24d2d4a1c8f35 100644
--- a/packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json
+++ b/packages/cypress/src/generators/cypress-component-project/files/cypress/tsconfig.cy.json
@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "<%= offsetFromRoot %>../dist/out-tsc",
+    "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "module": "commonjs",
     "types": ["cypress", "node"]
   },
diff --git a/packages/next/docs/cypress-component-configuration-examples.md b/packages/next/docs/cypress-component-configuration-examples.md
new file mode 100644
index 0000000000000..8a87de70923c5
--- /dev/null
+++ b/packages/next/docs/cypress-component-configuration-examples.md
@@ -0,0 +1,79 @@
+{% callout type="caution" title="Can I use component testing?" %}
+Next component testing with Nx requires **Cypress version 10.7.0** and up.
+
+You can migrate with to v10 via the [migrate-to-cypress-11 generator](/packages/cypress/generators/migrate-to-cypress-11).
+
+This generator is for Cypress based component testing.
+
+If you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)
+{% /callout %}
+
+This generator is designed to get your Next project up and running with Cypress Component Testing.
+
+```shell
+nx g @nrwl/next:cypress-component-configuration --project=my-cool-next-project
+```
+
+Running this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.
+
+```ts {% fileName="cypress.config.ts" %}
+import { defineConfig } from 'cypress';
+import { nxComponentTestingPreset } from '@nrwl/next/plugins/component-testing';
+
+export default defineConfig({
+  component: nxComponentTestingPreset(__filename),
+});
+```
+
+Here is an example on how to add custom options to the configuration
+
+```ts {% fileName="cypress.config.ts" %}
+import { defineConfig } from 'cypress';
+import { nxComponentTestingPreset } from '@nrwl/next/plugins/component-testing';
+
+export default defineConfig({
+  component: {
+    ...nxComponentTestingPreset(__filename),
+    // extra options here
+  },
+});
+```
+
+```shell
+nx g @nrwl/next:cypress-component-project --project=my-cool-next-project
+```
+
+## Auto Generating Tests
+
+You can optionally use the `--generate-tests` flag to generate a test file for each component in your project.
+
+```shell
+nx g @nrwl/next:cypress-component-configuration --project=my-cool-next-project --generate-tests
+```
+
+## Running Component Tests
+
+A new `component-test` target will be added to the specified project to run your component tests.
+
+```shell
+nx g component-test my-cool-next-project
+```
+
+Here is an example of the project configuration that is generated.
+
+```json {% fileName="project.json" %}
+{
+  "targets" {
+    "component-test": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "<path-to-project-root>/cypress.config.ts",
+        "testingType": "component",
+        "skipServe": true
+      }
+    }
+  }
+}
+```
+
+Nx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).
diff --git a/packages/next/generators.json b/packages/next/generators.json
index 573c45ef8e521..4c3c342badf8b 100644
--- a/packages/next/generators.json
+++ b/packages/next/generators.json
@@ -67,6 +67,11 @@
       "factory": "./src/generators/custom-server/custom-server#customServerGenerator",
       "schema": "./src/generators/custom-server/schema.json",
       "description": "Set up a custom server."
+    },
+    "cypress-component-configuration": {
+      "factory": "./src/generators/cypress-component-configuration/cypress-component-configuration",
+      "schema": "./src/generators/cypress-component-configuration/schema.json",
+      "description": "cypress-component-configuration generator"
     }
   }
 }
diff --git a/packages/next/plugins/component-testing.ts b/packages/next/plugins/component-testing.ts
new file mode 100644
index 0000000000000..aa5284f08f4fe
--- /dev/null
+++ b/packages/next/plugins/component-testing.ts
@@ -0,0 +1,131 @@
+import {
+  createExecutorContext,
+  getProjectConfigByPath,
+} from '@nx/cypress/src/utils/ct-helpers';
+import {
+  nxBaseCypressPreset,
+  NxComponentTestingOptions,
+} from '@nx/cypress/plugins/cypress-preset';
+import {
+  ExecutorContext,
+  parseTargetString,
+  readCachedProjectGraph,
+  readTargetOptions,
+  stripIndents,
+} from '@nx/devkit';
+import { withReact } from '@nx/react';
+import {
+  AssetGlobPattern,
+  composePluginsSync,
+  NormalizedWebpackExecutorOptions,
+  withNx,
+} from '@nx/webpack';
+import { join } from 'path';
+import { NextBuildBuilderOptions } from '../src/utils/types';
+import { CypressExecutorOptions } from '@nx/cypress/src/executors/cypress/cypress.impl';
+
+export function nxComponentTestingPreset(
+  pathToConfig: string,
+  options?: NxComponentTestingOptions
+) {
+  const graph = readCachedProjectGraph();
+  const { targets: ctTargets, name: ctProjectName } = getProjectConfigByPath(
+    graph,
+    pathToConfig
+  );
+  const ctTargetName = options?.ctTargetName || 'component-test';
+  const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
+  const ctExecutorContext: ExecutorContext = createExecutorContext(
+    graph,
+    ctTargets,
+    ctProjectName,
+    ctTargetName,
+    ctConfigurationName
+  );
+  const ctExecutorOptions = readTargetOptions<CypressExecutorOptions>(
+    {
+      project: ctProjectName,
+      target: ctTargetName,
+      configuration: ctConfigurationName,
+    },
+    ctExecutorContext
+  );
+
+  const buildTarget = ctExecutorOptions.devServerTarget;
+
+  let buildAssets: AssetGlobPattern[] = [];
+  let buildFileReplacements = [];
+  let buildOuputPath = `dist/${ctProjectName}/.next`;
+  if (buildTarget) {
+    const parsedBuildTarget = parseTargetString(buildTarget, graph);
+    const buildProjectConfig = graph.nodes[parsedBuildTarget.project]?.data;
+    const buildExecutorContext = createExecutorContext(
+      graph,
+      buildProjectConfig.targets,
+      parsedBuildTarget.project,
+      parsedBuildTarget.target,
+      parsedBuildTarget.configuration
+    );
+    const buildExecutorOptions = readTargetOptions<NextBuildBuilderOptions>(
+      {
+        project: parsedBuildTarget.project,
+        target: parsedBuildTarget.target,
+        configuration: parsedBuildTarget.configuration,
+      },
+      buildExecutorContext
+    );
+
+    buildAssets ??= buildExecutorOptions.assets;
+    buildFileReplacements ??= buildExecutorOptions.fileReplacements;
+    buildOuputPath ??= buildExecutorOptions.outputPath;
+  }
+
+  const ctProjectConfig = graph.nodes[ctProjectName]?.data;
+
+  if (!ctProjectConfig) {
+    throw new Error(stripIndents`Unable to load project configs from the project graph.
+Provided build target, ${buildTarget}.
+Able to find CT project, ${!!ctProjectConfig}.`);
+  }
+
+  const webpackOptions: NormalizedWebpackExecutorOptions = {
+    root: ctExecutorContext.root,
+    projectRoot: ctProjectConfig.root,
+    sourceRoot: ctProjectConfig.sourceRoot,
+    main: '',
+    fileReplacements: buildFileReplacements,
+    assets: buildAssets,
+    outputPath: buildOuputPath,
+    outputFileName: 'main.js',
+    compiler: 'swc',
+    tsConfig: join(
+      ctExecutorContext.root,
+      ctProjectConfig.root,
+      'tsconfig.json'
+    ),
+  };
+  const configure = composePluginsSync(
+    withNx(),
+    withReact({
+      styles: [],
+      scripts: [],
+      postcssConfig: ctProjectConfig.root,
+    })
+  );
+  const webpackConfig = configure(
+    {},
+    {
+      options: webpackOptions,
+      context: ctExecutorContext,
+    }
+  );
+
+  return {
+    ...nxBaseCypressPreset(__filename),
+    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    devServer: {
+      ...({ framework: 'react', bundler: 'webpack' } as const),
+      webpackConfig,
+    },
+  };
+}
diff --git a/packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap b/packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
new file mode 100644
index 0000000000000..fcd58889d22af
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`cypress-component-configuration generator should setup nextjs app 1`] = `
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "cypress",
+      "node",
+    ],
+  },
+  "extends": "../tsconfig.json",
+  "include": [
+    "support/**/*.ts",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts",
+  ],
+}
+`;
+
+exports[`cypress-component-configuration generator should setup nextjs lib 1`] = `
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "cypress",
+      "node",
+    ],
+  },
+  "extends": "../tsconfig.json",
+  "include": [
+    "support/**/*.ts",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts",
+  ],
+}
+`;
diff --git a/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts
new file mode 100644
index 0000000000000..4c0a3aa166cc3
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.spec.ts
@@ -0,0 +1,123 @@
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { readJson, readProjectConfiguration, Tree } from '@nx/devkit';
+import { cypressComponentConfiguration } from './cypress-component-configuration';
+import { applicationGenerator } from '../application/application';
+import { libraryGenerator } from '../library/library';
+import { setupTailwindGenerator } from '@nx/react';
+import { Linter } from '@nx/linter';
+
+describe('cypress-component-configuration generator', () => {
+  let tree: any;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+  });
+
+  it('should setup nextjs app', async () => {
+    await applicationGenerator(tree, { name: 'demo', style: 'css' });
+    await cypressComponentConfiguration(tree, {
+      generateTests: true,
+      project: 'demo',
+    });
+    expect(readJson(tree, 'apps/demo/tsconfig.json').exclude).toEqual(
+      expect.arrayContaining([
+        'cypress/**/*',
+        'cypress.config.ts',
+        '**/*.cy.ts',
+        '**/*.cy.js',
+        '**/*.cy.tsx',
+        '**/*.cy.jsx',
+      ])
+    );
+    expect(
+      readJson(tree, 'apps/demo/cypress/tsconfig.cy.json')
+    ).toMatchSnapshot();
+    expect(tree.read('apps/demo/cypress.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { defineConfig } from 'cypress';
+      import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
+
+      export default defineConfig({
+        component: nxComponentTestingPreset(__filename),
+      });
+      "
+    `);
+    expect(tree.exists('apps/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',
+        skipServe: true,
+        testingType: 'component',
+      },
+    });
+  });
+
+  it('should add styles setup in app', async () => {
+    await applicationGenerator(tree, { name: 'demo', style: 'css' });
+    await setupTailwindGenerator(tree, { project: 'demo' });
+    await cypressComponentConfiguration(tree, {
+      generateTests: false,
+      project: 'demo',
+    });
+
+    expect(tree.read('apps/demo/cypress/support/styles.ct.css', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "/* This is where you can load global styles to apply to all components. */
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+      "
+    `);
+    expect(tree.read('apps/demo/cypress/support/component.ts', 'utf-8'))
+      .toContain(`import './commands';
+import './styles.ct.css';`);
+  });
+
+  it('should setup nextjs lib', async () => {
+    await libraryGenerator(tree, {
+      name: 'demo',
+      linter: Linter.EsLint,
+      style: 'css',
+      unitTestRunner: 'jest',
+      component: true,
+    });
+    await cypressComponentConfiguration(tree, {
+      generateTests: true,
+      project: 'demo',
+    });
+    expect(readJson(tree, 'libs/demo/tsconfig.json').references).toEqual(
+      expect.arrayContaining([
+        {
+          path: './cypress/tsconfig.cy.json',
+        },
+      ])
+    );
+    expect(
+      readJson(tree, 'libs/demo/cypress/tsconfig.cy.json')
+    ).toMatchSnapshot();
+    expect(tree.read('libs/demo/cypress.config.ts', 'utf-8'))
+      .toMatchInlineSnapshot(`
+      "import { defineConfig } from 'cypress';
+      import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
+
+      export default defineConfig({
+        component: nxComponentTestingPreset(__filename),
+      });
+      "
+    `);
+    expect(tree.exists('libs/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',
+        skipServe: true,
+        testingType: 'component',
+      },
+    });
+  });
+});
diff --git a/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
new file mode 100644
index 0000000000000..6645bb3be2b43
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts
@@ -0,0 +1,121 @@
+import {
+  ensurePackage,
+  formatFiles,
+  generateFiles,
+  GeneratorCallback,
+  joinPathFragments,
+  ProjectConfiguration,
+  readProjectConfiguration,
+  runTasksInSerial,
+  Tree,
+  updateProjectConfiguration,
+  visitNotIgnoredFiles,
+} from '@nx/devkit';
+import { isComponent } from '@nx/react/src/utils/ct-utils';
+import { CypressComponentConfigurationGeneratorSchema } from './schema';
+import { nxVersion } from '../../utils/versions';
+import { componentTestGenerator } from '@nx/react';
+
+export async function cypressComponentConfiguration(
+  tree: Tree,
+  options: CypressComponentConfigurationGeneratorSchema
+) {
+  const tasks: GeneratorCallback[] = [];
+
+  const { cypressComponentProject } = ensurePackage<
+    typeof import('@nx/cypress')
+  >('@nx/cypress', nxVersion);
+  tasks.push(
+    await cypressComponentProject(tree, {
+      project: options.project,
+      skipFormat: true,
+    })
+  );
+  const projectConfig = readProjectConfiguration(tree, options.project);
+
+  projectConfig.targets['component-test'].options = {
+    ...projectConfig.targets['component-test'].options,
+    skipServe: true,
+  };
+  updateProjectConfiguration(tree, options.project, projectConfig);
+
+  await addFiles(tree, projectConfig, options);
+
+  const { webpackInitGenerator } = ensurePackage<typeof import('@nx/webpack')>(
+    '@nx/webpack',
+    nxVersion
+  );
+  tasks.push(
+    await webpackInitGenerator(tree, {
+      compiler: 'swc',
+      uiFramework: 'react',
+      skipFormat: true,
+    })
+  );
+
+  if (!options.skipFormat) {
+    await formatFiles(tree);
+  }
+
+  return runTasksInSerial(...tasks);
+}
+
+async function addFiles(
+  tree: Tree,
+  projectConfig: ProjectConfiguration,
+  opts: CypressComponentConfigurationGeneratorSchema
+) {
+  const cypressConfigPath = joinPathFragments(
+    projectConfig.root,
+    'cypress.config.ts'
+  );
+  if (tree.exists(cypressConfigPath)) {
+    tree.delete(cypressConfigPath);
+  }
+
+  generateFiles(
+    tree,
+    joinPathFragments(__dirname, 'files'),
+    projectConfig.root,
+    {
+      tailwind: ['js', 'cjs'].some((ext) =>
+        tree.exists(
+          joinPathFragments(projectConfig.root, `tailwind.config.${ext}`)
+        )
+      ),
+      tpl: '',
+    }
+  );
+
+  const ctFile = joinPathFragments(
+    projectConfig.root,
+    'cypress',
+    'support',
+    'component.ts'
+  );
+
+  tree.write(ctFile, `${tree.read(ctFile, 'utf-8')}import './styles.ct.css';`);
+
+  if (opts.generateTests) {
+    const filePaths = [];
+    visitNotIgnoredFiles(tree, projectConfig.sourceRoot, (filePath) => {
+      // we don't generate tests for pages/server-side components
+      if (filePath.includes('pages') || filePath.includes('server')) {
+        return;
+      }
+
+      if (isComponent(tree, filePath)) {
+        filePaths.push(filePath);
+      }
+    });
+
+    for (const filePath of filePaths) {
+      await componentTestGenerator(tree, {
+        project: opts.project,
+        componentPath: filePath,
+      });
+    }
+  }
+}
+
+export default cypressComponentConfiguration;
diff --git a/packages/next/src/generators/cypress-component-configuration/files/cypress.config.ts__tpl__ b/packages/next/src/generators/cypress-component-configuration/files/cypress.config.ts__tpl__
new file mode 100644
index 0000000000000..71a45fb3d7328
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/files/cypress.config.ts__tpl__
@@ -0,0 +1,6 @@
+import { defineConfig } from 'cypress';
+import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
+
+export default defineConfig({
+  component: nxComponentTestingPreset(__filename),
+});
diff --git a/packages/next/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__tpl__ b/packages/next/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__tpl__
new file mode 100644
index 0000000000000..0b0885b477915
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__tpl__
@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/react18'
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+declare global {
+// eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/packages/next/src/generators/cypress-component-configuration/files/cypress/support/styles.ct.css__tpl__ b/packages/next/src/generators/cypress-component-configuration/files/cypress/support/styles.ct.css__tpl__
new file mode 100644
index 0000000000000..ddf039394f907
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/files/cypress/support/styles.ct.css__tpl__
@@ -0,0 +1,4 @@
+/* This is where you can load global styles to apply to all components. */
+<% if(tailwind) { %>@tailwind base;
+@tailwind components;
+@tailwind utilities;<% } %>
diff --git a/packages/next/src/generators/cypress-component-configuration/schema.d.ts b/packages/next/src/generators/cypress-component-configuration/schema.d.ts
new file mode 100644
index 0000000000000..12039f36f7a26
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/schema.d.ts
@@ -0,0 +1,5 @@
+export interface CypressComponentConfigurationGeneratorSchema {
+  project: string;
+  generateTests: boolean;
+  skipFormat?: boolean;
+}
diff --git a/packages/next/src/generators/cypress-component-configuration/schema.json b/packages/next/src/generators/cypress-component-configuration/schema.json
new file mode 100644
index 0000000000000..a0e4f933a3bd3
--- /dev/null
+++ b/packages/next/src/generators/cypress-component-configuration/schema.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "CypressComponentConfiguration",
+  "title": "NextJS Component Testing Configuration",
+  "description": "Add Cypress Componet Testing to an existing NextJS project.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nrwl/next:cypress-component-configuration --project=my-next-project",
+      "description": "Add component testing to your Next project"
+    },
+    {
+      "command": "nx g @nrwl/next:cypress-component-configuration --project=my-next-project --generate-tests",
+      "description": "Add component testing to your Next project and generate component tests for your existing components"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add cypress component testing configuration to",
+      "x-dropdown": "projects",
+      "x-prompt": "What project should we add Cypress component testing to?",
+      "x-priority": "important"
+    },
+    "generateTests": {
+      "type": "boolean",
+      "description": "Generate default component tests for existing components in the project",
+      "x-prompt": "Automatically generate tests for components declared in this project?",
+      "default": false,
+      "x-priority": "important"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"],
+  "examplesFile": "../../../docs/cypress-component-configuration-examples.md"
+}
diff --git a/packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap b/packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
index 72e505364ff8b..f9131f318c205 100644
--- a/packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
+++ b/packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
@@ -6,7 +6,7 @@ import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename, {
-    bundler: 'vite'
+    bundler: 'vite',
   }),
 });
 "
@@ -18,7 +18,7 @@ import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename, {
-    bundler: 'vite'
+    bundler: 'vite',
   }),
 });
 "
@@ -30,7 +30,7 @@ import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename, {
-    bundler: 'webpack'
+    bundler: 'webpack',
   }),
 });
 "
@@ -42,78 +42,68 @@ import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename, {
-    bundler: 'vite'
+    bundler: 'vite',
   }),
 });
 "
 `;
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing js components 1`] = `
-"import * as React from 'react'
-import SomeCmp from './some-cmp'
-
+"import * as React from 'react';
+import SomeCmp from './some-cmp';
 
 describe(SomeCmp.name, () => {
   it('renders', () => {
-    cy.mount(<SomeCmp />)
-  })
-})
-
+    cy.mount(<SomeCmp />);
+  });
+});
 "
 `;
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing js components 2`] = `
-"import * as React from 'react'
-import AnotherCmp from './another-cmp'
-
+"import * as React from 'react';
+import AnotherCmp from './another-cmp';
 
 describe(AnotherCmp.name, () => {
   it('renders', () => {
-    cy.mount(<AnotherCmp />)
-  })
-})
-
+    cy.mount(<AnotherCmp />);
+  });
+});
 "
 `;
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 1`] = `
-"import * as React from 'react'
-import SomeLib, { SomeLibProps } from './some-lib'
-
+"import * as React from 'react';
+import SomeLib, { SomeLibProps } from './some-lib';
 
 describe(SomeLib.name, () => {
   let props: SomeLibProps;
 
   beforeEach(() => {
-    props = {
-    }
-  })
+    props = {};
+  });
 
   it('renders', () => {
-    cy.mount(<SomeLib {...props}/>)
-  })
-})
-
+    cy.mount(<SomeLib {...props} />);
+  });
+});
 "
 `;
 
 exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 2`] = `
-"import * as React from 'react'
-import AnotherCmp, { AnotherCmpProps } from './another-cmp'
-
+"import * as React from 'react';
+import AnotherCmp, { AnotherCmpProps } from './another-cmp';
 
 describe(AnotherCmp.name, () => {
   let props: AnotherCmpProps;
 
   beforeEach(() => {
-    props = {
-    }
-  })
+    props = {};
+  });
 
   it('renders', () => {
-    cy.mount(<AnotherCmp {...props}/>)
-  })
-})
-
+    cy.mount(<AnotherCmp {...props} />);
+  });
+});
 "
 `;
diff --git a/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts b/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts
index a6241ea89f5f5..c49bcc2a900f8 100644
--- a/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts
+++ b/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts
@@ -6,7 +6,7 @@ import {
 } from '@nx/devkit';
 import { nxVersion } from '../../utils/versions';
 import { addFiles } from './lib/add-files';
-import { FoundTarget, updateProjectConfig } from './lib/update-configs';
+import { FoundTarget, addCTTargetWithBuildTarget } from '../../utils/ct-utils';
 import { CypressComponentConfigurationSchema } from './schema.d';
 
 /**
@@ -25,9 +25,20 @@ export async function cypressComponentConfigGenerator(
     skipFormat: true,
   });
 
-  const found: FoundTarget = await updateProjectConfig(tree, options);
+  const found: FoundTarget = await addCTTargetWithBuildTarget(tree, {
+    project: options.project,
+    buildTarget: options.buildTarget,
+    validExecutorNames: new Set<string>([
+      '@nx/webpack:webpack',
+      '@nx/vite:build',
+      '@nrwl/webpack:webpack',
+      '@nrwl/vite:build',
+    ]),
+  });
+
   await addFiles(tree, projectConfig, options, found);
-  if (options.skipFormat) {
+
+  if (!options.skipFormat) {
     await formatFiles(tree);
   }
 
diff --git a/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts b/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts
index b7e37fa443c87..0b90fd8b61d09 100644
--- a/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts
+++ b/packages/react/src/generators/cypress-component-configuration/lib/add-files.ts
@@ -1,27 +1,20 @@
 import {
   addDependenciesToPackageJson,
-  createProjectGraphAsync,
-  ensurePackage,
   generateFiles,
   joinPathFragments,
   logger,
-  parseTargetString,
   ProjectConfiguration,
-  readProjectConfiguration,
   Tree,
   visitNotIgnoredFiles,
 } from '@nx/devkit';
 import { nxVersion } from 'nx/src/utils/versions';
-import { getComponentNode } from '../../../utils/ast-utils';
 import { componentTestGenerator } from '../../component-test/component-test';
-import { CypressComponentConfigurationSchema } from '../schema';
-import { FoundTarget } from './update-configs';
-import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
-
-let tsModule: typeof import('typescript');
-
-const allowedFileExt = new RegExp(/\.[jt]sx?/g);
-const isSpecFile = new RegExp(/(spec|test)\./g);
+import type { CypressComponentConfigurationSchema } from '../schema';
+import {
+  FoundTarget,
+  getBundlerFromTarget,
+  isComponent,
+} from '../../../utils/ct-utils';
 
 export async function addFiles(
   tree: Tree,
@@ -37,7 +30,7 @@ export async function addFiles(
     tree.delete(cypressConfigPath);
   }
 
-  const actualBundler = await getBundler(found, tree);
+  const actualBundler = await getBundlerFromTarget(found, tree);
 
   if (options.bundler && options.bundler !== actualBundler) {
     logger.warn(
@@ -79,46 +72,3 @@ export async function addFiles(
     }
   }
 }
-
-async function getBundler(
-  found: FoundTarget,
-  tree: Tree
-): Promise<'vite' | 'webpack'> {
-  if (found.target && found.config?.executor) {
-    return found.config.executor === '@nx/vite:build' ||
-      found.config.executor === '@nrwl/vite:build'
-      ? 'vite'
-      : 'webpack';
-  }
-
-  const { target, project } = parseTargetString(
-    found.target,
-    await createProjectGraphAsync()
-  );
-  const projectConfig = readProjectConfiguration(tree, project);
-  return projectConfig?.targets?.[target]?.executor === '@nx/vite:build' ||
-    projectConfig?.targets?.[target]?.executor === '@nrwl/vite:build'
-    ? 'vite'
-    : 'webpack';
-}
-
-function isComponent(tree: Tree, filePath: string): boolean {
-  if (!tsModule) {
-    tsModule = ensureTypescript();
-  }
-
-  if (isSpecFile.test(filePath) || !allowedFileExt.test(filePath)) {
-    return false;
-  }
-
-  const content = tree.read(filePath, 'utf-8');
-  const sourceFile = tsModule.createSourceFile(
-    filePath,
-    content,
-    tsModule.ScriptTarget.Latest,
-    true
-  );
-
-  const cmpDeclaration = getComponentNode(sourceFile);
-  return !!cmpDeclaration;
-}
diff --git a/packages/react/src/generators/cypress-component-configuration/lib/update-configs.ts b/packages/react/src/generators/cypress-component-configuration/lib/update-configs.ts
deleted file mode 100644
index b9ef229e843be..0000000000000
--- a/packages/react/src/generators/cypress-component-configuration/lib/update-configs.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  readProjectConfiguration,
-  TargetConfiguration,
-  Tree,
-  updateProjectConfiguration,
-} from '@nx/devkit';
-import { CypressComponentConfigurationSchema } from '../schema';
-
-export interface FoundTarget {
-  config?: TargetConfiguration;
-  target: string;
-}
-
-export async function updateProjectConfig(
-  tree: Tree,
-  options: CypressComponentConfigurationSchema
-): Promise<FoundTarget> {
-  const { findBuildConfig } = await import(
-    '@nx/cypress/src/utils/find-target-options'
-  );
-  const found = await findBuildConfig(tree, {
-    project: options.project,
-    buildTarget: options.buildTarget,
-    validExecutorNames: new Set<string>([
-      '@nx/webpack:webpack',
-      '@nx/vite:build',
-      '@nrwl/webpack:webpack',
-      '@nrwl/vite:build',
-    ]),
-  });
-
-  assetValidConfig(found?.config);
-
-  const projectConfig = readProjectConfiguration(tree, options.project);
-  projectConfig.targets['component-test'].options = {
-    ...projectConfig.targets['component-test'].options,
-    devServerTarget: found.target,
-    skipServe: true,
-  };
-  updateProjectConfiguration(tree, options.project, projectConfig);
-
-  return found;
-}
-
-function assetValidConfig(config: unknown) {
-  if (!config) {
-    throw new Error(
-      'Unable to find a valid build configuration. Try passing in a target for a React app. --build-target=<project>:<target>[:<configuration>]'
-    );
-  }
-}
diff --git a/packages/react/src/utils/ct-utils.ts b/packages/react/src/utils/ct-utils.ts
new file mode 100644
index 0000000000000..dc9765e49b568
--- /dev/null
+++ b/packages/react/src/utils/ct-utils.ts
@@ -0,0 +1,100 @@
+import {
+  createProjectGraphAsync,
+  parseTargetString,
+  readProjectConfiguration,
+  TargetConfiguration,
+  Tree,
+  updateProjectConfiguration,
+} from '@nx/devkit';
+import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
+import { getComponentNode } from './ast-utils';
+
+let tsModule: typeof import('typescript');
+
+const allowedFileExt = new RegExp(/\.[jt]sx?/g);
+const isSpecFile = new RegExp(/(spec|test)\./g);
+
+export interface FoundTarget {
+  config?: TargetConfiguration;
+  target: string;
+}
+
+export async function addCTTargetWithBuildTarget(
+  tree: Tree,
+  options: {
+    project: string;
+    buildTarget: string;
+    validExecutorNames: Set<string>;
+  }
+): Promise<FoundTarget> {
+  const { findBuildConfig } = await import(
+    '@nx/cypress/src/utils/find-target-options'
+  );
+  const found = await findBuildConfig(tree, {
+    project: options.project,
+    buildTarget: options.buildTarget,
+    validExecutorNames: options.validExecutorNames,
+  });
+
+  assertValidConfig(found?.config);
+
+  const projectConfig = readProjectConfiguration(tree, options.project);
+  projectConfig.targets['component-test'].options = {
+    ...projectConfig.targets['component-test'].options,
+    devServerTarget: found.target,
+    skipServe: true,
+  };
+  updateProjectConfiguration(tree, options.project, projectConfig);
+
+  return found;
+}
+
+function assertValidConfig(config: unknown) {
+  if (!config) {
+    throw new Error(
+      'Unable to find a valid build configuration. Try passing in a target for an app. --build-target=<project>:<target>[:<configuration>]'
+    );
+  }
+}
+export async function getBundlerFromTarget(
+  found: FoundTarget,
+  tree: Tree
+): Promise<'vite' | 'webpack'> {
+  if (found.target && found.config?.executor) {
+    return found.config.executor === '@nrwl/vite:build' ||
+      found.config.executor === '@nx/vite:build'
+      ? 'vite'
+      : 'webpack';
+  }
+
+  const { target, project } = parseTargetString(
+    found.target,
+    await createProjectGraphAsync()
+  );
+  const projectConfig = readProjectConfiguration(tree, project);
+  const executor = projectConfig?.targets?.[target]?.executor;
+  return executor === '@nrwl/vite:build' || executor === '@nx/vite:build'
+    ? 'vite'
+    : 'webpack';
+}
+
+export function isComponent(tree: Tree, filePath: string): boolean {
+  if (!tsModule) {
+    tsModule = ensureTypescript();
+  }
+
+  if (isSpecFile.test(filePath) || !allowedFileExt.test(filePath)) {
+    return false;
+  }
+
+  const content = tree.read(filePath, 'utf-8');
+  const sourceFile = tsModule.createSourceFile(
+    filePath,
+    content,
+    tsModule.ScriptTarget.Latest,
+    true
+  );
+
+  const cmpDeclaration = getComponentNode(sourceFile);
+  return !!cmpDeclaration;
+}