When using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.

The Next.js plugin contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:


- Scaffolding for creating, building, serving, linting, and testing Next.js applications.

- Integration with building, serving, and exporting a Next.js application.

- Integration with React libraries within the workspace.

![](/shared/nextjs-logo.png)

When using Next.js in Nx, you get the out-of-the-box support for TypeScript, Cypress, and Jest. No need to configure anything: watch mode, source maps, and typings just work.

The Next.js plugin contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:

- Scaffolding for creating, building, serving, linting, and testing Next.js applications.
- Integration with building, serving, and exporting a Next.js application.
- Integration with React libraries within the workspace.

## Setting up Next.js

To create a new Nx workspace with Next.js, run `npx create-nx-workspace@latest --preset=next`.

To add Next.js to an existing Nx workspace, install the `@nrwl/next` package. Make sure to install the version that matches your `@nrwl/workspace` version.

```bash
#yarn
yarn add --dev @nrwl/next
```

```bash
#npm
npm install --save-dev @nrwl/next
```

### Creating Applications

You can add a new application with the following:

```bash
nx g @nrwl/next:app my-new-app
```

### Generating Libraries

Nx allows you to create libraries with just one command. Some reasons you might want to create a library include:

- Share code between applications
- Publish a package to be used outside the monorepo
- Better visualize the architecture using `nx graph`

For more information on Nx libraries, see our documentation on [Creating Libraries](/structure/creating-libraries)
and [Library Types](/structure/library-types).

To generate a new library run:

```bash
nx g @nrwl/next:lib my-new-lib
```

### Generating Pages and Components

Nx also provides commands to quickly generate new pages and components for your application.

```bash
nx g @nrwl/next:page my-new-page --project=my-new-app

nx g @nrwl/next:component my-new-component --project=my-new-app
```

Above commands will add a new page `my-new-page` and a component `my-new-component` to `my-new-app` project respectively.

Nx generates components with tests by default. For pages, you can pass the `--withTests` option to generate tests under the `specs` folder.

## Using Next.js

### Serving Next.js Applications

You can run `nx serve my-new-app` to serve a Next.js application called `my-new-app` for development. This will start the dev server at http://localhost:4200.

To serve a Next.js application for production, add the `--prod` flag to the serve command:

```bash
nx serve my-new-app --prod
```

### Using an Nx Library in your Application

You can import a library called `my-new-lib` in your application as follows.

```typescript jsx
// apps/my-next-app/pages/index.tsx
import { MyNewLib } from '@<your nx workspace name>/my-new-lib';

export function Index() {
  return (
    <MyNewLib>
      <p>The main content</p>
    </MyNewLib>
  );
}

export default Index;
```

There is no need to build the library prior to using it. When you update your library, the Next.js application will automatically pick up the changes.

### Publishable libraries

For libraries intended to be built and published to a registry (e.g. npm) you can use the `--publishable` and `--importPath` options.

```bash
nx g @nrwl/next:lib my-new-lib --publishable --importPath=@happynrwl/ui-components
```

### Testing Projects

You can run unit tests with:

```bash
nx test my-new-app
nx test my-new-lib
```

Replace `my-new-app` and `my-new-lib` with the name or the project you want to test. This command works for both applications and libraries.

You can also run E2E tests for applications:

```bash
nx e2e my-new-app-e2e
```

Replace `my-new-app-e2e` with the name or your project with -e2e appended.

### Linting Projects

You can lint projects with:

```bash
nx lint my-new-app
nx lint my-new-lib
```

Replace `my-new-app` and `my-new-lib` with the name or the project you want to test. This command works for both applications and libraries.

### Building Projects

Next.js applications can be build with:

```bash
nx build my-new-app
```

And if you generated a library with --buildable, then you can build a library as well:

```bash
nx build my-new-lib
```

After running a build, the output will be in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.

The library in `dist` is publishable to npm or a private registry.

### Static HTML Export

Next.js applications can be statically exported with:

```bash
nx export my-new-app
```

### Deploying Next.js Applications

Once you are ready to deploy your Next.js application, you have absolute freedom to choose any hosting provider that fits your needs.

You may know that the company behind Next.js, Vercel, has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience. We have detailed [how to deploy your Next.js application to Vercel in a separate guide](/guides/deploy-nextjs-to-vercel).

## More Documentation

Here are other resources that you may find useful to learn more about Next.js and Nx.

- **Blog post:** [Building a blog with Next.js and Nx Series](https://blog.nrwl.io/create-a-next-js-web-app-with-nx-bcf2ab54613) by Juri Strumpflohner
- **Video tutorial:** [Typescript NX Monorepo with NextJS and Express](https://www.youtube.com/watch?v=WOfL5q2HznI) by Jack Herrington


Overview

build

Read buildable libraries from source instead of building them separately.

Replace files with other files in the build.

Path (relative to workspace root) to a function which takes phase, config, and builder options, and returns the resulting config. This is an advanced option and should not be used with a normal Next.js config file (i.e. `next.config.js`).

Next Build

server

Use a custom server script. (Use `customServerTarget` instead)

Hostname on which the application is served.

Hide error messages containing server information.

Next Serve

Export a Next.js application. The exported application is located at `dist/$outputPath/exported`.

export

Hide progress or not (default is `false`)

Number of worker threads to utilize (defaults to the number of CPUs)

Next Export

init

Init Next Plugin

application

Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`

Test runner to use for end to end (E2E) tests.

Generate JavaScript files rather than TypeScript files.

The server script path to be used with next.

Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.

Skip updating `workspace.json` with default options based on values provided to this app (e.g. `babel`, `style`).

Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`

Enable the Rust-based compiler SWC to compile JS/TS files.

Create a Next.js Application for Nx

page

Generate a page in the my-app application

Create the page under this directory (can be nested). Will be created under `pages/`.

When true, the component is exported from the project `index.ts` (if it exists).

Create component at the source root rather than its own directory.

When true, creates a `spec.ts` test file for the new page.

Create a Page for Next

component

Generate a component in the `mylib` library

Generate a class component in the `mylib` library

Create the component under this directory (can be nested).

When true, the component is exported from the project index.ts (if it exists).

When true, does not create `spec.ts` test files for the new component.

Create a React Component for Next

library

Create a React Library for an Nx workspace.

Generate a library with routes and add them to `myapp`

The application project to add the library route to.

When true, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).

The library name used to import it, like `@myorg/my-awesome-lib`.

Use pascal case component file name (e.g. `App.tsx`).

Do not update tsconfig.json for development experience.

Whether to enable tsconfig strict mode or not.

Create a React Library for Nx

custom-server

Add a custom server to existing Next.js application.

Add a custom server to existing Next.js app.

The compiler used to build the custom server.

@nrwl/next:export

Options playground

Options

buildTarget

buildLibsFromSource

silent

threads