@nx/next 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2017-2024 Narwhal Technologies Inc.
+Copyright (c) 2017-2025 Narwhal Technologies Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -9,7 +9,7 @@
 
 [![CircleCI](https://circleci.com/gh/nrwl/nx.svg?style=svg)](https://circleci.com/gh/nrwl/nx)
 [![License](https://img.shields.io/npm/l/@nx/workspace.svg?style=flat-square)]()
-[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fworkspace.svg)](https://www.npmjs.com/@nx/workspace)
+[![NPM Version](https://badge.fury.io/js/nx.svg)](https://www.npmjs.com/package/nx)
 [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

package/executors.json

@@ -9,12 +9,6 @@
       "implementation": "./src/executors/server/server.impl",
       "schema": "./src/executors/server/schema.json",
       "description": "Serve a Next.js application."
-    },
-    "export": {
-      "implementation": "./src/executors/export/export.impl",
-      "schema": "./src/executors/export/schema.json",
-      "description": "Export a Next.js application. The exported application is located at `dist/$outputPath/exported`.",
-      "x-deprecated": "Use static exports in next.config.js instead. See: https://nextjs.org/docs/pages/building-your-application/deploying/static-exports."
     }
   }
 }

package/generators.json

@@ -17,12 +17,12 @@
       "description": "Create an application."
     },
     "page": {
-      "factory": "./src/generators/page/page#pageGeneratorInternal",
+      "factory": "./src/generators/page/page",
       "schema": "./src/generators/page/schema.json",
       "description": "Create a page."
     },
     "component": {
-      "factory": "./src/generators/component/component#componentGeneratorInternal",
+      "factory": "./src/generators/component/component",
       "schema": "./src/generators/component/schema.json",
       "description": "Create a component."
     },

package/migrations.json

@@ -1,76 +1,48 @@
 {
-  "generators": {
-    "update-16-0-0-add-nx-packages": {
-      "cli": "nx",
-      "version": "16.0.0-beta.1",
-      "description": "Replace @nrwl/next with @nx/next",
-      "implementation": "./src/migrations/update-16-0-0-add-nx-packages/update-16-0-0-add-nx-packages"
-    },
-    "update-16-3-0-remove-root-build-option": {
-      "cli": "nx",
-      "version": "16.3.0-beta.9",
-      "description": "Remove root build option from project configurations since it is not needed.",
-      "implementation": "./src/migrations/update-16-3-0/remove-root-build-option"
-    },
-    "update-16-4-0-update-next-dependency": {
-      "cli": "nx",
-      "version": "16.4.0-beta.3",
-      "description": "Update package.json moving @nx/next from dependency to devDependency",
-      "implementation": "./src/migrations/update-16-4-0/update-nx-next-dependency"
-    },
-    "update-17-2-7": {
-      "cli": "nx",
-      "version": "17.2.7",
-      "description": "Remove patched eslint rule for @next/next/no-html-link-for-pages",
-      "implementation": "./src/migrations/update-17-2-7/remove-eslint-rules-patch"
-    }
-  },
+  "generators": {},
   "packageJsonUpdates": {
-    "16.0.0": {
-      "version": "16.0.0-beta.0",
+    "19.0.3": {
+      "version": "19.0.3-beta.0",
       "packages": {
         "next": {
-          "version": "13.3.0",
+          "version": "14.2.3",
           "alwaysAddToPackageJson": false
-        }
-      }
-    },
-    "16.4.0-beta.4": {
-      "version": "16.4.0-beta.4",
-      "packages": {
-        "stylus": {
-          "version": "^0.59.0",
+        },
+        "eslint-config-next": {
+          "version": "14.2.3",
           "alwaysAddToPackageJson": false
         }
       }
     },
-    "17.3.1-beta.0": {
-      "version": "17.3.1-beta.0",
+    "20.7.1-beta.0": {
+      "version": "20.7.1-beta.0",
       "packages": {
-        "next": {
-          "version": "14.0.4",
+        "eslint-config-next": {
+          "version": "^15.2.4",
           "alwaysAddToPackageJson": false
         }
       }
     },
-    "18.0.4": {
-      "version": "18.0.4-beta.0",
+    "20.7.1-beta.0-next14": {
+      "version": "20.7.1-beta.0",
+      "requires": {
+        "next": "^14.0.0"
+      },
       "packages": {
-        "@swc-node/register": {
-          "version": "~1.8.0",
+        "next": {
+          "version": "~14.2.26",
           "alwaysAddToPackageJson": false
         }
       }
     },
-    "19.0.3": {
-      "version": "19.0.3-beta.0",
+    "20.7.1-beta.0-next15": {
+      "version": "20.7.1-beta.0",
+      "requires": {
+        "next": "^15.0.0"
+      },
       "packages": {
         "next": {
-          "version": "14.2.3",
-          "alwaysAddToPackageJson": false
-        },
-        "eslint-config-next": {
-          "version": "14.2.3",
+          "version": "~15.2.4",
           "alwaysAddToPackageJson": false
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/next",
-  "version": "0.0.0-pr-31222-862e973",
+  "version": "0.0.0-pr-31313-387cdca",
   "private": false,
   "description": "The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:\n\n\n- Scaffolding for creating, building, serving, linting, and testing Next.js applications.\n\n- Integration with building, serving, and exporting a Next.js application.\n\n- Integration with React libraries within the workspace. \n\nWhen using Next.js in Nx, you get the out-of-the-box support for TypeScript, Playwright, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.",
   "repository": {
@@ -35,27 +35,25 @@
     "next": ">=14.0.0"
   },
   "dependencies": {
-    "@nx/devkit": "0.0.0-pr-31222-862e973",
+    "@nx/devkit": "0.0.0-pr-31313-387cdca",
     "@babel/plugin-proposal-decorators": "^7.22.7",
-    "@svgr/webpack": "^8.0.1",
+    "@svgr/webpack": "^8.1.0",
     "copy-webpack-plugin": "^10.2.4",
     "file-loader": "^6.2.0",
     "ignore": "^5.0.4",
-    "picocolors": "^1.1.0",
     "semver": "^7.5.3",
     "tslib": "^2.3.0",
     "webpack-merge": "^5.8.0",
-    "@nx/js": "0.0.0-pr-31222-862e973",
-    "@nx/eslint": "0.0.0-pr-31222-862e973",
-    "@nx/react": "0.0.0-pr-31222-862e973",
-    "@nx/web": "0.0.0-pr-31222-862e973",
-    "@nx/webpack": "0.0.0-pr-31222-862e973",
-    "@phenomnomnominal/tsquery": "~5.0.1",
-    "@nrwl/next": "0.0.0-pr-31222-862e973"
+    "@nx/js": "0.0.0-pr-31313-387cdca",
+    "@nx/eslint": "0.0.0-pr-31313-387cdca",
+    "@nx/react": "0.0.0-pr-31313-387cdca",
+    "@nx/web": "0.0.0-pr-31313-387cdca",
+    "@nx/webpack": "0.0.0-pr-31313-387cdca",
+    "@phenomnomnominal/tsquery": "~5.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "type": "commonjs",
-  "types": "./index.d.ts"
+  "types": "./index.d.ts",
+  "type": "commonjs"
 }

package/plugin.d.ts

@@ -1 +1 @@
-export { createNodes, NextPluginOptions } from './src/plugins/plugin';
+export { createNodes, createNodesV2, NextPluginOptions, } from './src/plugins/plugin';

package/plugin.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNodes = void 0;
+exports.createNodesV2 = exports.createNodes = void 0;
 var plugin_1 = require("./src/plugins/plugin");
 Object.defineProperty(exports, "createNodes", { enumerable: true, get: function () { return plugin_1.createNodes; } });
+Object.defineProperty(exports, "createNodesV2", { enumerable: true, get: function () { return plugin_1.createNodesV2; } });

package/plugins/component-testing.js

@@ -7,6 +7,7 @@ const devkit_1 = require("@nx/devkit");
 const react_1 = require("@nx/react");
 const webpack_1 = require("@nx/webpack");
 const path_1 = require("path");
+const configuration_1 = require("nx/src/config/configuration");
 function nxComponentTestingPreset(pathToConfig, options) {
     if (global.NX_GRAPH_CREATION) {
         // this is only used by plugins, so we don't need the component testing
@@ -34,6 +35,8 @@ function nxComponentTestingPreset(pathToConfig, options) {
         const parsedBuildTarget = (0, devkit_1.parseTargetString)(buildTarget, {
             cwd: process.cwd(),
             root: devkit_1.workspaceRoot,
+            projectsConfigurations: (0, devkit_1.readProjectsConfigurationFromProjectGraph)(graph),
+            nxJsonConfiguration: (0, configuration_1.readNxJson)(devkit_1.workspaceRoot),
             isVerbose: false,
             projectName: ctProjectName,
             projectGraph: graph,
@@ -67,6 +70,7 @@ Able to find CT project, ${!!ctProjectConfig}.`);
         projectRoot: ctProjectConfig.root,
         sourceRoot: ctProjectConfig.sourceRoot,
         main: '',
+        useTsconfigPaths: undefined,
         fileReplacements: buildFileReplacements,
         assets: buildAssets,
         outputPath: buildOuputPath,

package/plugins/with-nx.d.ts

@@ -13,6 +13,10 @@ export interface SvgrOptions {
 }
 export interface WithNxOptions extends NextConfig {
     nx?: {
+        /**
+         * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
+         * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
+         * */
         svgr?: boolean | SvgrOptions;
         babelUpwardRootMode?: boolean;
         fileReplacements?: {

package/plugins/with-nx.js

@@ -43,7 +43,7 @@ function getNxContext(graph, target) {
         return getNxContext(graph, parseTargetString(targetOptions.devServerTarget, partialExecutorContext));
     }
     else if (targetOptions.buildTarget) {
-        // Executors such as @nx/next:server or @nx/next:export define the buildTarget option.
+        // Executors such as @nx/next:server define the buildTarget option.
         return getNxContext(graph, parseTargetString(targetOptions.buildTarget, partialExecutorContext));
     }
     // Default case, return info for current target.
@@ -231,32 +231,17 @@ function getNextConfig(nextConfig = {}, context = getWithNxContext()) {
              */
             // Default SVGR support to be on for projects.
             if (nx?.svgr !== false || typeof nx?.svgr === 'object') {
+                forNextVersion('>=15.0.0', () => {
+                    // Since Next.js 15, turbopack could be enabled by default.
+                    console.warn(`NX: Next.js SVGR support is deprecated. If used with turbopack, it may not work as expected and is not recommended. Please configure SVGR manually.`);
+                });
                 const defaultSvgrOptions = {
                     svgo: false,
                     titleProp: true,
                     ref: true,
                 };
                 const svgrOptions = typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
-                // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-                // It should be:
-                // use: [{
-                //   test: /\.svg$/i,
-                //   type: 'asset',
-                //   resourceQuery: /react/, // *.svg?react
-                // },
-                // {
-                //   test: /\.svg$/i,
-                //   issuer: /\.[jt]sx?$/,
-                //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-                //   use: ['@svgr/webpack'],
-                // }],
-                // See:
-                // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-                // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-                // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-                // Note: We also need a migration for any projects that are using SVGR to convert
-                //       `import { ReactComponent as X } from './x.svg` to
-                //       `import X from './x.svg?react';
+                // TODO(v22): Remove SVGR support
                 config.module.rules.push({
                     test: /\.svg$/,
                     issuer: { not: /\.(css|scss|sass)$/ },

package/src/executors/build/lib/create-next-config-file.js

@@ -94,7 +94,12 @@ function findNextConfigPath(dirname, userDefinedConfigPath) {
             return file;
         throw new Error(`Cannot find the Next.js config file: ${userDefinedConfigPath}. Is the path correct in project.json?`);
     }
-    const candidates = ['next.config.js', 'next.config.cjs', 'next.config.mjs'];
+    const candidates = [
+        'next.config.js',
+        'next.config.cjs',
+        'next.config.mjs',
+        'next.config.ts',
+    ];
     for (const candidate of candidates) {
         if ((0, node_fs_1.existsSync)((0, path_1.join)(dirname, candidate)))
             return candidate;
@@ -149,7 +154,7 @@ function stripOuterQuotes(str) {
 }
 // Exported for testing
 function ensureFileExtensions(files, absoluteDir) {
-    const extensions = ['.js', '.cjs', '.mjs', '.json'];
+    const extensions = ['.js', '.cjs', '.mjs', '.json', '.ts'];
     return files.map((file) => {
         const providedExt = (0, path_1.extname)(file);
         if (providedExt && extensions.includes(providedExt))

package/src/executors/server/schema.json

@@ -1,5 +1,6 @@
 {
   "version": 2,
+  "continuous": true,
   "outputCapture": "pipe",
   "cli": "nx",
   "title": "Next Serve",

package/src/executors/server/server.impl.d.ts

@@ -3,4 +3,4 @@ import { NextServeBuilderOptions } from '../../utils/types';
 export default function serveExecutor(options: NextServeBuilderOptions, context: ExecutorContext): AsyncGenerator<{
     success: boolean;
     baseUrl: string;
-}, void, undefined>;
+}, void, any>;

package/src/executors/server/server.impl.js

@@ -10,7 +10,7 @@ const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 async function* serveExecutor(options, context) {
     const buildOptions = (0, devkit_1.readTargetOptions)((0, devkit_1.parseTargetString)(options.buildTarget, context), context);
-    const projectRoot = context.workspace.projects[context.projectName].root;
+    const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     // This is required for the default custom server to work. See the @nx/next:app generator.
     const nextDir = !options.dev && (0, path_1.resolve)(context.root, buildOptions.outputPath);
     process.env.NX_NEXT_DIR ??= options.dev ? projectRoot : nextDir;

package/src/generators/application/application.js

@@ -4,8 +4,9 @@ exports.applicationGenerator = applicationGenerator;
 exports.applicationGeneratorInternal = applicationGeneratorInternal;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const react_1 = require("@nx/react");
+const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const versions_1 = require("@nx/react/src/utils/versions");
+const version_utils_1 = require("@nx/react/src/utils/version-utils");
 const normalize_options_1 = require("./lib/normalize-options");
 const add_e2e_1 = require("./lib/add-e2e");
 const add_jest_1 = require("./lib/add-jest");
@@ -21,10 +22,13 @@ const update_cypress_tsconfig_1 = require("./lib/update-cypress-tsconfig");
 const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const versions_2 = require("../../utils/versions");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const sort_fields_1 = require("@nx/js/src/utils/package-json/sort-fields");
+const add_swc_to_custom_server_1 = require("../../utils/add-swc-to-custom-server");
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
         addPlugin: false,
-        projectNameAndRootFormat: 'derived',
+        useProjectJson: true,
         ...schema,
     });
 }
@@ -36,6 +40,9 @@ async function applicationGeneratorInternal(host, schema) {
         js: options.js,
         skipPackageJson: options.skipPackageJson,
         skipFormat: true,
+        addTsPlugin: options.isTsSolutionSetup,
+        formatter: options.formatter,
+        platform: 'web',
     });
     tasks.push(jsInitTask);
     const nextTask = await (0, init_1.nextInitGenerator)(host, {
@@ -45,6 +52,11 @@ async function applicationGeneratorInternal(host, schema) {
     tasks.push(nextTask);
     (0, create_application_files_1.createApplicationFiles)(host, options);
     (0, add_project_1.addProject)(host, options);
+    // If we are using the new TS solution
+    // We need to update the workspace file (package.json or pnpm-workspaces.yaml) to include the new project
+    if (options.isTsSolutionSetup) {
+        await (0, ts_solution_setup_1.addProjectToTsSolutionWorkspace)(host, options.appProjectRoot);
+    }
     const e2eTask = await (0, add_e2e_1.addE2e)(host, options);
     tasks.push(e2eTask);
     const jestTask = await (0, add_jest_1.addJest)(host, options);
@@ -52,7 +64,7 @@ async function applicationGeneratorInternal(host, schema) {
     const lintTask = await (0, add_linting_1.addLinting)(host, options);
     tasks.push(lintTask);
     if (options.style === 'tailwind') {
-        const tailwindTask = await (0, react_1.setupTailwindGenerator)(host, {
+        const tailwindTask = await (0, setup_tailwind_1.setupTailwindGenerator)(host, {
             project: options.projectName,
         });
         tasks.push(tailwindTask);
@@ -65,6 +77,10 @@ async function applicationGeneratorInternal(host, schema) {
     (0, update_jest_config_1.updateJestConfig)(host, options);
     (0, update_cypress_tsconfig_1.updateCypressTsConfig)(host, options);
     (0, set_defaults_1.setDefaults)(host, options);
+    if (options.swc) {
+        const swcTask = (0, add_swc_to_custom_server_1.configureForSwc)(host, options.appProjectRoot);
+        tasks.push(swcTask);
+    }
     if (options.customServer) {
         await (0, custom_server_1.customServerGenerator)(host, {
             project: options.projectName,
@@ -72,15 +88,25 @@ async function applicationGeneratorInternal(host, schema) {
         });
     }
     if (!options.skipPackageJson) {
+        const reactVersions = await (0, version_utils_1.getReactDependenciesVersionsToInstall)(host);
         const devDependencies = {
-            '@types/react': versions_1.typesReactVersion,
-            '@types/react-dom': versions_1.typesReactDomVersion,
+            '@types/react': reactVersions['@types/react'],
+            '@types/react-dom': reactVersions['@types/react-dom'],
         };
-        if (schema.unitTestRunner && schema.unitTestRunner !== 'none') {
+        if (options.unitTestRunner && options.unitTestRunner !== 'none') {
             devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+            devDependencies['@testing-library/dom'] = versions_1.testingLibraryDomVersion;
         }
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, { tslib: versions_2.tsLibVersion }, devDependencies));
     }
+    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.appProjectRoot, 'tsconfig.json', {
+        jsx: 'preserve',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+    }, options.linter === 'eslint'
+        ? ['.next', 'eslint.config.js', 'eslint.config.cjs', 'eslint.config.mjs']
+        : ['.next'], options.src ? 'src' : '.');
+    (0, sort_fields_1.sortPackageJsonFields)(host, options.appProjectRoot);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/application/files/app/page.tsx__tmpl__

@@ -1,19 +1,16 @@
-<% if (style !== 'none') { %>
-  <% if (styledModule && (styledModule === 'styled-jsx' || styledModule === 'styled-components'))  {%>
-  'use client';
-  <% }%> 
-  <% if (styledModule && styledModule !== 'styled-jsx') {
-    var wrapper = 'StyledPage';
-  %>import styled from '<%= styledModule %>';<% } else {
-    var wrapper = 'div';
-  %>
-    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './page.module.${style}';` : '' %>
-  <% }
-  %>
+<%_ if (style !== 'none') { _%>
+  <%_ if (styledModule && (styledModule === 'styled-jsx' || styledModule === 'styled-components'))  { _%>
+'use client';
+  <%_ } _%> 
+  <%_ if (styledModule && styledModule !== 'styled-jsx') { var wrapper = 'StyledPage'; _%>
+import styled from '<%= styledModule %>';
+<%_ } else { var wrapper = 'div'; _%>
+<%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './page.module.${style}';` : '' %>
+  <%_ } _%>
 
-  <% if (styledModule && styledModule !== 'styled-jsx') { %>
-  const StyledPage = styled.div`<%- pageStyleContent %>`;
-  <% }%>
+  <%_ if (styledModule && styledModule !== 'styled-jsx') { _%>
+const StyledPage = styled.div`<%- pageStyleContent %>`;
+  <%_ } _%>
 <% } %>
 export default function Index() {
   /*

package/src/generators/application/files/common/next-env.d.ts__tmpl__

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/<%- appDirType %>/api-reference/config/typescript for more information.

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

@@ -12,11 +12,9 @@ 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,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
 };
 
 const plugins = [
@@ -36,11 +34,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @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,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
   <% if (style === 'styled-components') { %>
   compiler: {
     // For other options, see https://styled-components.com/docs/tooling#babel-plugin
@@ -66,11 +62,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @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,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
 };
 
 const plugins = [

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

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

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

@@ -3,16 +3,23 @@
   "compilerOptions": {
     "jsx": "preserve",
     <% if (style === '@emotion/styled') { %>"jsxImportSource": "@emotion/react",<% } %>
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "emitDeclarationOnly": false,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
     "incremental": true,
-    "plugins": [{ "name": "next" }]
+    "plugins": [{ "name": "next" }]<% if (isUsingTsSolutionSetup) { %>,
+    "paths": {
+      "@/*": [<% if (src) { %>"./src/*"<% } else { %>"./*"<% } %>]
+    }<% } %>
   },
   "include": [
     "<%= rootPath %>**/*.ts",

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

@@ -1,17 +1,14 @@
-<% if (style !== 'none') { %>
-  <% if (styledModule && styledModule !== 'styled-jsx') {
-    var wrapper = 'StyledPage';
-  %>import styled from '<%= styledModule %>';<% } else {
-    var wrapper = 'div';
-  %>
-    <%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './${fileName}.module.${style}';` : '' %>
-  <% }
-  %>
+<%_ if (style !== 'none') { _%>
+  <%_ if (styledModule && styledModule !== 'styled-jsx') { var wrapper = 'StyledPage'; _%>
+import styled from '<%= styledModule %>';
+  <% } else { var wrapper = 'div';%>
+<%- (style !== 'styled-jsx' && style !== 'tailwind') ? `import styles from './${fileName}.module.${style}';` : '' %>
+  <%_ } _%>
 
-  <% if (styledModule && styledModule !== 'styled-jsx') { %>
-  const StyledPage = styled.div`<%- pageStyleContent %>`;
-  <% }%>
-<% } %>
+  <%_ if (styledModule && styledModule !== 'styled-jsx') { _%>
+const StyledPage = styled.div`<%- pageStyleContent %>`;
+  <%_ } _%>
+<%_ } _%>
 
 export function Index() {
   /*