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 https://github.com/vercel/next.js/pull/53467)

Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
This commit is contained in:
Colin McDonnell 2023-08-10 16:44:20 -07:00 committed by GitHub
parent 9bb10b1cb3
commit 7e16538485
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 46 additions and 2 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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