From 49cba424e8a4ee5c406eea8c4ee2095798e8e806 Mon Sep 17 00:00:00 2001 From: Jam Balaya Date: Thu, 14 Nov 2024 03:52:56 +0900 Subject: [PATCH] examples: polish some README.md (#72117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description I have corrected some mistakes according to the [contribution guide](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md). 1. Update `create-next-app` script 2. Remove redundant new line, space and double colon 3. `readme.md` → `README.md` ### Adding or Updating Examples - [x] The "examples guidelines" are followed from our contributing doc https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md - [x] Make sure the linting passes by running `pnpm build && pnpm lint`. See https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md --------- Co-authored-by: Sam Ko --- .../README.md | 2 +- examples/cache-handler-redis/README.md | 1 - examples/cms-prepr/README.md | 2 +- examples/cms-sitecore-xmcloud/README.md | 4 +-- .../{readme.md => README.md} | 0 examples/github-pages/README.md | 14 +++++--- examples/server-actions-upload/README.md | 6 ++-- .../README.md | 2 +- examples/with-apivideo/README.md | 6 ++-- examples/with-axiom/README.md | 2 +- examples/with-cloudinary/README.md | 8 ++--- examples/with-fauna/README.md | 12 ++++--- examples/with-i18n-next-intl/README.md | 14 +++++--- examples/with-ionic-typescript/README.md | 2 +- examples/with-jest-babel/README.md | 14 ++++++-- examples/with-jest/README.md | 14 ++++++-- examples/with-knex/README.md | 6 ++++ examples/with-magic/README.md | 2 ++ examples/with-mocha/README.md | 2 ++ examples/with-mongodb-mongoose/README.md | 5 +-- examples/with-mongodb/README.md | 5 +-- examples/with-msw/README.md | 8 +++++ examples/with-mux-video/README.md | 2 +- examples/with-mysql/README.md | 36 +++++++++++++++++-- examples/with-next-sass/README.md | 3 ++ .../README.md | 5 +-- examples/with-plausible/README.md | 2 +- examples/with-relay-modern/README.md | 6 ++++ examples/with-rematch/README.md | 2 +- examples/with-sfcc/README.md | 2 +- examples/with-slate/README.md | 2 +- examples/with-stencil/README.md | 2 +- examples/with-stitches/README.md | 2 +- .../with-storybook-styled-jsx-scss/README.md | 4 +++ examples/with-storybook/README.md | 4 +++ examples/with-stripe-typescript/README.md | 3 ++ examples/with-supertokens/README.md | 12 ++++--- examples/with-turso/README.md | 2 +- examples/with-typescript/README.md | 20 +++++++++-- examples/with-unsplash/README.md | 5 +-- examples/with-userbase/README.md | 5 +-- examples/with-videojs/README.md | 2 +- examples/with-vitest/README.md | 10 ++++++ examples/with-xstate/README.md | 2 ++ examples/with-zones/README.md | 6 ++++ 45 files changed, 203 insertions(+), 67 deletions(-) rename examples/environment-variables/{readme.md => README.md} (100%) diff --git a/examples/api-routes-apollo-server-and-client-auth/README.md b/examples/api-routes-apollo-server-and-client-auth/README.md index 5a543e9792c01..947cb4ba9b364 100644 --- a/examples/api-routes-apollo-server-and-client-auth/README.md +++ b/examples/api-routes-apollo-server-and-client-auth/README.md @@ -12,7 +12,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 [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-auth-app diff --git a/examples/cache-handler-redis/README.md b/examples/cache-handler-redis/README.md index 35b426a969701..ba099358ef24c 100644 --- a/examples/cache-handler-redis/README.md +++ b/examples/cache-handler-redis/README.md @@ -9,7 +9,6 @@ Check out this [repository](https://github.com/ezeparziale/nextjs-k8s) that cont 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: ```bash - npx create-next-app --example cache-handler-redis cache-handler-redis-app ``` diff --git a/examples/cms-prepr/README.md b/examples/cms-prepr/README.md index 1c860e3896c5a..6d19e516907cc 100644 --- a/examples/cms-prepr/README.md +++ b/examples/cms-prepr/README.md @@ -11,7 +11,7 @@ Check out our Blog page example: ## How to use -Run one of the following [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) commands using [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to create a new Next.js app and connect it to Prepr: +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: ```bash npx create-next-app --example cms-prepr cms-prepr-app diff --git a/examples/cms-sitecore-xmcloud/README.md b/examples/cms-sitecore-xmcloud/README.md index 317783e4eb6a7..404df3bf1a0bb 100644 --- a/examples/cms-sitecore-xmcloud/README.md +++ b/examples/cms-sitecore-xmcloud/README.md @@ -52,11 +52,11 @@ npx create-next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ```bash -yarn create-next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app +yarn create next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ```bash -pnpm create-next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app +pnpm create next-app --example cms-sitecore-xmcloud cms-sitecore-xmcloud-app ``` ## Configuration diff --git a/examples/environment-variables/readme.md b/examples/environment-variables/README.md similarity index 100% rename from examples/environment-variables/readme.md rename to examples/environment-variables/README.md diff --git a/examples/github-pages/README.md b/examples/github-pages/README.md index ac413d4ef46fa..8427f8813301a 100644 --- a/examples/github-pages/README.md +++ b/examples/github-pages/README.md @@ -9,11 +9,15 @@ The `out` directory should not be ignored by version control. 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: ```bash -npx create-next-app --example github-pages nextjs-github-pages -# or -yarn create next-app --example github-pages nextjs-github-pages -# or -pnpm create next-app --example github-pages nextjs-github-pages +npx create-next-app --example github-pages github-pages-app +``` + +```bash +yarn create next-app --example github-pages github-pages-app +``` + +```bash +pnpm create next-app --example github-pages github-pages-app ``` ### Deploy to GitHub Pages diff --git a/examples/server-actions-upload/README.md b/examples/server-actions-upload/README.md index d09f9c2af6b01..cd2fbe87f6a51 100644 --- a/examples/server-actions-upload/README.md +++ b/examples/server-actions-upload/README.md @@ -11,15 +11,15 @@ This example shows how you can build upload forms with Next.js and Server Action 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: ```bash -npx create-next-app --example server-actions-upload next-upload-app +npx create-next-app --example server-actions-upload server-actions-upload-app ``` ```bash -yarn create next-app --example server-actions-upload next-upload-app +yarn create next-app --example server-actions-upload server-actions-upload-app ``` ```bash -pnpm create next-app --example server-actions-upload next-upload-app +pnpm create next-app --example server-actions-upload server-actions-upload-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/examples/with-algolia-react-instantsearch/README.md b/examples/with-algolia-react-instantsearch/README.md index ac60157e8ec69..d15f2c77ef80f 100644 --- a/examples/with-algolia-react-instantsearch/README.md +++ b/examples/with-algolia-react-instantsearch/README.md @@ -25,7 +25,7 @@ pnpm create next-app --example with-algolia-react-instantsearch with-algolia-rea ``` ```bash -bun create next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app +bunx create-next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app ``` This example is already configured with an e-commerce index, but you can easily customize it by: diff --git a/examples/with-apivideo/README.md b/examples/with-apivideo/README.md index f71da89c0f442..14253e1085d85 100644 --- a/examples/with-apivideo/README.md +++ b/examples/with-apivideo/README.md @@ -17,15 +17,15 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu 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: ```bash -npx create-next-app --example with-apivideo +npx create-next-app --example with-apivideo with-apivideo-app ``` ```bash -yarn create next-app --example with-apivideo +yarn create next-app --example with-apivideo with-apivideo-app ``` ```bash -pnpm create next-app --example with-apivideo +pnpm create next-app --example with-apivideo with-apivideo-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/examples/with-axiom/README.md b/examples/with-axiom/README.md index 37dfbf4556b35..ca9e6f31874ab 100644 --- a/examples/with-axiom/README.md +++ b/examples/with-axiom/README.md @@ -12,7 +12,7 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym ## 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-axiom with-axiom-app diff --git a/examples/with-cloudinary/README.md b/examples/with-cloudinary/README.md index 02adea17724b6..ce0aa450eb456 100644 --- a/examples/with-cloudinary/README.md +++ b/examples/with-cloudinary/README.md @@ -12,18 +12,18 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym ## 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash - npx create-next-app --example with-cloudinary nextjs-image-gallery +npx create-next-app --example with-cloudinary with-cloudinary-app ``` ```bash -yarn create next-app --example with-cloudinary nextjs-image-gallery +yarn create next-app --example with-cloudinary with-cloudinary-app ``` ```bash -pnpm create next-app --example with-cloudinary nextjs-image-gallery +pnpm create next-app --example with-cloudinary with-cloudinary-app ``` ## References diff --git a/examples/with-fauna/README.md b/examples/with-fauna/README.md index 651367bfe6660..a85a6b0aecbba 100644 --- a/examples/with-fauna/README.md +++ b/examples/with-fauna/README.md @@ -12,15 +12,17 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu 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: -``` +```bash npx create-next-app --example with-fauna with-fauna-app -# or +``` + +```bash yarn create next-app --example with-fauna with-fauna-app -# or -pnpm create next-app --example with-fauna with-fauna-app ``` -You can start with this template [using `create-next-app`](#using-create-next-app) or by [downloading the repository manually](#download-manually). +```bash +pnpm create next-app --example with-fauna with-fauna-app +``` ### Setting Up Your Fauna Database diff --git a/examples/with-i18n-next-intl/README.md b/examples/with-i18n-next-intl/README.md index b441bf3352b68..a78baebcc643c 100644 --- a/examples/with-i18n-next-intl/README.md +++ b/examples/with-i18n-next-intl/README.md @@ -21,11 +21,15 @@ Deploy the example using [Vercel](https://vercel.com) or preview live with [Stac 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: ```bash -npx create-next-app --example with-i18n-next-intl -# or -yarn create next-app --example with-i18n-next-intl -# or -pnpm create next-app --example with-i18n-next-intl +npx create-next-app --example with-i18n-next-intl with-i18n-next-intl-app +``` + +```bash +yarn create next-app --example with-i18n-next-intl with-i18n-next-intl-app +``` + +```bash +pnpm create next-app --example with-i18n-next-intl with-i18n-next-intl-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic-typescript/README.md index 2f20af70102ed..0ec8f6b5be0dc 100644 --- a/examples/with-ionic-typescript/README.md +++ b/examples/with-ionic-typescript/README.md @@ -10,7 +10,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 [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-ionic-typescript with-ionic-typescript-app diff --git a/examples/with-jest-babel/README.md b/examples/with-jest-babel/README.md index 817c604e0abc4..07e42d1e69a16 100644 --- a/examples/with-jest-babel/README.md +++ b/examples/with-jest-babel/README.md @@ -6,9 +6,7 @@ This includes Next.js' built-in support for Global CSS, CSS Modules and TypeScri ## How to Use -Quickly get started using [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app#readme)! - -In your terminal, run the following command: +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: ```bash npx create-next-app --example with-jest-babel with-jest-babel-app @@ -27,3 +25,13 @@ pnpm create next-app --example with-jest-babel with-jest-babel-app ```bash npm test ``` + +```bash +yarn test +``` + +```bash +pnpm test +``` + +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/examples/with-jest/README.md b/examples/with-jest/README.md index 9eb09468833f9..d7dc44ee2288f 100644 --- a/examples/with-jest/README.md +++ b/examples/with-jest/README.md @@ -12,9 +12,7 @@ This includes Next.js' built-in support for Global CSS, CSS Modules and TypeScri ## How to Use -Quickly get started using [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app#readme)! - -In your terminal, run the following command: +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: ```bash npx create-next-app --example with-jest with-jest-app @@ -33,3 +31,13 @@ pnpm create next-app --example with-jest with-jest-app ```bash npm test ``` + +```bash +yarn test +``` + +```bash +pnpm test +``` + +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/examples/with-knex/README.md b/examples/with-knex/README.md index 3aa5f7a60d721..205f9c81b4bc2 100644 --- a/examples/with-knex/README.md +++ b/examples/with-knex/README.md @@ -32,6 +32,8 @@ pnpm create next-app --example with-knex with-knex-app npm install # or yarn +# or +pnpm install ``` ### Set up a Postgres database @@ -56,6 +58,8 @@ You can create, apply and rollback migrations using the scripts in `package.json npm run migrate:latest # or yarn migrate:latest +# or +pnpm migrate:latest ``` ### Start Next.js in development mode @@ -64,6 +68,8 @@ yarn migrate:latest npm run dev # or yarn dev +# or +pnpm dev ``` Your app should now be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-magic/README.md b/examples/with-magic/README.md index 40359e1e809ce..29dc42afeb20f 100644 --- a/examples/with-magic/README.md +++ b/examples/with-magic/README.md @@ -54,6 +54,8 @@ Now, run Next.js in development mode npm run dev # or yarn dev +# or +pnpm dev ``` Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-mocha/README.md b/examples/with-mocha/README.md index 122989f6a2dcb..0620b707d2a3e 100644 --- a/examples/with-mocha/README.md +++ b/examples/with-mocha/README.md @@ -30,6 +30,8 @@ pnpm create next-app --example with-mocha with-mocha-app npm run test # or yarn test +# or +pnpm test ``` > A very important part of this example is the `.babelrc` file which configures the `test` environment to use `babel-preset-env` and configures it to transpile modules to `commonjs`). [Learn more](https://github.com/vercel/next.js/issues/2895). diff --git a/examples/with-mongodb-mongoose/README.md b/examples/with-mongodb-mongoose/README.md index 2e7bcd41f52e3..105b60ed40758 100644 --- a/examples/with-mongodb-mongoose/README.md +++ b/examples/with-mongodb-mongoose/README.md @@ -55,11 +55,12 @@ Then set each variable on `.env.local`: ```bash npm install npm run dev - # or - yarn install yarn dev +# or +pnpm install +pnpm dev ``` Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-mongodb/README.md b/examples/with-mongodb/README.md index ab5d7efaccb3a..183ca9ab87b94 100644 --- a/examples/with-mongodb/README.md +++ b/examples/with-mongodb/README.md @@ -52,11 +52,12 @@ Set each variable on `.env.local`: ```bash npm install npm run dev - # or - yarn install yarn dev +# or +pnpm install +pnpm dev ``` Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-msw/README.md b/examples/with-msw/README.md index 669fc850f05ac..8276517878d2f 100644 --- a/examples/with-msw/README.md +++ b/examples/with-msw/README.md @@ -16,6 +16,14 @@ The service worker file will automatically be generated in `public/mockServiceWo npx msw init public/ ``` +```bash +yarn msw init public/ +``` + +```bash +pnpm msw init public/ +``` + More information on this setup step can be found in the MSW documentation [here](https://mswjs.io/docs/getting-started/integrate/browser#setup). ## Deploy your own diff --git a/examples/with-mux-video/README.md b/examples/with-mux-video/README.md index ad184d22d2989..51caadd15b630 100644 --- a/examples/with-mux-video/README.md +++ b/examples/with-mux-video/README.md @@ -17,7 +17,7 @@ Deploy the example using [Vercel](https://vercel.com/home): ### Step 1. Create a Next app with this 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/), 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 with-mux-video with-mux-video-app diff --git a/examples/with-mysql/README.md b/examples/with-mysql/README.md index dbd749c3c27c8..2e9c12f712374 100644 --- a/examples/with-mysql/README.md +++ b/examples/with-mysql/README.md @@ -73,17 +73,47 @@ mysql://:@/?sslac Push the database schema to your PlanetScale database using Prisma. -`npx prisma db push` +```bash +npx prisma db push +``` + +```bash +yarn prisma db push +``` + +```bash +pnpm prisma +``` Run the seed script to populate your database with `Product` and `Category` data. -`npm run seed` +```bash +npm run seed +``` + +```bash +yarn seed +``` + +```bash +pnpm seed +``` ## Run the App Run the app with following command: -`npm run dev` +```bash +npm run dev +``` + +```bash +yarn dev +``` + +```bash +pnpm dev +``` Open your browser at [localhost:3000](localhost:3000) to see the running application. diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md index 02a509cc69b04..8428d171d2998 100644 --- a/examples/with-next-sass/README.md +++ b/examples/with-next-sass/README.md @@ -32,6 +32,9 @@ npm run start # or yarn build yarn start +# or +pnpm build +pnpm start ``` 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/examples/with-nhost-auth-realtime-graphql/README.md b/examples/with-nhost-auth-realtime-graphql/README.md index a0ab27f840426..f6f00c0d62395 100644 --- a/examples/with-nhost-auth-realtime-graphql/README.md +++ b/examples/with-nhost-auth-realtime-graphql/README.md @@ -49,11 +49,12 @@ Copy `.env.local.example` to `.env.local` and update the two URLs with your Nhos ```bash npm install npm run dev - # or - yarn install yarn dev +# or +pnpm install +pnpm dev ``` Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-plausible/README.md b/examples/with-plausible/README.md index a0e677a09cf7d..435f24c52ed6f 100644 --- a/examples/with-plausible/README.md +++ b/examples/with-plausible/README.md @@ -10,7 +10,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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-plausible with-plausible-app diff --git a/examples/with-relay-modern/README.md b/examples/with-relay-modern/README.md index 4c7b33bf9eeb4..17af683d3b161 100644 --- a/examples/with-relay-modern/README.md +++ b/examples/with-relay-modern/README.md @@ -32,6 +32,8 @@ Download schema introspection data from configured Relay endpoint npm run schema # or yarn schema +# or +pnpm schema ``` Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay) @@ -40,6 +42,8 @@ Run Relay ahead-of-time compilation (should be re-run after any edits to compone npm run relay # or yarn relay +# or +pnpm relay ``` Run the project @@ -48,6 +52,8 @@ Run the project npm run dev # or yarn dev +# or +pnpm dev ``` 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/examples/with-rematch/README.md b/examples/with-rematch/README.md index 07eab6458c060..0df950b76e952 100644 --- a/examples/with-rematch/README.md +++ b/examples/with-rematch/README.md @@ -12,7 +12,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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-rematch with-rematch-app diff --git a/examples/with-sfcc/README.md b/examples/with-sfcc/README.md index 302f036265d9b..41f9b6df18902 100644 --- a/examples/with-sfcc/README.md +++ b/examples/with-sfcc/README.md @@ -12,7 +12,7 @@ Check out our [Next.js deployment documentation](https://nextjs.org/docs/deploym ## 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-sfcc nextjs-sfcc-app diff --git a/examples/with-slate/README.md b/examples/with-slate/README.md index 5e7e754953880..73e1241bb6811 100644 --- a/examples/with-slate/README.md +++ b/examples/with-slate/README.md @@ -10,7 +10,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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-slate with-slate-app diff --git a/examples/with-stencil/README.md b/examples/with-stencil/README.md index 8c6957e807775..011f4b7fdcf67 100644 --- a/examples/with-stencil/README.md +++ b/examples/with-stencil/README.md @@ -8,7 +8,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 [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-stencil with-stencil-app diff --git a/examples/with-stitches/README.md b/examples/with-stitches/README.md index e7336716a22ea..59b6fd4f33a5f 100644 --- a/examples/with-stitches/README.md +++ b/examples/with-stitches/README.md @@ -10,7 +10,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) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) 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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-stitches with-stitches-app diff --git a/examples/with-storybook-styled-jsx-scss/README.md b/examples/with-storybook-styled-jsx-scss/README.md index 1a26fb5e27ce2..86785597b2b24 100644 --- a/examples/with-storybook-styled-jsx-scss/README.md +++ b/examples/with-storybook-styled-jsx-scss/README.md @@ -30,6 +30,8 @@ pnpm create next-app --example with-storybook-styled-jsx-scss with-storybook-sty npm run storybook # or yarn storybook +# or +pnpm storybook ``` ### Build Static Storybook @@ -38,6 +40,8 @@ yarn storybook npm run build-storybook # or yarn build-storybook +# or +pnpm build-storybook ``` You can use [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy Storybook. Specify `storybook-static` as the output directory. diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md index c946e740cb735..ed68401d63d7e 100644 --- a/examples/with-storybook/README.md +++ b/examples/with-storybook/README.md @@ -34,6 +34,8 @@ pnpm create next-app --example with-storybook with-storybook-app npm run storybook # or yarn storybook +# or +pnpm storybook ``` ### Build Static Storybook @@ -42,6 +44,8 @@ yarn storybook npm run build-storybook # or yarn build-storybook +# or +pnpm build-storybook ``` You can use [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy Storybook. Specify `storybook-static` as the output directory. diff --git a/examples/with-stripe-typescript/README.md b/examples/with-stripe-typescript/README.md index 03daf75c95090..19807d7fac4b5 100644 --- a/examples/with-stripe-typescript/README.md +++ b/examples/with-stripe-typescript/README.md @@ -88,6 +88,9 @@ npm run dev # or yarn yarn dev +# or +pnpm install +pnpm dev ``` ### Forward webhooks to your local dev server diff --git a/examples/with-supertokens/README.md b/examples/with-supertokens/README.md index 938e2039c60ba..faed4279e79c9 100644 --- a/examples/with-supertokens/README.md +++ b/examples/with-supertokens/README.md @@ -20,10 +20,6 @@ yarn create next-app --example with-supertokens with-supertokens-app pnpm create next-app --example with-supertokens with-supertokens-app ``` -- Run `yarn install` - -- Run `npm run dev` to start the application on `http://localhost:3000`. - ### Using `create-supertokens-app` - Run the following command @@ -32,6 +28,14 @@ pnpm create next-app --example with-supertokens with-supertokens-app npx create-supertokens-app@latest --frontend=next ``` +```bash +yarn create-supertokens-app@latest --frontend=next +``` + +```bash +pnpm create-supertokens-app@latest --frontend=next +``` + - Select the option to use the app directory Follow the instructions after `create-supertokens-app` has finished diff --git a/examples/with-turso/README.md b/examples/with-turso/README.md index e816390c961d0..27a37495ee62e 100644 --- a/examples/with-turso/README.md +++ b/examples/with-turso/README.md @@ -41,7 +41,7 @@ yarn install yarn dev # or -# + pnpm install pnpm dev ``` diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md index ab836853ea56a..3480243910059 100644 --- a/examples/with-typescript/README.md +++ b/examples/with-typescript/README.md @@ -30,16 +30,32 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript. -``` +```shell npm install --save-dev typescript ``` -To enable TypeScript's features, we install the type declarations for React and Node. +```shell +yarn install --save-dev typescript +``` +```shell +pnpm install --save-dev typescript ``` + +To enable TypeScript's features, we install the type declarations for React and Node. + +```shell npm install --save-dev @types/react @types/react-dom @types/node ``` +```shell +yarn install --save-dev @types/react @types/react-dom @types/node +``` + +```shell +pnpm install --save-dev @types/react @types/react-dom @types/node +``` + When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings. Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away. diff --git a/examples/with-unsplash/README.md b/examples/with-unsplash/README.md index a6344c1c678b1..6f99b3cb9274a 100644 --- a/examples/with-unsplash/README.md +++ b/examples/with-unsplash/README.md @@ -64,11 +64,12 @@ Then set each variable on `.env.local`: ```bash npm install npm run dev - # or - yarn install yarn dev +# or +pnpm install +pnpm dev ``` Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-userbase/README.md b/examples/with-userbase/README.md index beae878b3c868..7802ee9c9c38a 100644 --- a/examples/with-userbase/README.md +++ b/examples/with-userbase/README.md @@ -53,11 +53,12 @@ NEXT_PUBLIC_USERBASE_APP_ID=... ```bash npm install npm run dev - # or - yarn install yarn dev +# or +pnpm install +pnpm dev ``` Your todo app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md index ff4786bfaee76..6a8487589039a 100644 --- a/examples/with-videojs/README.md +++ b/examples/with-videojs/README.md @@ -10,7 +10,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/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash npx create-next-app --example with-videojs with-videojs-app diff --git a/examples/with-vitest/README.md b/examples/with-vitest/README.md index d1715cea057b0..ec6da46cc027b 100644 --- a/examples/with-vitest/README.md +++ b/examples/with-vitest/README.md @@ -33,3 +33,13 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut ```bash npm test ``` + +```bash +yarn test +``` + +```bash +pnpm test +``` + +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/examples/with-xstate/README.md b/examples/with-xstate/README.md index 73e59cb592902..57f661c2c099d 100644 --- a/examples/with-xstate/README.md +++ b/examples/with-xstate/README.md @@ -34,6 +34,8 @@ You could use the inspection tools for XState: ([`@xstate/inspect`](https://xsta npm install @xstate/inspect # or yarn add @xstate/inspect +# or +pnpm add @xstate/inspect ``` #### Import it at the top of the project diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md index 798fec5c1a0fd..7bf4a4f42bcc2 100644 --- a/examples/with-zones/README.md +++ b/examples/with-zones/README.md @@ -41,6 +41,9 @@ npm install && npm run dev # or cd home yarn && yarn dev +# or +cd home +pnpm install && pnpm dev ``` The `/home` app should be up and running in [http://localhost:3000](http://localhost:3000)! @@ -53,6 +56,9 @@ npm install && npm run dev # or cd blog yarn && yarn dev +# or +cd blog +pnpm install && pnpm dev ``` The `blog` app should be up and running in [http://localhost:4000/blog](http://localhost:4000/blog)!