docs(nextjs): move next.js guide to next.js plugin page (#8758)

docs/map.json

@@ -1481,11 +1481,6 @@
             "id": "browser-support",
             "file": "shared/guides/browser-support"
           },
-          {
-            "name": "Next.js projects with Nx",
-            "id": "nextjs",
-            "file": "shared/guides/nextjs"
-          },
           {
             "name": "React Native with Nx",
             "id": "react-native",

docs/shared/getting-started/nx-and-react.md

@@ -19,7 +19,7 @@ It is also a good idea to read the [mental model guide](/using-nx/mental-model)
 Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools
 and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview),
 Storybook, [ESLint](/linter/eslint), and more. Nx also supports React
-frameworks like [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview).
+frameworks like [Next.js](/next/overview), Remix, and has great support for [React Native](/react-native/overview).
 
 <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
 

docs/shared/guides/nextjs.md

@@ -1,250 +0,0 @@
-# Next.js with Nx
-
-![](/shared/nextjs-logo.png)
-
-Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Cypress](/cypress/overview), Storybook, Jest, and more.
-
-In this guide we will show you how to develop [Next.js](https://nextjs.org/) applications with Nx.
-
-## Creating Nx Workspace
-
-The easiest way to create your workspace is via `npx`.
-
-```bash
-npx create-nx-workspace happynrwl \
---preset=next \
---style=css \
---appName=tuskdesk
-```
-
-**Note:** You can also run the command without arguments to go through the interactive prompts.
-
-```bash
-npx create-nx-workspace happynrwl
-```
-
-Once the command completes, the workspace will look as follows:
-
-```treeview
-happynrwl/
-├── apps/
-│   ├── tuskdesk/
-│   │   ├── index.d.ts
-│   │   ├── jest.config.js
-│   │   ├── next-env.d.ts
-│   │   ├── next.config.js
-│   │   ├── pages/
-│   │   │   ├── _app.tsx
-│   │   │   ├── index.module.css
-│   │   │   ├── index.tsx
-│   │   │   └── styles.css
-│   │   ├── public/
-│   │   │   ├── nx-logo-white.svg
-│   │   │   └── star.svg
-│   │   ├── specs/
-│   │   │   └── index.spec.tsx
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-│   └── tuskdesk-e2e/
-│       ├── cypress.json
-│       ├── src/
-│       │   ├── fixtures/
-│       │   ├── integration/
-│       │   ├── plugins/
-│       │   └── support/
-│       ├── tsconfig.e2e.json
-│       └── tsconfig.json
-├── babel.config.json
-├── jest.config.js
-├── jest.preset.js
-├── libs
-├── nx.json
-├── package-lock.json
-├── package.json
-├── tools/
-│   ├── generators
-│   └── tsconfig.tools.json
-├── tsconfig.base.json
-└── workspace.json
-```
-
-Run `npx nx serve tuskdesk` to start the dev server at http://localhost:4200. Try out other commands as well.
-
-- `nx lint tuskdesk` to lint the application
-- `nx test tuskdesk` to test the application using Jest
-- `nx e2e tuskdesk-e2e` to test the application using Cypress
-- `nx build tuskdesk` to build the application
-- `nx serve tuskdesk --prod` to serve the application in the production mode
-
-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.
-
-### Adding Next.js to an Existing Workspace
-
-For existing Nx workspaces, install the `@nrwl/next` package to add Next.js capabilities to it.
-
-```bash
-npm install @nrwl/next --save-dev
-
-# Or with yarn
-yarn add @nrwl/next --dev
-```
-
-## Generating an Application
-
-To create additional Next.js apps run:
-
-```bash
-npx nx g @nrwl/next:app
-```
-
-## Generating a Library
-
-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 `npx 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
-npx nx g @nrwl/react:lib shared-ui-layout
-```
-
-And you will see the following:
-
-```treeview
-happynrwl/
-├── apps/
-│   └── tuskdesk/
-│   └── tuskdesk-e2e/
-├── babel.config.json
-├── jest.config.js
-├── jest.preset.js
-├── libs/
-│   └── shared-ui-layout/
-│       ├── README.md
-│       ├── jest.config.js
-│       ├── src/
-│       │   ├── index.ts
-│       │   └── lib
-│       ├── tsconfig.json/
-│       ├── tsconfig.lib.json
-│       └── tsconfig.spec.json
-├── nx.json
-├── package-lock.json
-├── package.json
-├── tools/
-├── tsconfig.base.json
-└── workspace.json
-```
-
-Run:
-
-- `npx nx test shared-ui-layout` to test the library
-- `npx nx lint shared-ui-layout` to lint the library
-
-### Using Nx Library in your Application
-
-You can import the `shared-ui-layout` library in your application as follows.
-
-```typescript jsx
-// apps/tuskapp/pages/index.tsx
-import { SharedUiLayout } from '@happynrwl/shared-ui-layout';
-
-export function Index() {
-  return (
-    <SharedUiLayout>
-      <p>The main content</p>
-    </SharedUiLayout>
-  );
-}
-
-export default Index;
-```
-
-That's it! 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
-npx nx g @nrwl/react:lib shared-ui-layout --publishable --importPath=@happynrwl/ui-components
-```
-
-Run `npx nx build shared-ui-layout` to build the library. It will generate the following:
-
-```treeview
-dist/libs/shared-ui-layout/
-├── README.md
-├── index.d.ts
-├── lib
-│   └── shared-ui-layout.d.ts
-├── package.json
-├── shared-ui-layout.esm.css
-├── shared-ui-layout.esm.js
-├── shared-ui-layout.umd.css
-└── shared-ui-layout.umd.js
-```
-
-This dist folder is ready to be published to a registry.
-
-## Generating Pages and Components
-
-Nx also provides commands to quickly generate new pages and components for your application.
-
-- `npx nx g @nrwl/next:page about` to add an about page
-- `npx nx g @nrwl/next:component banner` to add a banner component
-
-Running the above commands will result in:
-
-```treeview
-apps/tuskdesk/
-├── components
-│   └── banner
-│       ├── banner.module.css
-│       ├── banner.spec.tsx
-│       └── banner.tsx
-├── index.d.ts
-├── jest.config.js
-├── next-env.d.ts
-├── next.config.js
-├── pages
-│   ├── _app.tsx
-│   ├── about.module.css
-│   ├── about.tsx
-│   ├── index.module.css
-│   ├── index.tsx
-│   └── styles.css
-├── public
-├── specs
-├── tsconfig.json
-└── tsconfig.spec.json
-```
-
-Nx generates components with tests by default. For pages, you can pass the `--withTests` option to generate tests under the `specs` folder.
-
-Run the tests again for the application: `npx nx test tuskdesk`.
-
-## Code Sharing
-
-Without Nx, creating a new shared library can take from several hours to 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.
-
-## Deploying your Next.js Application
-
-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).
-
-## Resources
-
-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

docs/shared/next-plugin.md

@@ -1,9 +1,176 @@
 # Next.js Plugin
 
-The Nx Plugin for Next.js contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:
+![](/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.
 
-See the [Next.js guide](/guides/nextjs) for information about using Next.js and Nx.
+## 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

nx-dev/nx-dev/next.config.js

@@ -11,6 +11,7 @@ const redirects = {
   '/getting-started/console': '/using-nx/console',
   '/core-extended/affected': '/using-nx/affected',
   '/core-extended/computation-caching': '/using-nx/caching',
+  '/guides/nextjs': '/next/overview',
 };
 
 module.exports = withNx({

nx-dev/nx-dev/public/documentation/map.json

@@ -1475,11 +1475,6 @@
             "id": "browser-support",
             "file": "shared/guides/browser-support"
           },
-          {
-            "name": "Next.js projects with Nx",
-            "id": "nextjs",
-            "file": "shared/guides/nextjs"
-          },
           {
             "name": "React Native with Nx",
             "id": "react-native",

nx-dev/nx-dev/public/documentation/shared/getting-started/nx-and-react.md

@@ -19,7 +19,7 @@ It is also a good idea to read the [mental model guide](/using-nx/mental-model)
 Nx plugins help you develop [React](/react/overview) applications with fully integrated support for modern tools
 and libraries like [Jest](/jest/overview), [Cypress](/cypress/overview),
 Storybook, [ESLint](/linter/eslint), and more. Nx also supports React
-frameworks like [Next.js](/guides/nextjs), Remix, and has great support for [React Native](/react-native/overview).
+frameworks like [Next.js](/next/overview), Remix, and has great support for [React Native](/react-native/overview).
 
 <iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/sNz-4PUM0k8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
 

nx-dev/nx-dev/public/documentation/shared/guides/nextjs.md

@@ -1,250 +0,0 @@
-# Next.js with Nx
-
-![](/shared/nextjs-logo.png)
-
-Nx provides a holistic dev experience powered by an advanced CLI and editor plugins. It provides rich support for common tools like [Cypress](/cypress/overview), Storybook, Jest, and more.
-
-In this guide we will show you how to develop [Next.js](https://nextjs.org/) applications with Nx.
-
-## Creating Nx Workspace
-
-The easiest way to create your workspace is via `npx`.
-
-```bash
-npx create-nx-workspace happynrwl \
---preset=next \
---style=css \
---appName=tuskdesk
-```
-
-**Note:** You can also run the command without arguments to go through the interactive prompts.
-
-```bash
-npx create-nx-workspace happynrwl
-```
-
-Once the command completes, the workspace will look as follows:
-
-```treeview
-happynrwl/
-├── apps/
-│   ├── tuskdesk/
-│   │   ├── index.d.ts
-│   │   ├── jest.config.js
-│   │   ├── next-env.d.ts
-│   │   ├── next.config.js
-│   │   ├── pages/
-│   │   │   ├── _app.tsx
-│   │   │   ├── index.module.css
-│   │   │   ├── index.tsx
-│   │   │   └── styles.css
-│   │   ├── public/
-│   │   │   ├── nx-logo-white.svg
-│   │   │   └── star.svg
-│   │   ├── specs/
-│   │   │   └── index.spec.tsx
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-│   └── tuskdesk-e2e/
-│       ├── cypress.json
-│       ├── src/
-│       │   ├── fixtures/
-│       │   ├── integration/
-│       │   ├── plugins/
-│       │   └── support/
-│       ├── tsconfig.e2e.json
-│       └── tsconfig.json
-├── babel.config.json
-├── jest.config.js
-├── jest.preset.js
-├── libs
-├── nx.json
-├── package-lock.json
-├── package.json
-├── tools/
-│   ├── generators
-│   └── tsconfig.tools.json
-├── tsconfig.base.json
-└── workspace.json
-```
-
-Run `npx nx serve tuskdesk` to start the dev server at http://localhost:4200. Try out other commands as well.
-
-- `nx lint tuskdesk` to lint the application
-- `nx test tuskdesk` to test the application using Jest
-- `nx e2e tuskdesk-e2e` to test the application using Cypress
-- `nx build tuskdesk` to build the application
-- `nx serve tuskdesk --prod` to serve the application in the production mode
-
-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.
-
-### Adding Next.js to an Existing Workspace
-
-For existing Nx workspaces, install the `@nrwl/next` package to add Next.js capabilities to it.
-
-```bash
-npm install @nrwl/next --save-dev
-
-# Or with yarn
-yarn add @nrwl/next --dev
-```
-
-## Generating an Application
-
-To create additional Next.js apps run:
-
-```bash
-npx nx g @nrwl/next:app
-```
-
-## Generating a Library
-
-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 `npx 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
-npx nx g @nrwl/react:lib shared-ui-layout
-```
-
-And you will see the following:
-
-```treeview
-happynrwl/
-├── apps/
-│   └── tuskdesk/
-│   └── tuskdesk-e2e/
-├── babel.config.json
-├── jest.config.js
-├── jest.preset.js
-├── libs/
-│   └── shared-ui-layout/
-│       ├── README.md
-│       ├── jest.config.js
-│       ├── src/
-│       │   ├── index.ts
-│       │   └── lib
-│       ├── tsconfig.json/
-│       ├── tsconfig.lib.json
-│       └── tsconfig.spec.json
-├── nx.json
-├── package-lock.json
-├── package.json
-├── tools/
-├── tsconfig.base.json
-└── workspace.json
-```
-
-Run:
-
-- `npx nx test shared-ui-layout` to test the library
-- `npx nx lint shared-ui-layout` to lint the library
-
-### Using Nx Library in your Application
-
-You can import the `shared-ui-layout` library in your application as follows.
-
-```typescript jsx
-// apps/tuskapp/pages/index.tsx
-import { SharedUiLayout } from '@happynrwl/shared-ui-layout';
-
-export function Index() {
-  return (
-    <SharedUiLayout>
-      <p>The main content</p>
-    </SharedUiLayout>
-  );
-}
-
-export default Index;
-```
-
-That's it! 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
-npx nx g @nrwl/react:lib shared-ui-layout --publishable --importPath=@happynrwl/ui-components
-```
-
-Run `npx nx build shared-ui-layout` to build the library. It will generate the following:
-
-```treeview
-dist/libs/shared-ui-layout/
-├── README.md
-├── index.d.ts
-├── lib
-│   └── shared-ui-layout.d.ts
-├── package.json
-├── shared-ui-layout.esm.css
-├── shared-ui-layout.esm.js
-├── shared-ui-layout.umd.css
-└── shared-ui-layout.umd.js
-```
-
-This dist folder is ready to be published to a registry.
-
-## Generating Pages and Components
-
-Nx also provides commands to quickly generate new pages and components for your application.
-
-- `npx nx g @nrwl/next:page about` to add an about page
-- `npx nx g @nrwl/next:component banner` to add a banner component
-
-Running the above commands will result in:
-
-```treeview
-apps/tuskdesk/
-├── components
-│   └── banner
-│       ├── banner.module.css
-│       ├── banner.spec.tsx
-│       └── banner.tsx
-├── index.d.ts
-├── jest.config.js
-├── next-env.d.ts
-├── next.config.js
-├── pages
-│   ├── _app.tsx
-│   ├── about.module.css
-│   ├── about.tsx
-│   ├── index.module.css
-│   ├── index.tsx
-│   └── styles.css
-├── public
-├── specs
-├── tsconfig.json
-└── tsconfig.spec.json
-```
-
-Nx generates components with tests by default. For pages, you can pass the `--withTests` option to generate tests under the `specs` folder.
-
-Run the tests again for the application: `npx nx test tuskdesk`.
-
-## Code Sharing
-
-Without Nx, creating a new shared library can take from several hours to 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.
-
-## Deploying your Next.js Application
-
-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).
-
-## Resources
-
-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

nx-dev/nx-dev/public/documentation/shared/next-plugin.md

@@ -1,9 +1,176 @@
 # Next.js Plugin
 
-The Nx Plugin for Next.js contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides:
+![](/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.
 
-See the [Next.js guide](/guides/nextjs) for information about using Next.js and Nx.
+## 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

nx-dev/ui-home/src/lib/getting-started.tsx

@@ -617,7 +617,7 @@ function ReactPane(): ReactComponentElement<any> {
               </svg>
               <h3 className="mt-2 font-semibold">
                 Next.js{' '}
-                <Link href="/guides/nextjs">
+                <Link href="/next/overview">
                   <a className="italic font-normal text-sm text-gray-600 hover:underline">
                     (follow our Next.js guide)
                   </a>