miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicholas Cunningham 2023-04-19 13:29:31 -06:00 committed by GitHub
parent 16e115fd7b
commit 338dc64d91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 278 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/generated/cli/create-nx-workspace.md
View File

@ -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

7
docs/generated/packages/next/generators/application.json
View File

@ -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": [],

7
docs/generated/packages/next/generators/init.json
View File

@ -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": [],

8
docs/generated/packages/nx/documents/create-nx-workspace.md
View File

@ -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

5
docs/generated/packages/workspace/generators/new.json
View File

@ -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,

5
docs/generated/packages/workspace/generators/preset.json
View File

@ -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": []

22
e2e/next/src/next.test.ts
View File

@ -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> {

87
packages/create-nx-workspace/bin/create-nx-workspace.ts
View File

@ -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);
@ -373,7 +385,7 @@ async function determineMonorepoStyle(): Promise<string> {
{
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',
@ -383,7 +395,7 @@ async function determineMonorepoStyle(): Promise<string> {
{
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(
{

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

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

1
packages/create-nx-workspace/src/utils/preset/preset.ts
View File

@ -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',

4
packages/next/src/generators/application/files/app/page.tsx__tmpl__
View File

@ -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.
*
@ -24,5 +24,3 @@ export async function Index() {
</<%= wrapper %>>
);
};
export default Index;

0
packages/next/src/generators/application/files/common/.babelrc__tmpl__ → packages/next/src/generators/application/files/common/__dot__babelrc
View File

3
packages/next/src/generators/application/files/common/tsconfig.json__tmpl__
View File

@ -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"]

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

@ -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,

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

@ -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,10 +100,14 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
}
if (options.styledModule) {
if (options.appDir) {
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') {
host.delete(`${options.appProjectRoot}/pages/_document.tsx`);

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

@ -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 e2eProjectRoot = joinPathFragments(appsDir, `${appDirectory}-e2e`);
const appProjectRoot = options.rootProject
? '.'
: joinPathFragments(appsDir, appDirectory);
const e2eProjectRoot = options.rootProject
? '.'
: joinPathFragments(appsDir, `${appDirectory}-e2e`);
const parsedTags = options.tags
? options.tags.split(',').map((s) => s.trim())

1
packages/next/src/generators/application/schema.d.ts vendored
View File

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

7
packages/next/src/generators/application/schema.json
View File

@ -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": [],

1
packages/next/src/generators/init/init.ts
View File

@ -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);

1
packages/next/src/generators/init/schema.d.ts vendored
View File

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

7
packages/next/src/generators/init/schema.json
View File

@ -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": []

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

@ -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

2
packages/workspace/src/generators/new/generate-preset.ts
View File

@ -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:

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

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

7
packages/workspace/src/generators/new/generate-workspace-files.ts
View File

@ -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, {

1
packages/workspace/src/generators/new/new.ts
View File

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

5
packages/workspace/src/generators/new/schema.json
View File

@ -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

10
packages/workspace/src/generators/preset/preset.ts
View File

@ -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');

1
packages/workspace/src/generators/preset/schema.d.ts vendored
View File

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

5
packages/workspace/src/generators/preset/schema.json
View File

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

1
packages/workspace/src/generators/utils/presets.ts
View File

@ -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',