@nx/next 0.0.0-pr-22179-271588f

package/src/generators/application/files/common/next.config.js__tmpl__

@@ -0,0 +1,82 @@
+//@ts-check
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { composePlugins, withNx } = require('@nx/next');
+
+<% if (style === 'less') { %>
+// This plugin is needed until this PR is merged.
+// https://github.com/vercel/next.js/pull/23185
+const { withLess } = require('@nx/next/plugins/with-less');
+
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withLess,
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
+<% } else if (
+  style === 'styled-components'
+  ||style === '@emotion/styled'
+  || style === 'styled-jsx'
+  || style === 'none'
+) { %>
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+  <% if (style === 'styled-components') { %>
+  compiler: {
+    // For other options, see https://styled-components.com/docs/tooling#babel-plugin
+    styledComponents: true,
+  },
+  <% } else if (style === '@emotion/styled') { %>
+  compiler: {
+    // For other options, see https://nextjs.org/docs/architecture/nextjs-compiler#emotion
+    emotion: true,
+  },
+  <% } %>
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
+<% } else {
+// Defaults to CSS/SASS (which don't need plugin as of Next 9.3) %>
+/**
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
+ **/
+const nextConfig = {
+  nx: {
+    // Set this to true if you would like to use SVGR
+    // See: https://github.com/gregberge/svgr
+    svgr: false,
+  },
+};
+
+const plugins = [
+  // Add more Next.js plugins to this list if needed.
+  withNx,
+];
+
+module.exports = composePlugins(...plugins)(nextConfig);
+<% } %>

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

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

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

@@ -0,0 +1,29 @@
+{
+  "extends": "<%= rootTsConfigPath %>",
+  "compilerOptions": {
+    "jsx": "preserve",
+    <% if (style === '@emotion/styled') { %>"jsxImportSource": "@emotion/react",<% } %>
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": [
+    "<%= rootPath %>**/*.ts",
+    "<%= rootPath %>**/*.tsx",
+    "<%= rootPath %>**/*.js",
+    "<%= rootPath %>**/*.jsx",
+    <% if (appDir) { %>
+      "<%= layoutTypeSrcPath %>",
+      "<%= layoutTypeDistPath %>",
+    <% } %>
+    "next-env.d.ts"
+  ],
+  "exclude": ["node_modules", "jest.config.ts", "<%= rootPath %>**/*.spec.ts", "<%= rootPath %>**/*.test.ts"]
+}

package/src/generators/application/files/pages/__fileName__.module.__style__

@@ -0,0 +1 @@
+<%- pageStyleContent %>

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

@@ -0,0 +1,30 @@
+<% if (style !== 'none') { %>
+  <% if (styledModule && styledModule !== 'styled-jsx') {
+    var wrapper = 'StyledPage';
+  %>import styled from '<%= styledModule %>';<% } else {
+    var wrapper = 'div';
+  %>
+    <%- style !== 'styled-jsx' ? `import styles from './${fileName}.module.${style}';` : '' %>
+  <% }
+  %>
+
+  <% if (styledModule && styledModule !== 'styled-jsx') { %>
+  const StyledPage = styled.div`<%- pageStyleContent %>`;
+  <% }%>
+<% } %>
+
+export function Index() {
+  /*
+   * Replace the elements below with your own.
+   *
+   * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
+   */
+  return (
+    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+      <%- styledModule === 'styled-jsx' && style !== 'none' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
+      <%- appContent %>
+    </<%= wrapper %>>
+  );
+}
+
+export default Index;

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

@@ -0,0 +1,18 @@
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import './styles.<%= stylesExt %>';
+
+function CustomApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>Welcome to <%= name %>!</title>
+      </Head>
+      <main className="app">
+        <Component {...pageProps}/>
+      </main>
+    </>
+  );
+};
+
+export default CustomApp;

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

@@ -0,0 +1,33 @@
+/* eslint-disable react/display-name */
+import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class CustomDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
+   const originalRenderPage = ctx.renderPage;
+
+   const sheet = new ServerStyleSheet();
+
+   ctx.renderPage = () => originalRenderPage({
+    enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+    enhanceComponent: (Component) => Component,
+   });
+
+   const intialProps = await Document.getInitialProps(ctx);
+   const styles = sheet.getStyleElement();
+
+   return {...intialProps, styles };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>{this.props.styles}</Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

package/src/generators/application/files/pages/styles.__stylesExt____tmpl__

@@ -0,0 +1 @@
+<%- styleContent %>

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

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function addE2e(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addE2e = void 0;
+const devkit_1 = require("@nx/devkit");
+const eslint_1 = require("@nx/eslint");
+const versions_1 = require("../../../utils/versions");
+const web_1 = require("@nx/web");
+async function addE2e(host, options) {
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/next/plugin'
+        : p.plugin === '@nx/next/plugin');
+    if (options.e2eTestRunner === 'cypress') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+        if (!hasPlugin) {
+            (0, web_1.webStaticServeGenerator)(host, {
+                buildTarget: `${options.projectName}:build`,
+                outputPath: `${options.outputPath}/out`,
+                targetName: 'serve-static',
+            });
+        }
+        (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            tags: [],
+            implicitDependencies: [options.projectName],
+        });
+        return configurationGenerator(host, {
+            ...options,
+            linter: eslint_1.Linter.EsLint,
+            project: options.e2eProjectName,
+            directory: 'src',
+            skipFormat: true,
+            devServerTarget: `${options.projectName}:${hasPlugin ? 'start' : 'serve'}`,
+            baseUrl: `http://localhost:${hasPlugin ? '3000' : '4200'}`,
+            jsx: true,
+            webServerCommands: hasPlugin
+                ? {
+                    default: `nx run ${options.projectName}:start`,
+                }
+                : undefined,
+            ciWebServerCommand: hasPlugin
+                ? `nx run ${options.projectName}:serve-static`
+                : undefined,
+        });
+    }
+    else if (options.e2eTestRunner === 'playwright') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
+        (0, devkit_1.addProjectConfiguration)(host, options.e2eProjectName, {
+            root: options.e2eProjectRoot,
+            sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+            targets: {},
+            implicitDependencies: [options.projectName],
+        });
+        return configurationGenerator(host, {
+            rootProject: options.rootProject,
+            project: options.e2eProjectName,
+            skipFormat: true,
+            skipPackageJson: options.skipPackageJson,
+            directory: 'src',
+            js: false,
+            linter: options.linter,
+            setParserOptionsProject: options.setParserOptionsProject,
+            webServerAddress: `http://127.0.0.1:${hasPlugin ? '3000' : '4200'}`,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${hasPlugin ? 'start' : 'serve'} ${options.projectName}`,
+            addPlugin: options.addPlugin,
+        });
+    }
+    return () => { };
+}
+exports.addE2e = addE2e;

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

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function addJest(host: Tree, options: NormalizedSchema): Promise<import("@nx/devkit").GeneratorCallback>;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addJest = void 0;
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../../utils/versions");
+async function addJest(host, options) {
+    if (options.unitTestRunner !== 'jest') {
+        return () => { };
+    }
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
+    const jestTask = await configurationGenerator(host, {
+        ...options,
+        project: options.projectName,
+        supportTsx: true,
+        skipSerializers: true,
+        setupFile: 'none',
+        compiler: 'babel',
+        skipFormat: true,
+    });
+    const tsConfigSpecJson = (0, devkit_1.readJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.spec.json'));
+    (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'), (json) => {
+        json.compilerOptions ??= {};
+        json.compilerOptions.types ??= [];
+        json.compilerOptions.types.push(...(tsConfigSpecJson?.compilerOptions?.types ?? []));
+        return json;
+    });
+    (0, devkit_1.updateJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.spec.json'), (json) => {
+        json.compilerOptions.jsx = 'react';
+        // have to override exclude otherwise lint will fail with setParserOptionsProject and jest.config.ts
+        if (options.setParserOptionsProject) {
+            const tsConfig = (0, devkit_1.readJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.json'));
+            json.exclude = tsConfig.exclude.filter((e) => e !== 'jest.config.ts');
+        }
+        return json;
+    });
+    return jestTask;
+}
+exports.addJest = addJest;

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

@@ -0,0 +1,3 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function addLinting(host: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLinting = void 0;
+const eslint_1 = require("@nx/eslint");
+const devkit_1 = require("@nx/devkit");
+const lint_1 = require("@nx/react/src/utils/lint");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const versions_1 = require("../../../utils/versions");
+async function addLinting(host, options) {
+    const tasks = [];
+    tasks.push(await (0, eslint_1.lintProjectGenerator)(host, {
+        linter: options.linter,
+        project: options.projectName,
+        tsConfigPaths: [
+            (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+        ],
+        unitTestRunner: options.unitTestRunner,
+        skipFormat: true,
+        rootProject: options.rootProject,
+        setParserOptionsProject: options.setParserOptionsProject,
+        addPlugin: options.addPlugin,
+    }));
+    if (options.linter === eslint_1.Linter.EsLint && (0, eslint_file_1.isEslintConfigSupported)(host)) {
+        (0, eslint_file_1.addExtendsToLintConfig)(host, options.appProjectRoot, [
+            'plugin:@nx/react-typescript',
+            'next',
+            'next/core-web-vitals',
+        ]);
+        (0, eslint_file_1.updateOverrideInLintConfig)(host, options.appProjectRoot, (o) => Array.isArray(o.files) &&
+            o.files.some((f) => f.match(/\*\.ts$/)) &&
+            o.files.some((f) => f.match(/\*\.tsx$/)) &&
+            o.files.some((f) => f.match(/\*\.js$/)) &&
+            o.files.some((f) => f.match(/\*\.jsx$/)), (o) => ({
+            ...o,
+            rules: {
+                ...o.rules,
+                '@next/next/no-html-link-for-pages': [
+                    'error',
+                    `${options.appProjectRoot}/pages`,
+                ],
+            },
+        }));
+        // add jest specific config
+        if (options.unitTestRunner === 'jest') {
+            (0, eslint_file_1.addOverrideToLintConfig)(host, options.appProjectRoot, {
+                files: ['*.spec.ts', '*.spec.tsx', '*.spec.js', '*.spec.jsx'],
+                env: {
+                    jest: true,
+                },
+            });
+        }
+        (0, eslint_file_1.addIgnoresToLintConfig)(host, options.appProjectRoot, ['.next/**/*']);
+    }
+    if (!options.skipPackageJson) {
+        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, lint_1.extraEslintDependencies.dependencies, {
+            ...lint_1.extraEslintDependencies.devDependencies,
+            'eslint-config-next': versions_1.eslintConfigNextVersion,
+        }));
+    }
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.addLinting = addLinting;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { NormalizedSchema } from './normalize-options';
+import { Tree } from '@nx/devkit';
+export declare function addProject(host: Tree, options: NormalizedSchema): void;

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addProject = void 0;
+const devkit_1 = require("@nx/devkit");
+const add_build_target_defaults_1 = require("@nx/devkit/src/generators/add-build-target-defaults");
+function addProject(host, options) {
+    const targets = {};
+    // Check if plugin exists in nx.json and if it doesn't then we can continue
+    // with the default targets.
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const hasPlugin = nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/next/plugin'
+        : p.plugin === '@nx/next/plugin');
+    if (!hasPlugin) {
+        (0, add_build_target_defaults_1.addBuildTargetDefaults)(host, '@nx/next:build');
+        targets.build = {
+            executor: '@nx/next:build',
+            outputs: ['{options.outputPath}'],
+            defaultConfiguration: 'production',
+            options: {
+                outputPath: options.outputPath,
+            },
+            configurations: {
+                development: {
+                    outputPath: options.appProjectRoot,
+                },
+                production: {},
+            },
+        };
+        targets.serve = {
+            executor: '@nx/next:server',
+            defaultConfiguration: 'development',
+            options: {
+                buildTarget: `${options.projectName}:build`,
+                dev: true,
+            },
+            configurations: {
+                development: {
+                    buildTarget: `${options.projectName}:build:development`,
+                    dev: true,
+                },
+                production: {
+                    buildTarget: `${options.projectName}:build:production`,
+                    dev: false,
+                },
+            },
+        };
+        targets.export = {
+            executor: '@nx/next:export',
+            options: {
+                buildTarget: `${options.projectName}:build:production`,
+            },
+        };
+    }
+    const project = {
+        root: options.appProjectRoot,
+        sourceRoot: options.appProjectRoot,
+        projectType: 'application',
+        targets,
+        tags: options.parsedTags,
+    };
+    (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
+        ...project,
+    });
+}
+exports.addProject = addProject;

package/src/generators/application/lib/create-application-files.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from './normalize-options';
+export declare function createApplicationFiles(host: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/create-application-files.helpers.d.ts

@@ -0,0 +1,2 @@
+export declare function createAppJsx(name: string): string;
+export declare function createStyleRules(): string;