Updated create-next-app docs to include pnpm usage (#35755)

This PR updates the docs and examples for `create-next-app` to include pnpm usage.

The following script was used to update every example README:

```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')

for (let example of examples) {
    const filename = `./examples/${example}/README.md`
    const markdown = fs.readFileSync(filename, 'utf8')
    const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
    const output = markdown.replace(regex, (yarn, group) => {
        const pnpm = `pnpm create next-app -- --example ${group}`
        return `${yarn}\n# or\n${pnpm}`
    })
    fs.writeFileSync(filename, output)
}
```

contributing.md

@@ -246,6 +246,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 # or
 yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
+# or
+pnpm 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)).

docs/api-reference/create-next-app.md

@@ -10,6 +10,8 @@ The easiest way to get started with Next.js is by using `create-next-app`. This
 npx create-next-app@latest
 # or
 yarn create next-app
+# or
+pnpm create next-app
 ```
 
 You can create a [TypeScript project](https://github.com/vercel/next.js/blob/canary/docs/basic-features/typescript.md) with the `--ts, --typescript` flag:
@@ -18,6 +20,8 @@ You can create a [TypeScript project](https://github.com/vercel/next.js/blob/can
 npx create-next-app@latest --ts
 # or
 yarn create next-app --typescript
+# or
+pnpm create next-app -- --ts
 ```
 
 ### Options

docs/basic-features/typescript.md

@@ -27,6 +27,8 @@ You can create a TypeScript project with [`create-next-app`](https://nextjs.org/
 npx create-next-app@latest --ts
 # or
 yarn create next-app --typescript
+# or
+pnpm create next-app -- --ts
 ```
 
 ## Existing projects

docs/getting-started.md

@@ -25,6 +25,8 @@ We recommend creating a new Next.js app using `create-next-app`, which sets up e
 npx create-next-app@latest
 # or
 yarn create next-app
+# or
+pnpm create next-app
 ```
 
 If you want to start with a TypeScript project you can use the `--typescript` flag:
@@ -33,6 +35,8 @@ If you want to start with a TypeScript project you can use the `--typescript` fl
 npx create-next-app@latest --typescript
 # or
 yarn create next-app --typescript
+# or
+pnpm create next-app -- --typescript
 ```
 
 After the installation is complete:

examples/active-class-name/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example active-class-name active-class-name-app
 # or
 yarn create next-app --example active-class-name active-class-name-app
+# or
+pnpm create next-app -- --example active-class-name active-class-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)).

examples/amp-first/README.md

@@ -21,6 +21,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example amp-first amp-first-app
 # or
 yarn create next-app --example amp-first amp-first-app
+# or
+pnpm create next-app -- --example amp-first amp-first-app
 ```
 
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits. You will also see AMP validation errors in the console.

examples/amp-story/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example amp-story amp-story-app
 # or
 yarn create next-app --example amp-story amp-story-app
+# or
+pnpm create next-app -- --example amp-story amp-story-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)).

examples/amp/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example amp amp-app
 # or
 yarn create next-app --example amp amp-app
+# or
+pnpm create next-app -- --example amp amp-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)).

examples/analyze-bundles/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example analyze-bundles analyze-bundles-app
 # or
 yarn create next-app --example analyze-bundles analyze-bundles-app
+# or
+pnpm create next-app -- --example analyze-bundles analyze-bundles-app
 ```
 
 ### Analyze webpack output

examples/api-routes-apollo-server-and-client-auth/README.md

@@ -18,6 +18,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-auth-app
 # or
 yarn create next-app --example api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-auth-app
+# or
+pnpm create next-app -- --example api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-auth-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)).

examples/api-routes-apollo-server-and-client/README.md

@@ -18,6 +18,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-apollo-server-and-client api-routes-apollo-server-and-client-app
 # or
 yarn create next-app --example api-routes-apollo-server-and-client api-routes-apollo-server-and-client-app
+# or
+pnpm create next-app -- --example api-routes-apollo-server-and-client api-routes-apollo-server-and-client-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)).

examples/api-routes-apollo-server/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-apollo-server api-routes-apollo-server-app
 # or
 yarn create next-app --example api-routes-apollo-server api-routes-apollo-server-app
+# or
+pnpm create next-app -- --example api-routes-apollo-server api-routes-apollo-server-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)).

examples/api-routes-cors/README.md

@@ -18,6 +18,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-cors api-routes-cors-app
 # or
 yarn create next-app --example api-routes-cors api-routes-cors-app
+# or
+pnpm create next-app -- --example api-routes-cors api-routes-cors-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)).

examples/api-routes-graphql/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-graphql api-routes-graphql-app
 # or
 yarn create next-app --example api-routes-graphql api-routes-graphql-app
+# or
+pnpm create next-app -- --example api-routes-graphql api-routes-graphql-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)).

examples/api-routes-middleware/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-middleware api-routes-middleware-app
 # or
 yarn create next-app --example api-routes-middleware api-routes-middleware-app
+# or
+pnpm create next-app -- --example api-routes-middleware api-routes-middleware-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)).

examples/api-routes-rate-limit/README.md

@@ -30,6 +30,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-rate-limit api-routes-rate-limit-app
 # or
 yarn create next-app --example api-routes-rate-limit api-routes-rate-limit-app
+# or
+pnpm create next-app -- --example api-routes-rate-limit api-routes-rate-limit-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)).

examples/api-routes-rest/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes-rest api-routes-rest-app
 # or
 yarn create next-app --example api-routes-rest api-routes-rest-app
+# or
+pnpm create next-app -- --example api-routes-rest api-routes-rest-app
 ```
 
 ### Deploy to Vercel

examples/api-routes/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example api-routes api-routes-app
 # or
 yarn create next-app --example api-routes api-routes-app
+# or
+pnpm create next-app -- --example api-routes api-routes-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)).

examples/auth0/README.md

@@ -19,6 +19,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example auth0 auth0-app
 # or
 yarn create next-app --example auth0 auth0-app
+# or
+pnpm create next-app -- --example auth0 auth0-app
 ```
 
 ## Configuring Auth0

examples/basic-css/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example basic-css basic-css-app
 # or
 yarn create next-app --example basic-css basic-css-app
+# or
+pnpm create next-app -- --example basic-css basic-css-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)).

examples/basic-export/README.md

@@ -16,6 +16,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example basic-export basic-export-app
 # or
 yarn create next-app --example basic-export basic-export-app
+# or
+pnpm create next-app -- --example basic-export basic-export-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)).

examples/blog-starter-typescript/README.md

@@ -22,6 +22,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example blog-starter-typescript blog-starter-typescript-app
 # or
 yarn create next-app --example blog-starter-typescript blog-starter-typescript-app
+# or
+pnpm create next-app -- --example blog-starter-typescript blog-starter-typescript-app
 ```
 
 Your blog 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).

examples/blog-starter/README.md

@@ -47,6 +47,8 @@ or
 
 ```
 yarn create next-app --example blog-starter blog-starter-app
+# or
+pnpm create next-app -- --example blog-starter blog-starter-app
 
 ```
 

examples/blog/README.md

@@ -31,6 +31,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example blog my-blog
 # or
 yarn create next-app --example blog my-blog
+# or
+pnpm create next-app -- --example blog my-blog
 ```
 
 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)).

examples/catch-all-routes/README.md

@@ -25,6 +25,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example catch-all-routes catch-all-routes-app
 # or
 yarn create next-app --example catch-all-routes catch-all-routes-app
+# or
+pnpm create next-app -- --example catch-all-routes catch-all-routes-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)).

examples/cms-agilitycms/README.md

@@ -42,6 +42,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-agilitycms cms-agilitycms-app
 # or
 yarn create next-app --example cms-agilitycms cms-agilitycms-app
+# or
+pnpm create next-app -- --example cms-agilitycms cms-agilitycms-app
 ```
 
 ## Configuration

examples/cms-builder-io/README.md

@@ -14,6 +14,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-builder-io cms-builder-io-app
 # or
 yarn create next-app --example cms-builder-io cms-builder-io-app
+# or
+pnpm create next-app -- --example cms-builder-io cms-builder-io-app
 ```
 
 ## Configuration

examples/cms-buttercms/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-buttercms cms-buttercms-app
 # or
 yarn create next-app --example cms-buttercms cms-buttercms-app
+# or
+pnpm create next-app -- --example cms-buttercms cms-buttercms-app
 ```
 
 ## Configuration

examples/cms-contentful/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-contentful cms-contentful-app
 # or
 yarn create next-app --example cms-contentful cms-contentful-app
+# or
+pnpm create next-app -- --example cms-contentful cms-contentful-app
 ```
 
 ## Configuration

examples/cms-cosmic/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-cosmic cms-cosmic-app
 # or
 yarn create next-app --example cms-cosmic cms-cosmic-app
+# or
+pnpm create next-app -- --example cms-cosmic cms-cosmic-app
 ```
 
 ## Configuration

examples/cms-datocms/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-datocms cms-datocms-app
 # or
 yarn create next-app --example cms-datocms cms-datocms-app
+# or
+pnpm create next-app -- --example cms-datocms cms-datocms-app
 ```
 
 ## Configuration

examples/cms-drupal/README.md

@@ -38,6 +38,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-drupal cms-drupal-app
 # or
 yarn create next-app --example cms-drupal cms-drupal-app
+# or
+pnpm create next-app -- --example cms-drupal cms-drupal-app
 ```
 
 ## Setup Drupal

examples/cms-ghost/README.md

@@ -37,6 +37,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-ghost cms-ghost-app
 # or
 yarn create next-app --example cms-ghost cms-ghost-app
+# or
+pnpm create next-app -- --example cms-ghost cms-ghost-app
 ```
 
 ### Setp 1. Run Next.js in development mode

examples/cms-graphcms/README.md

@@ -42,6 +42,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-graphcms cms-graphcms-app
 # or
 yarn create next-app --example cms-graphcms cms-graphcms-app
+# or
+pnpm create next-app -- --example cms-graphcms cms-graphcms-app
 ```
 
 ## Configuration

examples/cms-kontent/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-kontent cms-kontent-app
 # or
 yarn create next-app --example cms-kontent cms-kontent-app
+# or
+pnpm create next-app -- --example cms-kontent cms-kontent-app
 ```
 
 ## Configuration

examples/cms-prepr/README.md

@@ -41,6 +41,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-prepr cms-prepr-app
 # or
 yarn create next-app --example cms-prepr cms-prepr-app
+# or
+pnpm create next-app -- --example cms-prepr cms-prepr-app
 ```
 
 ## Configuration

examples/cms-prismic/README.md

@@ -38,6 +38,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-prismic cms-prismic-app
 # or
 yarn create next-app --example cms-prismic cms-prismic-app
+# or
+pnpm create next-app -- --example cms-prismic cms-prismic-app
 ```
 
 ## Configuration

examples/cms-sanity/README.md

@@ -45,6 +45,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-sanity cms-sanity-app
 # or
 yarn create next-app --example cms-sanity cms-sanity-app
+# or
+pnpm create next-app -- --example cms-sanity cms-sanity-app
 ```
 
 ## Configuration

examples/cms-storyblok/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-storyblok cms-storyblok-app
 # or
 yarn create next-app --example cms-storyblok cms-storyblok-app
+# or
+pnpm create next-app -- --example cms-storyblok cms-storyblok-app
 ```
 
 ## Configuration

examples/cms-strapi/README.md

@@ -39,6 +39,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-strapi cms-strapi-app
 # or
 yarn create next-app --example cms-strapi cms-strapi-app
+# or
+pnpm create next-app -- --example cms-strapi cms-strapi-app
 ```
 
 ## Configuration

examples/cms-takeshape/README.md

@@ -38,6 +38,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-takeshape cms-takeshape-app
 # or
 yarn create next-app --example cms-takeshape cms-takeshape-app
+# or
+pnpm create next-app -- --example cms-takeshape cms-takeshape-app
 ```
 
 ## Configuration

examples/cms-tina/README.md

@@ -31,6 +31,8 @@ Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packag
 npx create-next-app --example cms-tina cms-tina-app
 # or
 yarn create next-app --example cms-ghost cms-tina-app
+# or
+pnpm create next-app -- --example cms-ghost cms-tina-app
 ```
 
 ### Setp 1. Run Next.js in development mode