Suggest npx over npm init (vercel#13637)

This updates old examples to the more universal `npx` command.

Fixes vercel#12103

contributing.md

@@ -143,7 +143,7 @@ Deploy the example using [Vercel](https://vercel.com/now):
 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:
 
 ```bash
-npm init next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
+npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 # or
 yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 ```

examples/active-class-name/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example active-class-name active-class-name-app
+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
 ```

examples/amp-first/README.md

@@ -20,7 +20,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example amp-first amp-first-app
+npx create-next-app --example amp-first amp-first-app
 # or
 yarn create next-app --example amp-first amp-first-app
 ```

examples/amp-story/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example amp-story amp-app
+npx create-next-app --example amp-story amp-app
 # or
 yarn create next-app --example amp-story amp-app
 ```

examples/amp/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example amp amp-app
+npx create-next-app --example amp amp-app
 # or
 yarn create next-app --example amp amp-app
 ```

examples/analyze-bundles/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example analyze-bundles analyze-bundles-app
+npx create-next-app --example analyze-bundles analyze-bundles-app
 # or
 yarn create next-app --example analyze-bundles analyze-bundles-app
 ```

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

@@ -16,7 +16,7 @@ https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
 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:
 
 ```bash
-npm init next-app --example api-routes-apollo-server-and-client api-routes-apollo-server-and-client-app
+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
 ```

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

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes-apollo-server api-routes-apollo-server-app
+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
 ```

examples/api-routes-cors/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes-cors api-routes-cors-app
+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
 ```

examples/api-routes-graphql/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes-graphql api-routes-graphql-app
+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
 ```

examples/api-routes-middleware/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes-middleware api-routes-middleware-app
+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
 ```

examples/api-routes-rest/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes-rest api-routes-rest-app
+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
 ```

examples/api-routes/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example api-routes api-routes-app
+npx create-next-app --example api-routes api-routes-app
 # or
 yarn create next-app --example api-routes api-routes-app
 ```

examples/auth0/README.md

@@ -9,7 +9,7 @@ Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](
 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:
 
 ```bash
-npm init next-app --example auth0 auth0
+npx create-next-app --example auth0 auth0
 # or
 yarn create next-app --example auth0 auth0
 ```

examples/basic-css/README.md

@@ -17,7 +17,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example basic-css basic-css-app
+npx create-next-app --example basic-css basic-css-app
 # or
 yarn create next-app --example basic-css basic-css-app
 ```

examples/basic-export/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example basic-export basic-export-app
+npx create-next-app --example basic-export basic-export-app
 # or
 yarn create next-app --example basic-export basic-export-app
 ```

examples/blog-starter-typescript/README.md

@@ -15,7 +15,7 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a
 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:
 
 ```bash
-npm init next-app --example blog-starter-typescript blog-starter-typescript-app
+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
 ```

examples/blog-starter/README.md

@@ -25,7 +25,7 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a
 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:
 
 ```bash
-npm init next-app --example blog-starter blog-starter-app
+npx create-next-app --example blog-starter blog-starter-app
 # or
 yarn create next-app --example blog-starter blog-starter-app
 ```

examples/catch-all-routes/README.md

@@ -24,7 +24,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example catch-all-routes catch-all-routes-app
+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
 ```

examples/cms-contentful/README.md

@@ -19,7 +19,7 @@ This example showcases Next.js's [Static Generation](/docs/basic-features/pages.
 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:
 
 ```bash
-npm init next-app --example cms-contentful cms-contentful-app
+npx create-next-app --example cms-contentful cms-contentful-app
 # or
 yarn create next-app --example cms-contentful cms-contentful-app
 ```

examples/cms-datocms/README.md

@@ -20,7 +20,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 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:
 
 ```bash
-npm init next-app --example cms-datocms cms-datocms-app
+npx create-next-app --example cms-datocms cms-datocms-app
 # or
 yarn create next-app --example cms-datocms cms-datocms-app
 ```

examples/cms-prismic/README.md

@@ -21,7 +21,7 @@ This example showcases Next.js's [Static Generation](/docs/basic-features/pages.
 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:
 
 ```bash
-npm init next-app --example cms-prismic cms-prismic-app
+npx create-next-app --example cms-prismic cms-prismic-app
 # or
 yarn create next-app --example cms-prismic cms-prismic-app
 ```

examples/cms-sanity/README.md

@@ -21,7 +21,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 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:
 
 ```bash
-npm init next-app --example cms-sanity cms-sanity-app
+npx create-next-app --example cms-sanity cms-sanity-app
 # or
 yarn create next-app --example cms-sanity cms-sanity-app
 ```

examples/cms-takeshape/README.md

@@ -21,7 +21,7 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 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:
 
 ```bash
-npm init next-app --example cms-takeshape cms-takeshape-app
+npx create-next-app --example cms-takeshape cms-takeshape-app
 # or
 yarn create next-app --example cms-takeshape cms-takeshape-app
 ```

examples/custom-server-actionhero/README.md

@@ -12,7 +12,7 @@ A more detailed example showcasing how to use fetch and web sockets to interact
 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:
 
 ```bash
-npm init next-app --example custom-server-actionhero custom-server-actionhero-app
+npx create-next-app --example custom-server-actionhero custom-server-actionhero-app
 # or
 yarn create next-app --example custom-server-actionhero custom-server-actionhero-app
 ```

examples/custom-server-express/README.md

@@ -13,7 +13,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server-express custom-server-express-app
+npx create-next-app --example custom-server-express custom-server-express-app
 # or
 yarn create next-app --example custom-server-express custom-server-express-app
 ```

examples/custom-server-fastify/README.md

@@ -13,7 +13,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server-fastify custom-server-fastify-app
+npx create-next-app --example custom-server-fastify custom-server-fastify-app
 # or
 yarn create next-app --example custom-server-fastify custom-server-fastify-app
 ```

examples/custom-server-hapi/README.md

@@ -13,7 +13,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server-hapi custom-server-hapi-app
+npx create-next-app --example custom-server-hapi custom-server-hapi-app
 # or
 yarn create next-app --example custom-server-hapi custom-server-hapi-app
 ```

examples/custom-server-koa/README.md

@@ -13,7 +13,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server-koa custom-server-koa-app
+npx create-next-app --example custom-server-koa custom-server-koa-app
 # or
 yarn create next-app --example custom-server-koa custom-server-koa-app
 ```

examples/custom-server-polka/README.md

@@ -13,7 +13,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server-polka custom-server-polka-app
+npx create-next-app --example custom-server-polka custom-server-polka-app
 # or
 yarn create next-app --example custom-server-polka custom-server-polka-app
 ```

examples/custom-server-typescript/README.md

@@ -12,7 +12,7 @@ The second directory should be added to `.gitignore`.
 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:
 
 ```bash
-npm init next-app --example custom-server-typescript custom-server-typescript-app
+npx create-next-app --example custom-server-typescript custom-server-typescript-app
 # or
 yarn create next-app --example custom-server-typescript custom-server-typescript-app
 ```

examples/custom-server/README.md

@@ -11,7 +11,7 @@ The example shows a server that serves the component living in `pages/a.js` when
 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:
 
 ```bash
-npm init next-app --example custom-server custom-server-app
+npx create-next-app --example custom-server custom-server-app
 # or
 yarn create next-app --example custom-server custom-server-app
 ```

examples/data-fetch/README.md

@@ -18,7 +18,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example data-fetch data-fetch-app
+npx create-next-app --example data-fetch data-fetch-app
 # or
 yarn create next-app --example data-fetch data-fetch-app
 ```

examples/dynamic-routing/README.md

@@ -23,7 +23,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example dynamic-routing dynamic-routing-app
+npx create-next-app --example dynamic-routing dynamic-routing-app
 # or
 yarn create next-app --example dynamic-routing dynamic-routing-app
 ```

examples/gh-pages/README.md

@@ -9,7 +9,7 @@ This example shows the most basic idea behind Next. We have 2 pages: `pages/inde
 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:
 
 ```bash
-npm init next-app --example gh-pages gh-pages-app
+npx create-next-app --example gh-pages gh-pages-app
 # or
 yarn create next-app --example gh-pages gh-pages-app
 ```

examples/head-elements/README.md

@@ -17,7 +17,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example head-elements head-elements-app
+npx create-next-app --example head-elements head-elements-app
 # or
 yarn create next-app --example head-elements head-elements-app
 ```

examples/hello-world/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example hello-world hello-world-app
+npx create-next-app --example hello-world hello-world-app
 # or
 yarn create next-app --example hello-world hello-world-app
 ```

examples/layout-component/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com):
 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:
 
 ```bash
-npm init next-app --example layout-component layout-component-app
+npx create-next-app --example layout-component layout-component-app
 # or
 yarn create next-app --example layout-component layout-component-app
 ```