Include instructions for bun package manager (#53590)

## For Contributors ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide ### What? Add instructions for using `bun/bunx` where relevant. I only added mentions where npm/yarn/pnpm were all already listed. ### Why Bun can be used as a runtime-agnostic [package manager](https://bun.sh/package-manager) and script runner in any project with a `package.json`. (Sorry, I probably should have consolidated this with #53467) Co-authored-by: Steven <[email protected]>
vercel · Aug 10, 2023 · 7e16538 · 7e16538
1 parent 9bb10b1
commit 7e16538
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 2 deletions.
diff --git a/contributing/examples/adding-examples.md b/contributing/examples/adding-examples.md
@@ -39,7 +39,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 
 ## How to use
 
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example:
 
 ```bash
 npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
@@ -53,5 +53,9 @@ yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 pnpm create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 ```
 
+```bash
+bunx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
+```
+
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 ````
diff --git a/docs/02-app/01-building-your-application/07-configuring/02-eslint.mdx b/docs/02-app/01-building-your-application/07-configuring/02-eslint.mdx
@@ -214,6 +214,10 @@ First, install the dependency:
 npm install --save-dev eslint-config-prettier
 
 yarn add --dev eslint-config-prettier
+
+pnpm add --dev eslint-config-prettier
+
+bun add --dev eslint-config-prettier
 ```
 
 Then, add `prettier` to your existing ESLint config:
@@ -272,6 +276,10 @@ The plugin can be installed normally in your project without needing to run `nex
 npm install --save-dev @next/eslint-plugin-next
 
 yarn add --dev @next/eslint-plugin-next
+
+pnpm add --dev @next/eslint-plugin-next
+
+bun add --dev @next/eslint-plugin-next
 ```
 
 This eliminates the risk of collisions or errors that can occur due to importing the same plugin or parser across multiple configurations.

diff --git a/docs/02-app/02-api-reference/05-next-config-js/output.mdx b/docs/02-app/02-api-reference/05-next-config-js/output.mdx
@@ -66,6 +66,10 @@ yarn add sharp
 pnpm add sharp
 ```
 
+```bash filename="Terminal"
+bun add sharp
+```
+
 ## Caveats
 
 - While tracing in monorepo setups, the project directory is used for tracing by default. For `next build packages/web-app`, `packages/web-app` would be the tracing root and any files outside of that folder will not be included. To include files outside of this folder you can set `experimental.outputFileTracingRoot` in your `next.config.js`.

diff --git a/docs/02-app/02-api-reference/06-create-next-app.mdx b/docs/02-app/02-api-reference/06-create-next-app.mdx
@@ -25,6 +25,10 @@ yarn create next-app
 pnpm create next-app
 ```
 
+```bash filename="Terminal"
+bunx create-next-app
+```
+
 You will then be asked the following prompts:
 
 ```bash filename="Terminal"

diff --git a/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx b/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx
@@ -7,7 +7,7 @@ This documentation explains how you can handle development, server-side, and cli
 
 ## Handling Errors in Development
 
-When there is a runtime error during the development phase of your Next.js application, you will encounter an **overlay**. It is a modal that covers the webpage. It is **only** visible when the development server runs using `next dev` via `pnpm dev`, `npm run dev`, or `yarn dev` and will not be shown in production. Fixing the error will automatically dismiss the overlay.
+When there is a runtime error during the development phase of your Next.js application, you will encounter an **overlay**. It is a modal that covers the webpage. It is **only** visible when the development server runs using `next dev` via `pnpm dev`, `npm run dev`, `yarn dev`, or `bun run dev` and will not be shown in production. Fixing the error will automatically dismiss the overlay.
 
 Here is an example of an overlay:
 

diff --git a/docs/03-pages/01-building-your-application/08-upgrading/03-version-13.mdx b/docs/03-pages/01-building-your-application/08-upgrading/03-version-13.mdx
@@ -13,6 +13,8 @@ npm i next@latest react@latest react-dom@latest eslint-config-next@latest
 yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
 # or
 pnpm up next react react-dom eslint-config-next --latest
+# or
+bun add next@latest react@latest react-dom@latest eslint-config-next@latest
 ```
 
 ### v13 Summary

diff --git a/docs/03-pages/01-building-your-application/08-upgrading/04-version-12.mdx b/docs/03-pages/01-building-your-application/08-upgrading/04-version-12.mdx
@@ -11,6 +11,8 @@ npm install next@12
 yarn add next@12
 
 pnpm update next@12
+
+bun add next@12
 ```
 
 ### Upgrading to 12.2
@@ -29,6 +31,8 @@ npm install react@latest react-dom@latest
 yarn add react@latest react-dom@latest
 
 pnpm update react@latest react-dom@latest
+
+bun add react@latest react-dom@latest
 ```
 
 #### SWC replacing Babel

diff --git a/errors/install-sharp.mdx b/errors/install-sharp.mdx
@@ -24,6 +24,10 @@ yarn add sharp
 pnpm add sharp
 ```
 
+```bash filename="Terminal"
+bun add sharp
+```
+
 Option 2: If using macOS, ensure XCode Build Tools are installed and try to install `sharp` again.
 
 For example, see [macOS Catalina instructions](https://github.com/nodejs/node-gyp/blob/66c0f0446749caa591ad841cd029b6d5b5c8da42/macOS_Catalina.md).

diff --git a/errors/sharp-missing-in-production.mdx b/errors/sharp-missing-in-production.mdx
@@ -30,6 +30,10 @@ yarn add sharp
 pnpm add sharp
 ```
 
+```bash filename="Terminal"
+bun add sharp
+```
+
 Then, build your project with `next build`. Finally, restart the server with either `next start` for production mode or `node server.js` for standalone mode.
 
 - If `sharp` is already installed but can't be resolved, set the `NEXT_SHARP_PATH` environment variable such as `export NEXT_SHARP_PATH=/tmp/node_modules/sharp`. Then, build your project with `next build`. Finally, restart the server with either `next start` for production mode or `node server.js` for standalone mode.

diff --git a/errors/version-staleness.mdx b/errors/version-staleness.mdx
@@ -24,6 +24,10 @@ yarn add next@canary
 pnpm add next@canary
 ```
 
+```bash filename="Terminal"
+bun add next@canary
+```
+
 If you are using a stable release, upgrade Next.js with one of the following:
 
 ```bash filename="Terminal"
@@ -38,6 +42,10 @@ yarn add next@latest
 pnpm add next@latest
 ```
 
+```bash filename="Terminal"
+bun add next@latest
+```
+
 If you are coming from an older major version, check out our [upgrade guides](/docs/pages/building-your-application/upgrading).
 
 ### Note

diff --git a/packages/create-next-app/README.md b/packages/create-next-app/README.md
@@ -12,6 +12,8 @@ npx create-next-app@latest
 yarn create next-app
 # or
 pnpm create next-app
+# or
+bunx create-next-app
 ```
 
 You will be asked for the name of your project, and then whether you want to