docs(nextjs): separate vercel deployment guide (#6482)

Author: kirjai

docs/map.json

@@ -2294,6 +2294,11 @@
             "id": "nextjs",
             "file": "react/guides/nextjs"
           },
+          {
+            "name": "Deploying Next.js applications to Vercel",
+            "id": "deploy-nextjs-to-vercel",
+            "file": "react/guides/deploy-nextjs-to-vercel"
+          },
           {
             "name": "Webpack 5 Migration",
             "id": "webpack-5",

docs/react/guides/deploy-nextjs-to-vercel.md

@@ -0,0 +1,35 @@
+# Deploying Next.js applications to Vercel
+
+Starting from Nx 11, your Next.js application should already be ready for deployment to Vercel.
+
+## Configure your Vercel project's settings appropriately
+
+### New Vercel project
+
+1. If you are "importing" your Nx workspace's repository for the first time, make sure you do _not_ choose a root directory as part of the repo selection process (therefore leaving it to be the root of the full repo/workspace)
+2. Ensure the Next.js "Framework Preset" is selected
+3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For example, for an application named `tuskdesk` the value will look like this:
+
+```bash
+npx nx build tuskdesk --prod
+```
+
+4. Toggle the override switch for the output directory. Point it to the `.next` directory inside the built app:
+
+```bash
+dist/apps/tuskdesk/.next
+```
+
+Therefore, our full configuration (based on a repo called "nx-workspace" and a project called "tuskdesk") will look like this:
+
+![image](./next-deploy-vercel-1.png)
+
+### Existing Vercel project
+
+If you have an existing project on Vercel then the exact same guidance applies as for the section above, it's just that you will need to update the project's existing settings.
+
+When everything is updated appropriately, for our `tuskdesk` example we would see the following in our "General" settings UI:
+
+![image](./next-deploy-vercel-2.png)
+
+Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Next.js projects from Nx workspaces on Vercel!

docs/react/guides/nextjs.md

@@ -236,43 +236,11 @@ Without Nx, creating a new shared library can take from several hours or even we
 
 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 to Vercel
+## Deploying your Next.js Application
 
-You may know that the company behind Next.js, [Vercel](https://vercel.com), has a great hosting platform offering that is developed in tandem with Next.js itself to offer a great overall developer and user experience.
+Once you are ready to deploy your Next.js application, you have absolute freedom to choose any hosting provider that fits your needs.
 
-Starting from Nx 11, your Next.js application should already be ready for deployment to Vercel.
-
-### Configure your Vercel project's settings appropriately
-
-#### New Vercel project
-
-1. If you are "importing" your Nx workspace's repository for the first time, make sure you do _not_ choose a root directory as part of the repo selection process (therefore leaving it to be the root of the full repo/workspace)
-2. Ensure the Next.js "Framework Preset" is selected
-3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
-
-```bash
-npx nx build tuskdesk --prod
-```
-
-4. Toggle the override switch for the output directory. Point it to the `.next` directory inside the built app:
-
-```bash
-dist/apps/tuskdesk/.next
-```
-
-Therefore, our full configuration (based on a repo called "nx-workspace" and a project called "tuskdesk") will look like this:
-
-![image](./next-deploy-vercel-1.png)
-
-#### Existing Vercel project
-
-If you have an existing project on Vercel then the exact same guidance applies as for the section above, it's just that you will need to update the project's existing settings.
-
-When everything is updated appropriately, for our `tuskdesk` example we would see the following in our "General" settings UI:
-
-![image](./next-deploy-vercel-2.png)
-
-Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Next.js projects from Nx workspaces on Vercel!
+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](/react/guides/deploy-nextjs-to-vercel).
 
 ## Resources