fix(nx): misc next.js related fixes

This commit is contained in:
Victor Savkin 2019-09-08 15:08:06 -04:00
parent 87f4d45311
commit 3579c5a8b9
32 changed files with 363 additions and 109 deletions

View File

@ -1,5 +1,5 @@
# export
Export a Next.js app
Export a Next.js app. The exported application is located at dist/\$outputPath/exported.
Builder properties can be configured in angular.json when defining the builder, or when invoking it.

View File

@ -3,18 +3,19 @@
Here is the list of all the available packages inside the Nx ecosystem. You
can see, for each package its dependencies.
| PackageName | Dependencies | PeerDependencies |
| --------------- | --------------------------------------- | ---------------- |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/workspace | @nrwl/cli | |
| PackageName | Dependencies | PeerDependencies |
| --------------- | ------------------------------------------------- | ---------------- |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/workspace | @nrwl/cli | |
## Angular

View File

@ -53,6 +53,7 @@ npm install --save-dev @nrwl/react # Adds React capabilities
npm install --save-dev @nrwl/node # Adds Node capabilities
npm install --save-dev @nrwl/express # Adds Express capabilities
npm install --save-dev @nrwl/nest # Adds Nest capabilities
npm install --save-dev @nrwl/next # Adds Next.js capabilities
```
**Using `yarn`**
@ -64,6 +65,7 @@ yarn add --dev @nrwl/angular # Adds Angular capabilities
yarn add --dev @nrwl/node # Adds Node capabilities
yarn add --dev @nrwl/express # Adds Express capabilities
yarn add --dev @nrwl/nest # Adds Nest capabilities
yarn add --dev @nrwl/next # Adds Next.js capabilities
```
**Using `ng add`**
@ -75,6 +77,7 @@ ng add @nrwl/react # Adds React capabilities
ng add @nrwl/node # Adds Node capabilities
ng add @nrwl/express # Adds Express capabilities
ng add @nrwl/nest # Adds Nest capabilities
ng add @nrwl/next # Adds Next.js capabilities
```
## Creating an application

View File

@ -44,9 +44,7 @@ ng g @nrwl/react:app frontend
and you will see the following:
```treeview
myworkspace/
├── README.md
├── angular.json
happynrwl/
├── apps/
│   ├── frontend/
│   │   ├── src/
@ -79,6 +77,7 @@ myworkspace/
│   │   ├── tsconfig.e2e.json
│   │   └── tslint.json
├── libs/
├── angular.json
├── nx.json
├── package.json
├── tools/
@ -107,9 +106,7 @@ ng g @nrwl/react:lib home
and you will see the following:
```treeview
myworkspace/
├── README.md
├── angular.json
happynrwl/
├── apps/
│   ├── frontend/
│   └── frontend-e2e/
@ -127,6 +124,7 @@ myworkspace/
│   ├── tsconfig.spec.json
│   └── tslint.json
├── nx.json
├── angular.json
├── package.json
├── tools/
├── tsconfig.json
@ -144,7 +142,7 @@ You can import the home library into the frontend application like this.
```typescript jsx
import { Component } from 'react';
import { Home } from '@myworkspace/home';
import { Home } from '@happynrwl/home';
import './app.css';
@ -165,35 +163,3 @@ export class App extends Component {
Without Nx, creating a new shared library can take from several hours or even weeks: a new repo needs to be provisioned, CI needs to be set up, etc.. In an Nx Workspace, it only takes minutes.
You can share React components between multiple React applications. You can also share web components between React and Angular applications. You can even share code between the backend and the frontend. All can be done without any unnecessary ceremony.
## Understanding Your Nx Workspace
An Nx workspace can contain dozens (or hundreds) of applications and libraries. They all may depend on one another and without Nx, it is difficult to understand the implications of a particular change.
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1, and gets more and more out of sync with every passing day.
With Nx, you can do better than that. You can run `yarn dep-graph` to see a current dependency diagram of the workspace: what apps and libs are there, how they depend on each other, what is loaded lazily and what is not. Nx uses code analysis to collect this information.
![Monorepo Diagram](../fundamentals/monorepo-diagram.png)
It can also help you answer questions like "what apps will have to be redeployed if I change this file?"
![Monorepo Diagram Affected](../fundamentals/monorepo-diagram-affected.png)
Because Nx understands how our applications and libraries depend on each other, it can verify that a code change to a reusable library does not break any applications and libraries depending on it.
```bash
yarn affected:apps # prints the apps affected by a PR
yarn affected:build # reruns build for all the projects affected by a PR
yarn affected:test # reruns unit tests for all the projects affected by a PR
yarn affected:e2e # reruns e2e tests for all the projects affected by a PR
yarn affected --target=lint # reruns any target (for instance lint) for projects affected by a PR
```
Nx will topologically sort the projects, and will run what it can in parallel. The fact that Nx can use its dependency graph to rebuild and retest the minimal number of projects necessary is crucial. Without this the repo will not scale beyond a handful of projects.
You can read more about how Nx help you build like google [here](../fundamentals/monorepos-automation).

View File

@ -422,6 +422,10 @@
"name": "Nx CLI",
"id": "cli"
},
{
"name": "Next.js",
"id": "nextjs"
},
{
"name": "Updating Nx",
"id": "update",

View File

@ -1,6 +1,6 @@
# export
Export a Next.js app
Export a Next.js app. The exported application is located at dist/\$outputPath/exported.
Builder properties can be configured in workspace.json when defining the builder, or when invoking it.
Read more about how to use builders and the CLI here: https://nx.dev/react/guides/cli.

View File

@ -3,18 +3,19 @@
Here is the list of all the available packages inside the Nx ecosystem. You
can see, for each package its dependencies.
| PackageName | Dependencies | PeerDependencies |
| --------------- | --------------------------------------- | ---------------- |
| @nrwl/workspace | @nrwl/cli | |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
| PackageName | Dependencies | PeerDependencies |
| --------------- | ------------------------------------------------- | ---------------- |
| @nrwl/workspace | @nrwl/cli | |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
## React

View File

@ -27,10 +27,6 @@ To see how Nx delivers all of these, start with an empty Nx workspace:
├── workspace.json
├── nx.json
├── package.json
<<<<<<< HEAD
=======
├── tools/
>>>>>>> wip
└── tsconfig.json
```
@ -50,36 +46,43 @@ Nx can generate many different types of applications:
React Applications:
```bash
yarn add --dev @nrwl/react # Add React Capabilities to a workspace
nx g @nrwl/react:application myapp # Generate a React Application
yarn add --dev @nrwl/react # Add React capabilities to a workspace
nx g @nrwl/react:application myapp # Generate a React application
```
Applications built out of Web Components:
```bash
yarn add --dev @nrwl/web # Add Web Capabilities to a workspace
nx g @nrwl/web:application myapp # Generate a Web Application
yarn add --dev @nrwl/web # Add Web capabilities to a workspace
nx g @nrwl/web:application myapp # Generate a Web application
```
Angular Applications:
```bash
yarn add --dev @nrwl/angular # Add Angular Capabilities to a workspace
nx g @nrwl/angular:application myapp # Generate an Angular Application
yarn add --dev @nrwl/angular # Add Angular capabilities to a workspace
nx g @nrwl/angular:application myapp # Generate an Angular application
```
NestJS Applications:
```bash
yarn add --dev @nrwl/nest # Add Nest Capabilities to a workspace
nx g @nrwl/nest:application myapp # Generate a Nest Application
yarn add --dev @nrwl/nest # Add Nest capabilities to a workspace
nx g @nrwl/nest:application myapp # Generate a Nest application
```
Express Applications:
```bash
yarn add --dev @nrwl/express # Add Express Capabilities to a workspace
nx g @nrwl/express:application myapp # Generate an Express Application
yarn add --dev @nrwl/express # Add Express capabilities to a workspace
nx g @nrwl/express:application myapp # Generate an Express application
```
Next.js Applications:
```bash
yarn add --dev @nrwl/next # Add Next.js capabilities to a workspace
nx g @nrwl/next:application myapp # Generate an Next.js application
```
And even more!

View File

@ -4,6 +4,31 @@ Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow.
Of course, it's not the case that Cypress is always better than Protractor or Nest is always better than say Express. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages.
## Next.js
Next.js is a React framework designed for building server-prerendered applications.
Add the Nex.js capability to your workspace:
```bash
yarn add --dev @nrwl/next
```
To create the new Next.js application:
```bash
nx g @nrwl/next:application tasks
```
You can run:
- `nx serve tasks` to serve the application
- `nx build tasks` to build the application
- `nx test tasks` to test the application
- `nx e2e tasks-e2e` to run e2e tests for the application
Read more about Next.js at [nextjs.org](https://nextjs.org).
## Nest
![NestJS logo](/shared/nest-logo.png)

View File

@ -50,11 +50,12 @@ yarn add --dev @nrwl/react
### Additional Capabilities
Nx also provides capabilities for other platforms, and libraries such as Node, Express, and Nest.
Nx also provides capabilities for other platforms, and libraries such as Node, Next.js, Express, and Nest.
To add the additional capabilities:
```bash
npm install --save-dev @nrwl/next
npm install --save-dev @nrwl/node
npm install --save-dev @nrwl/express
npm install --save-dev @nrwl/nest
@ -63,6 +64,7 @@ npm install --save-dev @nrwl/nest
**Using `yarn`**
```bash
yarn add --dev @nrwl/next
yarn add --dev @nrwl/node
yarn add --dev @nrwl/express
yarn add --dev @nrwl/nest
@ -76,6 +78,8 @@ After the capabilities are added, you create your first application using the fo
nx generate @nrwl/react:application myapp
```
> Nx has first-class Next.js support. Read more about it [here](https://nx.dev/react/guides/nextjs).
The following files and folders are generated in the new application:
```treeview

144
docs/react/guides/nextjs.md Normal file
View File

@ -0,0 +1,144 @@
# Next.js
Nx comes with first-class Next.js support. In this guide we will look at how to use it.
## Creating a New Nx Workspace
Create a new Nx workspace. The easiest way to do it is to use npx.
```bash
npx --ignore-existing create-nx-workspace happynrwl
```
You can also create a workspace with a Next.js application in place by running:
```bash
npx --ignore-existing create-nx-workspace happynrwl --preset=next
```
## Adding Next.js capabilities to a workspace
If you used the Next.js preset, you are all set and can skip this. If you created an empty workspace or have an existing workspace, you can add Next.js capabilities to the workspace:
```bash
yarn add --dev @nrwl/next
```
## Generating a Next.js Application
Run
```bash
nx g @nrwl/next:app tuskdesk
```
and you will see the following:
```treeview
happynrwl/
├── apps/
│   ├── tuskdesk/
│   │   ├── pages/
│   │   │   ├── index.css
│   │   │   └── index.tsx
│   │   ├── jest.conf.js
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
│   │   └── .eslintrc
│   └── tuskdesk-e2e/
│   │   ├── src/
│   │   │   ├── integrations/
│   │   │   │   └── app.spec.ts
│   │   │   ├── fixutres/
│   │   │   ├── plugins/
│   │   │   └── support/
│   │   ├── cypress.json
│   │   ├── tsconfig.e2e.json
│   │   └── .eslintrc
├── libs/
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── .eslintrc
```
Run:
- `nx serve tuskdesk` to serve the application
- `nx serve tuskdesk --prod` to serve the application in the production mode
- `nx build tuskdesk` to build the application
- `nx lint tuskdesk` to lint the application
- `nx test tuskdesk` to test the application using Jest
- `nx export tuskdesk` to export the application
- `nx e2e tuskdesk-e2e` to test the application using Cypress
When using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, Jest. No need to configure anything: watch mode, source maps, and typings just work.
## Generating a React Library
Run
```bash
nx g @nrwl/react:lib shared-components
```
and you will see the following:
```treeview
happynrwl/
├── apps/
│   ├── tuskdesk/
│   └── tuskdesk-e2e/
├── libs/
│   └── shared-components/
│   ├── src/
│   │ ├── lib/
│   │ │ ├── home.css
│   │ │ ├── home.tsx
│   │ │ └── home.spec.tsx
│   │ └ index.ts
│   ├── jest.config.js
│   ├── tsconfig.json
│   ├── tsconfig.lib.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── nx.json
├── workspace.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json
```
Run:
- `nx test shared-components` to test the library
- `nx lint shared-components` to lint the library
## Using the Library in an Application
You can import the shared-components library into the Next.js application like this.
```typescript jsx
import { Home } from '@happynrwl/shared-components';
import React from 'react';
export const Index = () => {
return (
<>
<Home />
<div>the rest of the component</div>
</>
);
};
export default Index;
```
## Sharing Code
Without Nx, creating a new shared library can take from several hours or even weeks: a new repo needs to be provisioned, CI needs to be set up, etc.. In an Nx Workspace, it only takes minutes.
You can share React components between multiple Next.js applications. You can also share web components between Next.js and plain React applications. You can even share code between the backend and the frontend. All can be done without any unnecessary ceremony.

View File

@ -2,6 +2,8 @@
In this tutorial you will use Nx to build a full-stack application out of common libraries using modern technologies.
> Next.js: Nx also has first-class Next.js support. Read more about it [here](https://nx.dev/react/guides/next.js).
## Create a New Workspace
**Start by creating a new workspace.**

View File

@ -1,6 +1,6 @@
# export
Export a Next.js app
Export a Next.js app. The exported application is located at dist/\$outputPath/exported.
Builder properties can be configured in workspace.json when defining the builder, or when invoking it.
Read more about how to use builders and the CLI here: https://nx.dev/web/guides/cli.

View File

@ -3,18 +3,19 @@
Here is the list of all the available packages inside the Nx ecosystem. You
can see, for each package its dependencies.
| PackageName | Dependencies | PeerDependencies |
| --------------- | --------------------------------------- | ---------------- |
| @nrwl/workspace | @nrwl/cli | |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
| PackageName | Dependencies | PeerDependencies |
| --------------- | ------------------------------------------------- | ---------------- |
| @nrwl/workspace | @nrwl/cli | |
| @nrwl/web | @nrwl/cypress, @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/react | @nrwl/cypress, @nrwl/jest, @nrwl/web | @nrwl/workspace |
| @nrwl/next | @nrwl/cypress, @nrwl/jest, @nrwl/web, @nrwl/react | @nrwl/workspace |
| @nrwl/angular | @nrwl/cypress, @nrwl/jest | @nrwl/workspace |
| @nrwl/cypress | | @nrwl/workspace |
| @nrwl/jest | | @nrwl/workspace |
| @nrwl/node | @nrwl/jest, @nrwl/linter | @nrwl/workspace |
| @nrwl/express | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/nest | @nrwl/node, @nrwl/jest | @nrwl/workspace |
| @nrwl/linter | | @nrwl/workspace |
## Web

View File

@ -78,6 +78,13 @@ yarn add --dev @nrwl/express # Add Express Capabilities to a workspace
nx g @nrwl/express:application myapp # Generate an Express Application
```
Next.js Applications:
```bash
yarn add --dev @nrwl/next # Add Next.js capabilities to a workspace
nx g @nrwl/next:application myapp # Generate an Next.js application
```
And even more!
Creating a new application will result in something like this:

View File

@ -4,6 +4,31 @@ Using Nx, you can add Cypress, Jest, Prettier, and Nest into your dev workflow.
Of course, it's not the case that Cypress is always better than Protractor or Nest is always better than say Express. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages.
## Next.js
Next.js is a React framework designed for building server-prerendered applications.
Add the Nex.js capability to your workspace:
```bash
yarn add --dev @nrwl/next
```
To create the new Next.js application:
```bash
nx g @nrwl/next:application tasks
```
You can run:
- `nx serve tasks` to serve the application
- `nx build tasks` to build the application
- `nx test tasks` to test the application
- `nx e2e tasks-e2e` to run e2e tests for the application
Read more about Next.js at [nextjs.org](https://nextjs.org).
## Nest
![NestJS logo](/shared/nest-logo.png)

View File

@ -50,11 +50,12 @@ yarn add --dev @nrwl/web
### Additional Capabilities
Nx also provides capabilities for other platforms, and libraries such as Node, Express, and Nest.
Nx also provides capabilities for other platforms, and libraries such as Node, Next.js, Express, and Nest.
To add the additional capabilities:
```bash
npm install --save-dev @nrwl/next
npm install --save-dev @nrwl/node
npm install --save-dev @nrwl/express
npm install --save-dev @nrwl/nest
@ -63,6 +64,7 @@ npm install --save-dev @nrwl/nest
**Using `yarn`**
```bash
yarn add --dev @nrwl/next
yarn add --dev @nrwl/node
yarn add --dev @nrwl/express
yarn add --dev @nrwl/nest

View File

@ -8,7 +8,8 @@ import {
runCLI,
runCLIAsync,
uniq,
updateFile
updateFile,
supportUi
} from './utils';
import treeKill = require('tree-kill');

View File

@ -25,6 +25,19 @@ const workspace = findWorkspaceRoot(__dirname);
// we are running a local nx
if (workspace) {
// required to make sure nrwl/workspace import works
if (workspace.type === 'nx') {
require(path.join(
workspace.dir,
'node_modules',
'@nrwl',
'tao',
'src',
'compat',
'compat.js'
));
}
// The commandsObject is a Yargs object declared in `nx-commands.ts`,
// It is exposed and bootstrapped here to provide CLI features.
const w = require('@nrwl/workspace');

View File

@ -36,6 +36,10 @@ const presetOptions = [
value: 'react-express',
name:
'react-express [a workspace with a full stack application (React + Express)]'
},
{
value: 'next',
name: 'next.js [a workspace with a single Next.js application]'
}
];
@ -234,7 +238,8 @@ function determineCli(preset: string, parsedArgs: any) {
} else if (
preset === 'web-components' ||
preset === 'react' ||
preset === 'react-express'
preset === 'react-express' ||
preset === 'next'
) {
return Promise.resolve(nx);
} else {
@ -406,7 +411,8 @@ function showCliWarning(preset: string, parsedArgs: any) {
} else if (
preset === 'web-components' ||
preset === 'react' ||
preset === 'react-express'
preset === 'react-express' ||
preset === 'next'
) {
output.addVerticalSeparator();
output.note({
@ -420,7 +426,7 @@ function showCliWarning(preset: string, parsedArgs: any) {
}
function pointToTutorial(preset: string) {
if (preset === 'react' || preset === 'react-express') {
if (preset === 'react' || preset === 'react-express' || preset === 'next') {
output.addVerticalSeparator();
output.note({
title: `First time using Nx? Check out this interactive Nx tutorial.`,

View File

@ -14,7 +14,7 @@
"export": {
"implementation": "./src/builders/export/export.impl",
"schema": "./src/builders/export/schema.json",
"description": "Export a Next.js app"
"description": "Export a Next.js app. The exported application is located at dist/$outputPath/exported."
}
}
}

View File

@ -64,7 +64,17 @@ function run(
} as any,
options.port
).then(app => app.prepare())
).pipe(switchMap(e => new Observable<BuilderOutput>(obs => {})));
).pipe(
switchMap(
e =>
new Observable<BuilderOutput>(obs => {
obs.next({
baseUrl: `http://localhost:${options.port}`,
success: true
});
})
)
);
})
);
})

View File

@ -1,6 +1,6 @@
{
"title": "Next Export",
"description": "Export a Next.js app",
"description": "Export a Next.js app. The exported application is located at dist/$outputPath/exported.",
"type": "object",
"properties": {},
"required": []

View File

@ -40,7 +40,7 @@
"ignore": "5.0.4",
"npm-run-all": "4.1.5",
"opn": "^5.3.0",
"rxjs": "6.3.3",
"rxjs": "^6.4.0",
"semver": "5.4.1",
"strip-json-comments": "2.0.1",
"tmp": "0.0.33",

View File

@ -51,7 +51,7 @@
"ignore": "5.0.4",
"npm-run-all": "4.1.5",
"opn": "^5.3.0",
"rxjs": "6.3.3",
"rxjs": "^6.4.0",
"semver": "5.4.1",
"strip-json-comments": "2.0.1",
"tmp": "0.0.33",

View File

@ -7,7 +7,6 @@
"name": {
"description": "The name of the workspace.",
"type": "string",
"format": "html-selector",
"$default": {
"$source": "argv",
"index": 0
@ -73,6 +72,7 @@
"web-components",
"angular-nest",
"react-express",
"next",
"empty"
],
"default": "empty",

View File

@ -46,6 +46,18 @@ describe('preset', () => {
).toBe('@nrwl/web');
});
it('should create files (preset = next)', async () => {
const tree = await runSchematic(
'preset',
{ name: 'proj', preset: 'next' },
projectTree
);
expect(tree.exists('/apps/proj/pages/index.tsx')).toBe(true);
expect(
JSON.parse(tree.readContent('/workspace.json')).cli.defaultCollection
).toBe('@nrwl/next');
});
describe('--preset angular-nest', () => {
it('should create files', async () => {
const tree = await runSchematic(

View File

@ -53,13 +53,26 @@ function createPreset(options: Schema): Rule {
{
name: options.name,
style: options.style,
babel: true,
linter
},
{ interactive: false }
),
setDefaultCollection('@nrwl/react')
]);
} else if (options.preset === 'next') {
return chain([
externalSchematic(
'@nrwl/next',
'application',
{
name: options.name,
style: options.style,
linter
},
{ interactive: false }
),
setDefaultCollection('@nrwl/next')
]);
} else if (options.preset === 'web-components') {
return chain([
externalSchematic(
@ -103,7 +116,6 @@ function createPreset(options: Schema): Rule {
{
name: options.name,
style: options.style,
babel: true,
linter
},
{ interactive: false }

View File

@ -7,6 +7,7 @@ export interface Schema {
| 'empty'
| 'angular'
| 'react'
| 'next'
| 'web-components'
| 'angular-nest'
| 'react-express';

View File

@ -41,7 +41,8 @@ export interface Schema {
| 'react'
| 'web-components'
| 'angular-nest'
| 'react-express';
| 'react-express'
| 'next';
commit?: { name: string; email: string; message?: string };
}
@ -164,6 +165,14 @@ function addDependencies(options: Schema) {
},
false
);
} else if (options.preset === 'next') {
return addDepsToPackageJson(
{},
{
'@nrwl/next': nxVersion
},
false
);
} else {
return noop();
}
@ -227,6 +236,9 @@ function setDefaultLinter(linter: string) {
application: { linter },
library: { linter }
};
json.schematics['@nrwl/next'] = {
application: { linter }
};
json.schematics['@nrwl/web'] = { application: { linter } };
json.schematics['@nrwl/node'] = { application: { linter } };
json.schematics['@nrwl/nest'] = { application: { linter } };

View File

@ -7,7 +7,6 @@
"name": {
"description": "The name of the workspace.",
"type": "string",
"format": "html-selector",
"$default": {
"$source": "argv",
"index": 0
@ -73,6 +72,7 @@
"web-components",
"angular-nest",
"react-express",
"next",
"empty"
],
"default": "empty",

View File

@ -7,7 +7,6 @@
"name": {
"description": "The name of the workspace.",
"type": "string",
"format": "html-selector",
"$default": {
"$source": "argv",
"index": 0