feat(nextjs): Add standalone Nextjs option to react selection when running CNW (#16317)

docs/generated/cli/create-nx-workspace.md

@@ -109,6 +109,12 @@ Type: `string`
 
 Workspace name (e.g. org name)
 
+### nextAppDir
+
+Type: `boolean`
+
+Add Experimental app/ layout for next.js
+
 ### nxCloud
 
 Type: `boolean`
@@ -129,7 +135,7 @@ Package manager to use
 
 Type: `string`
 
-Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular", "node-standalone"]. To build your own see https://nx.dev/packages/nx-plugin#preset
+Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "nextjs-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular", "node-standalone"]. To build your own see https://nx.dev/packages/nx-plugin#preset
 
 ### routing
 

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

@@ -121,6 +121,13 @@
         "default": false,
         "description": "Enable experimental app directory for the project",
         "x-prompt": "Do you want to use experimental app/ in this project?"
+      },
+      "rootProject": {
+        "description": "Create an application at the root of the workspace.",
+        "type": "boolean",
+        "default": false,
+        "hidden": true,
+        "x-priority": "internal"
       }
     },
     "required": [],

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

@@ -36,6 +36,13 @@
         "default": false,
         "description": "Do not add dependencies to `package.json`.",
         "x-priority": "internal"
+      },
+      "rootProject": {
+        "description": "Create an application at the root of the workspace.",
+        "type": "boolean",
+        "default": false,
+        "hidden": true,
+        "x-priority": "internal"
       }
     },
     "required": [],

docs/generated/packages/nx/documents/create-nx-workspace.md

@@ -109,6 +109,12 @@ Type: `string`
 
 Workspace name (e.g. org name)
 
+### nextAppDir
+
+Type: `boolean`
+
+Add Experimental app/ layout for next.js
+
 ### nxCloud
 
 Type: `boolean`
@@ -129,7 +135,7 @@ Package manager to use
 
 Type: `string`
 
-Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular", "node-standalone"]. To build your own see https://nx.dev/packages/nx-plugin#preset
+Customizes the initial content of your workspace. Default presets include: ["apps", "empty", "core", "npm", "ts", "web-components", "angular-monorepo", "angular-standalone", "react-monorepo", "react-standalone", "nextjs-standalone", "react-native", "expo", "next", "nest", "express", "react", "angular", "node-standalone"]. To build your own see https://nx.dev/packages/nx-plugin#preset
 
 ### routing
 

docs/generated/packages/workspace/generators/new.json

@@ -68,6 +68,11 @@
         "description": "The framework which the application is using",
         "type": "string",
         "enum": ["express", "koa", "fastify", "nest", "none"]
+      },
+      "nextAppDir": {
+        "description": "Enable experimental app directory for the project",
+        "type": "boolean",
+        "default": false
       }
     },
     "additionalProperties": true,

docs/generated/packages/workspace/generators/preset.json

@@ -80,6 +80,11 @@
         "description": "Generate a Dockerfile",
         "type": "boolean",
         "default": false
+      },
+      "nextAppDir": {
+        "description": "Enable experimental app/ for the project",
+        "type": "boolean",
+        "default": false
       }
     },
     "presets": []

e2e/next/src/next.test.ts

@@ -21,7 +21,6 @@ import {
 } from '@nrwl/e2e/utils';
 import * as http from 'http';
 import { checkApp } from './utils';
-import { removeSync } from 'fs-extra';
 
 describe('Next.js Applications', () => {
   let proj: string;
@@ -426,6 +425,27 @@ describe('Next.js Applications', () => {
       checkExport: false,
     });
   }, 300_000);
+
+  it('should create a generate a next.js app with app layout enabled', async () => {
+    const appName = uniq('app');
+
+    runCLI(
+      `generate @nrwl/next:app ${appName} --style=css --appDir --no-interactive`
+    );
+
+    checkFilesExist(`apps/${appName}/app/api/hello/route.ts`);
+    checkFilesExist(`apps/${appName}/app/page.tsx`);
+    checkFilesExist(`apps/${appName}/app/layout.tsx`);
+    checkFilesExist(`apps/${appName}/app/global.css`);
+    checkFilesExist(`apps/${appName}/app/page.module.css`);
+
+    await checkApp(appName, {
+      checkUnitTest: false,
+      checkLint: false,
+      checkE2E: false,
+      checkExport: false,
+    });
+  }, 300_000);
 });
 
 function getData(port, path = ''): Promise<any> {

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -39,6 +39,7 @@ interface Arguments extends CreateWorkspaceOptions {
   framework: Framework;
   standaloneApi: boolean;
   docker: boolean;
+  nextAppDir: boolean;
   routing: boolean;
   bundler: Bundler;
 }
@@ -104,6 +105,10 @@ export const commandsObject: yargs.Argv<Arguments> = yargs
           .option('docker', {
             describe: chalk.dim`Generate a Dockerfile with your node-server`,
             type: 'boolean',
+          })
+          .option('nextAppDir', {
+            describe: chalk.dim`Add Experimental app/ layout for next.js`,
+            type: 'boolean',
           }),
         withNxCloud,
         withCI,
@@ -180,6 +185,7 @@ async function normalizeArgsMiddleware(
       framework,
       bundler,
       docker,
+      nextAppDir,
       routing,
       standaloneApi;
 
@@ -209,7 +215,7 @@ async function normalizeArgsMiddleware(
         if (monorepoStyle === 'package-based') {
           preset = 'npm';
         } else if (monorepoStyle === 'react') {
-          preset = Preset.ReactStandalone;
+          preset = await determineReactFramework(argv);
         } else if (monorepoStyle === 'angular') {
           preset = Preset.AngularStandalone;
         } else if (monorepoStyle === 'node-standalone') {
@@ -228,7 +234,8 @@ async function normalizeArgsMiddleware(
       if (
         preset === Preset.ReactStandalone ||
         preset === Preset.AngularStandalone ||
-        preset === Preset.NodeStandalone
+        preset === Preset.NodeStandalone ||
+        preset === Preset.NextJsStandalone
       ) {
         appName =
           argv.appName ?? argv.name ?? (await determineAppName(preset, argv));
@@ -241,6 +248,10 @@ async function normalizeArgsMiddleware(
           }
         }
 
+        if (preset === Preset.NextJsStandalone) {
+          nextAppDir = await isNextAppDir(argv);
+        }
+
         if (preset === Preset.ReactStandalone) {
           bundler = await determineBundler(argv);
         }
@@ -291,6 +302,7 @@ async function normalizeArgsMiddleware(
       ci,
       bundler,
       docker,
+      nextAppDir,
     });
   } catch (e) {
     console.error(e);
@@ -363,27 +375,27 @@ async function determineMonorepoStyle(): Promise<string> {
         {
           name: 'package-based',
           message:
-            'Package-based monorepo: Nx makes it fast, but lets you run things your way.',
+            'Package-based monorepo:      Nx makes it fast, but lets you run things your way.',
         },
         {
           name: 'integrated',
           message:
-            'Integrated monorepo:    Nx configures your favorite frameworks and lets you focus on shipping features.',
+            'Integrated monorepo:         Nx configures your favorite frameworks and lets you focus on shipping features.',
         },
         {
           name: 'react',
           message:
-            'Standalone React app:   Nx configures Vite (or Webpack), ESLint, and Cypress.',
+            'Standalone React app:        Nx configures a React app with an optional framework (e.g. Next.js).',
         },
         {
           name: 'angular',
           message:
-            'Standalone Angular app: Nx configures Jest, ESLint and Cypress.',
+            'Standalone Angular app:      Nx configures Jest, ESLint and Cypress.',
         },
         {
           name: 'node-standalone',
           message:
-            'Standalone Node app:    Nx configures a framework (ex. Express), esbuild, ESlint and Jest.',
+            'Standalone Node app:         Nx configures a framework (e.g. Express), esbuild, ESlint and Jest.',
         },
       ],
     },
@@ -582,6 +594,64 @@ async function determineDockerfile(
   }
 }
 
+async function determineReactFramework(parsedArgs: yargs.Arguments<Arguments>) {
+  if (parsedArgs.framework) {
+    return parsedArgs.framework === 'next.js'
+      ? Preset.NextJsStandalone
+      : Preset.ReactStandalone;
+  }
+  return enquirer
+    .prompt<{ framework: 'none' | 'next.js' }>([
+      {
+        name: 'framework',
+        message: 'What framework would you like to use?',
+        type: 'autocomplete',
+        choices: [
+          {
+            name: 'none',
+            message: 'None',
+            hint: 'I only want React',
+          },
+          {
+            name: 'next.js',
+            message: 'Next.js [https://nextjs.org/]',
+          },
+        ],
+        initial: 'none' as any,
+      },
+    ])
+    .then((choice) =>
+      choice.framework === 'next.js'
+        ? Preset.NextJsStandalone
+        : Preset.ReactStandalone
+    );
+}
+
+async function isNextAppDir(parsedArgs: yargs.Arguments<Arguments>) {
+  if (parsedArgs.nextAppDir === undefined) {
+    return enquirer
+      .prompt<{ appDir: 'Yes' | 'No' }>([
+        {
+          name: 'appDir',
+          message: 'Do you want to use experimental app/ in this project?',
+          type: 'autocomplete',
+          choices: [
+            {
+              name: 'No',
+            },
+            {
+              name: 'Yes',
+            },
+          ],
+          initial: 'No' as any,
+        },
+      ])
+      .then((choice) => choice.appDir === 'Yes');
+  } else {
+    return Promise.resolve(parsedArgs.nextAppDir);
+  }
+}
+
 async function determineStyle(
   preset: Preset,
   parsedArgs: yargs.Arguments<Arguments>
@@ -617,9 +687,12 @@ async function determineStyle(
   ];
 
   if (
-    [Preset.ReactMonorepo, Preset.ReactStandalone, Preset.NextJs].includes(
+    [
-      preset
+      Preset.ReactMonorepo,
-    )
+      Preset.ReactStandalone,
+      Preset.NextJs,
+      Preset.NextJsStandalone,
+    ].includes(preset)
   ) {
     choices.push(
       {

packages/create-nx-workspace/src/utils/preset/point-to-tutorial-and-course.ts

@@ -31,6 +31,7 @@ export function pointToTutorialAndCourse(preset: Preset) {
       break;
     case Preset.ReactMonorepo:
     case Preset.NextJs:
+    case Preset.NextJsStandalone:
       output.addVerticalSeparator();
       output.note({
         title,

packages/create-nx-workspace/src/utils/preset/preset.ts

@@ -9,6 +9,7 @@ export enum Preset {
   AngularStandalone = 'angular-standalone',
   ReactMonorepo = 'react-monorepo',
   ReactStandalone = 'react-standalone',
+  NextJsStandalone = 'nextjs-standalone',
   ReactNative = 'react-native',
   Expo = 'expo',
   NextJs = 'next',

packages/next/src/generators/application/files/app/page.tsx__tmpl__

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

packages/next/src/generators/application/files/common/tsconfig.json__tmpl__

@@ -11,7 +11,8 @@
     "noEmit": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "incremental": true
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
   "exclude": ["node_modules", "jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]

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

@@ -15,7 +15,7 @@ export async function addCypress(host: Tree, options: NormalizedSchema) {
   return cypressProjectGenerator(host, {
     ...options,
     linter: Linter.EsLint,
-    name: `${options.name}-e2e`,
+    name: options.e2eProjectName,
     directory: options.directory,
     project: options.projectName,
     skipFormat: true,

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

@@ -1,5 +1,12 @@
 import { join } from 'path';
-import { generateFiles, names, toJS, Tree } from '@nx/devkit';
+import {
+  generateFiles,
+  names,
+  readJson,
+  toJS,
+  Tree,
+  updateJson,
+} from '@nx/devkit';
 import { getRelativePathToRootTsConfig } from '@nx/js';
 
 import { NormalizedSchema } from './normalize-options';
@@ -12,6 +19,7 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   const templateVariables = {
     ...names(options.name),
     ...options,
+    dot: '.',
     tmpl: '',
     rootTsConfigPath: getRelativePathToRootTsConfig(
       host,
@@ -49,6 +57,38 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
     );
   }
 
+  if (options.rootProject) {
+    updateJson(host, 'tsconfig.base.json', (json) => {
+      const appJSON = readJson(host, 'tsconfig.json');
+
+      let { extends: _, ...updatedJson } = json;
+
+      updatedJson = {
+        ...updateJson,
+        compilerOptions: {
+          ...updatedJson.compilerOptions,
+          ...appJSON.compilerOptions,
+        },
+        include: [
+          ...new Set([
+            ...(updatedJson.include || []),
+            ...(appJSON.include || []),
+          ]),
+        ],
+        exclude: [
+          ...new Set([
+            ...(updatedJson.exclude || []),
+            ...(appJSON.exclude || []),
+            '**e2e/**/*',
+          ]),
+        ],
+      };
+      return updatedJson;
+    });
+    host.delete('tsconfig.json');
+    host.rename('tsconfig.base.json', 'tsconfig.json');
+  }
+
   if (options.unitTestRunner === 'none') {
     host.delete(`${options.appProjectRoot}/specs/${options.fileName}.spec.tsx`);
   }
@@ -60,9 +100,13 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
   }
 
   if (options.styledModule) {
-    host.delete(
+    if (options.appDir) {
-      `${options.appProjectRoot}/pages/${options.fileName}.module.${options.style}`
+      host.delete(`${options.appProjectRoot}/app/page.module.${options.style}`);
-    );
+    } else {
+      host.delete(
+        `${options.appProjectRoot}/pages/${options.fileName}.module.${options.style}`
+      );
+    }
   }
 
   if (options.style !== 'styled-components') {

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

@@ -36,10 +36,15 @@ export function normalizeOptions(
   const appsDir = layoutDirectory ?? getWorkspaceLayout(host).appsDir;
 
   const appProjectName = appDirectory.replace(new RegExp('/', 'g'), '-');
-  const e2eProjectName = `${appProjectName}-e2e`;
+  const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
 
-  const appProjectRoot = joinPathFragments(appsDir, appDirectory);
+  const appProjectRoot = options.rootProject
-  const e2eProjectRoot = joinPathFragments(appsDir, `${appDirectory}-e2e`);
+    ? '.'
+    : joinPathFragments(appsDir, appDirectory);
+
+  const e2eProjectRoot = options.rootProject
+    ? '.'
+    : joinPathFragments(appsDir, `${appDirectory}-e2e`);
 
   const parsedTags = options.tags
     ? options.tags.split(',').map((s) => s.trim())

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

@@ -16,4 +16,5 @@ export interface Schema {
   customServer?: boolean;
   skipPackageJson?: boolean;
   appDir?: boolean;
+  rootProject?: boolean;
 }

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

@@ -124,6 +124,13 @@
       "default": false,
       "description": "Enable experimental app directory for the project",
       "x-prompt": "Do you want to use experimental app/ in this project?"
+    },
+    "rootProject": {
+      "description": "Create an application at the root of the workspace.",
+      "type": "boolean",
+      "default": false,
+      "hidden": true,
+      "x-priority": "internal"
     }
   },
   "required": [],

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

@@ -65,6 +65,7 @@ export async function nextInitGenerator(host: Tree, schema: InitSchema) {
   const reactTask = await reactInitGenerator(host, {
     ...schema,
     skipFormat: true,
+    skipBabelConfig: true,
   });
   tasks.push(reactTask);
 

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

@@ -4,4 +4,5 @@ export interface InitSchema {
   skipFormat?: boolean;
   js?: boolean;
   skipPackageJson?: boolean;
+  rootProject?: boolean;
 }

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

@@ -33,6 +33,13 @@
       "default": false,
       "description": "Do not add dependencies to `package.json`.",
       "x-priority": "internal"
+    },
+    "rootProject": {
+      "description": "Create an application at the root of the workspace.",
+      "type": "boolean",
+      "default": false,
+      "hidden": true,
+      "x-priority": "internal"
     }
   },
   "required": []

packages/workspace/src/generators/new/__snapshots__/generate-workspace-files.spec.ts.snap

@@ -230,6 +230,31 @@ Visit the [Nx Documentation](https://nx.dev) to learn more.
 "
 `;
 
+exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for NextJsStandalone preset 1`] = `
+"# Proj
+
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+
+✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+
+## Development server
+
+Run \`nx serve app1\` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
+
+## Understand this workspace
+
+Run \`nx graph\` to see a diagram of the dependencies of the projects.
+
+## Remote caching
+
+Run \`npx nx connect-to-nx-cloud\` to enable [remote caching](https://nx.app) and make CI faster.
+
+## Further help
+
+Visit the [Nx Documentation](https://nx.dev) to learn more.
+"
+`;
+
 exports[`@nx/workspace:generateWorkspaceFiles README.md should be created for NodeStandalone preset 1`] = `
 "# Proj
 

packages/workspace/src/generators/new/generate-preset.ts

@@ -77,6 +77,7 @@ export function generatePreset(host: Tree, opts: NormalizedSchema) {
       opts.bundler ? `--bundler=${opts.bundler}` : null,
       opts.framework ? `--framework=${opts.framework}` : null,
       opts.docker ? `--docker=${opts.docker}` : null,
+      opts.nextAppDir ? `--nextAppDir=${opts.nextAppDir}` : null,
       opts.packageManager ? `--packageManager=${opts.packageManager}` : null,
       opts.standaloneApi !== undefined
         ? `--standaloneApi=${opts.standaloneApi}`
@@ -116,6 +117,7 @@ function getPresetDependencies({
       };
 
     case Preset.NextJs:
+    case Preset.NextJsStandalone:
       return { dependencies: { '@nx/next': nxVersion }, dev: {} };
 
     case Preset.ReactMonorepo:

packages/workspace/src/generators/new/generate-workspace-files.spec.ts

@@ -41,6 +41,7 @@ describe('@nx/workspace:generateWorkspaceFiles', () => {
             Preset.WebComponents,
             Preset.Express,
             Preset.NodeStandalone,
+            Preset.NextJsStandalone,
           ].includes(Preset[preset])
         ) {
           appName = 'app1';

packages/workspace/src/generators/new/generate-workspace-files.ts

@@ -67,6 +67,7 @@ function createAppsAndLibsFolders(tree: Tree, options: NormalizedSchema) {
     options.preset === Preset.AngularStandalone ||
     options.preset === Preset.ReactStandalone ||
     options.preset === Preset.NodeStandalone ||
+    options.preset === Preset.NextJsStandalone ||
     options.isCustomPreset
   ) {
     // don't generate any folders
@@ -126,7 +127,8 @@ function createFiles(tree: Tree, options: NormalizedSchema) {
   const filesDirName =
     options.preset === Preset.AngularStandalone ||
     options.preset === Preset.ReactStandalone ||
-    options.preset === Preset.NodeStandalone
+    options.preset === Preset.NodeStandalone ||
+    options.preset === Preset.NextJsStandalone
       ? './files-root-app'
       : options.preset === Preset.NPM || options.preset === Preset.Core
       ? './files-package-based-repo'
@@ -177,7 +179,8 @@ function addNpmScripts(tree: Tree, options: NormalizedSchema) {
   if (
     options.preset === Preset.AngularStandalone ||
     options.preset === Preset.ReactStandalone ||
-    options.preset === Preset.NodeStandalone
+    options.preset === Preset.NodeStandalone ||
+    options.preset === Preset.NextJsStandalone
   ) {
     updateJson(tree, join(options.directory, 'package.json'), (json) => {
       Object.assign(json.scripts, {

packages/workspace/src/generators/new/new.ts

@@ -24,6 +24,7 @@ interface Schema {
   defaultBase: string;
   framework?: string;
   docker?: boolean;
+  nextAppDir?: boolean;
   linter?: Linter;
   bundler?: 'vite' | 'webpack';
   standaloneApi?: boolean;

packages/workspace/src/generators/new/schema.json

@@ -71,6 +71,11 @@
       "description": "The framework which the application is using",
       "type": "string",
       "enum": ["express", "koa", "fastify", "nest", "none"]
+    },
+    "nextAppDir": {
+      "description": "Enable experimental app directory for the project",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": true

packages/workspace/src/generators/preset/preset.ts

@@ -79,6 +79,16 @@ async function createPreset(tree: Tree, options: Schema) {
       style: options.style,
       linter: options.linter,
     });
+  } else if (options.preset === Preset.NextJsStandalone) {
+    const { applicationGenerator: nextApplicationGenerator } = require('@nx' +
+      '/next');
+    return nextApplicationGenerator(tree, {
+      name: options.name,
+      style: options.style,
+      linter: options.linter,
+      appDir: options.nextAppDir,
+      rootProject: true,
+    });
   } else if (options.preset === Preset.WebComponents) {
     const { applicationGenerator: webApplicationGenerator } = require('@nx' +
       '/web');

packages/workspace/src/generators/preset/schema.d.ts

@@ -12,6 +12,7 @@ export interface Schema {
   packageManager?: PackageManager;
   bundler?: 'vite' | 'webpack' | 'rspack';
   docker?: boolean;
+  nextAppDir?: boolean;
   routing?: boolean;
   standaloneApi?: boolean;
 }

packages/workspace/src/generators/preset/schema.json

@@ -83,6 +83,11 @@
       "description": "Generate a Dockerfile",
       "type": "boolean",
       "default": false
+    },
+    "nextAppDir": {
+      "description": "Enable experimental app/ for the project",
+      "type": "boolean",
+      "default": false
     }
   }
 }

packages/workspace/src/generators/utils/presets.ts

@@ -9,6 +9,7 @@ export enum Preset {
   AngularStandalone = 'angular-standalone',
   ReactMonorepo = 'react-monorepo',
   ReactStandalone = 'react-standalone',
+  NextJsStandalone = 'nextjs-standalone',
   ReactNative = 'react-native',
   Expo = 'expo',
   NextJs = 'next',