vercel · kodiakhq · Aug 10, 2023 · Aug 4, 2023 · Aug 10, 2023 · Aug 10, 2023
@@ -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)).
 ````
@@ -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.

@@ -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`.

@@ -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"

@@ -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:
 

@@ -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

@@ -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

@@ -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).

@@ -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.

@@ -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

@@ -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