From 7e165384857893a25eb59b800c5af585a7778c71 Mon Sep 17 00:00:00 2001 From: Colin McDonnell Date: Thu, 10 Aug 2023 16:44:20 -0700 Subject: [PATCH] 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> --- contributing/examples/adding-examples.md | 6 +++++- .../07-configuring/02-eslint.mdx | 8 ++++++++ docs/02-app/02-api-reference/05-next-config-js/output.mdx | 4 ++++ docs/02-app/02-api-reference/06-create-next-app.mdx | 4 ++++ .../06-configuring/12-error-handling.mdx | 2 +- .../08-upgrading/03-version-13.mdx | 2 ++ .../08-upgrading/04-version-12.mdx | 4 ++++ errors/install-sharp.mdx | 4 ++++ errors/sharp-missing-in-production.mdx | 4 ++++ errors/version-staleness.mdx | 8 ++++++++ packages/create-next-app/README.md | 2 ++ 11 files changed, 46 insertions(+), 2 deletions(-) diff --git a/contributing/examples/adding-examples.md b/contributing/examples/adding-examples.md index 9fbbaac8c6..696d49e53e 100644 --- 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 index 5d79714849..75b13cb09f 100644 --- 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 index 8abee2717d..02271017ba 100644 --- 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 index 15480de510..457713c409 100644 --- 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 index 9d35261845..f43f5ea583 100644 --- 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 index 28cd7028a4..c961f9dc24 100644 --- 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 index 3bf2e70a72..7c9c145b36 100644 --- 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 index 16bed8574e..0b1a7e400f 100644 --- 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 index 75deaa5a3d..4f99037f7d 100644 --- 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 index 45e5811959..fd2d0aef40 100644 --- 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 index 423c39bdfc..b50f474249 100644 --- 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