Skip to content

Commit

Permalink
docs(nextjs): use custom build path rather than output path (#6069)
Browse files Browse the repository at this point in the history
  • Loading branch information
kirjai committed Jun 18, 2021
1 parent 4f74759 commit 0f4c182
Show file tree
Hide file tree
Showing 9 changed files with 16 additions and 12 deletions.
Binary file added docs/react/guides/next-deploy-vercel-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/react/guides/next-deploy-vercel-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions docs/react/guides/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,23 +206,25 @@ module.exports = {
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 --outputPath=.
npx nx build tuskdesk --prod
```

4. Leave the "Output Directory" option untouched (i.e. do not toggle the override)
4. Toggle the override switch for the output directory. Point it to the `.next` directory inside the built app:

> You may be thinking, why don't we just override the Output Directory on Vercel and not set the custom `--outputPath` on the build command? At the time of writing these two things are not equivalent to the Vercel build executor that runs behind the scenes, so setting the `--outputPath` is the most appropriate option.
```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](https://user-images.githubusercontent.com/900523/104120015-1253c880-534d-11eb-860f-17e756904448.png)
![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](https://user-images.githubusercontent.com/900523/104119928-72963a80-534c-11eb-9f0d-e7b4311a22e5.png)
![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!
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,23 +206,25 @@ module.exports = {
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 --outputPath=.
npx nx build tuskdesk --prod
```

4. Leave the "Output Directory" option untouched (i.e. do not toggle the override)
4. Toggle the override switch for the output directory. Point it to the `.next` directory inside the built app:

> You may be thinking, why don't we just override the Output Directory on Vercel and not set the custom `--outputPath` on the build command? At the time of writing these two things are not equivalent to the Vercel build executor that runs behind the scenes, so setting the `--outputPath` is the most appropriate option.
```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](https://user-images.githubusercontent.com/900523/104120015-1253c880-534d-11eb-860f-17e756904448.png)
![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](https://user-images.githubusercontent.com/900523/104119928-72963a80-534c-11eb-9f0d-e7b4311a22e5.png)
![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!
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -215,14 +215,14 @@ npx nx build tuskdesk --prod --outputPath=.
Therefore, our full configuration (based on a repo called "nx-workspace" and a project called "tuskdesk") will look like this:

![image](https://user-images.githubusercontent.com/900523/104120015-1253c880-534d-11eb-860f-17e756904448.png)
![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](https://user-images.githubusercontent.com/900523/104119928-72963a80-534c-11eb-9f0d-e7b4311a22e5.png)
![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!

1 comment on commit 0f4c182

@vercel
Copy link

@vercel vercel bot commented on 0f4c182 Jun 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.