diff --git a/contributing.md b/contributing.md
index 6ca78b5a2e67999..8d1d05d6fe13a8e 100644
--- a/contributing.md
+++ b/contributing.md
@@ -12,6 +12,8 @@ Our Commitment to Open Source can be found [here](https://zeit.co/blog/oss)
> You may need to run `yarn types` again if your types get outdated.
+To contribute to [our examples](examples), take a look at the [“Adding examples” section](#adding-examples).
+
## To run tests
Make sure you have `chromedriver` installed for your Chrome version. You can install it with
@@ -112,3 +114,62 @@ EXAMPLE=./test/integration/basic
```sh
yarn install --force
```
+
+## Adding examples
+
+When you add an example to the [examples](examples) directory, don’t forget to add a `README.md` file with the following format:
+
+- Replace `DIRECTORY_NAME` with the directory name you’re adding.
+- Fill in `Example Name` and `Description`.
+- To add additional installation instructions, please add it where appropriate.
+- To add additional notes, add `## Notes` section at the end.
+- Remove the `Deploy your own` section if your example can’t be immediately deployed to ZEIT Now.
+
+````markdown
+# Example Name
+
+Description
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/DIRECTORY_NAME)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/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
+npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
+# or
+yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/DIRECTORY_NAME
+cd DIRECTORY_NAME
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+````
diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
index a822eae9ad6f346..f18cff6a5c74c40 100644
--- a/examples/active-class-name/README.md
+++ b/examples/active-class-name/README.md
@@ -1,5 +1,7 @@
# activeClassName example
+ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example active-class-name active-class-name-app
+npm init next-app --example active-class-name active-class-name-app
# or
yarn create next-app --example active-class-name active-class-name-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-ReactRouter has a convenience property on the `Link` element to allow an author to set the _active_ className on a link. This example replicates that functionality using Next's own `Link`.
diff --git a/examples/amp-first/README.md b/examples/amp-first/README.md
index 369cfb40665c4f4..a3599e527efc9dc 100644
--- a/examples/amp-first/README.md
+++ b/examples/amp-first/README.md
@@ -13,12 +13,35 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/amp-first)
-## Getting started
+## How to use
-To run the app in development, run the following command in the project director:
+### Using `create-next-app`
-```shell
-$ yarn dev
+Execute [`create-next-app`](https://github.com/zeit/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
+# or
+yarn create next-app --example amp-first amp-first-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/amp-first
+cd amp-first
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
```
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.
diff --git a/examples/amp-story/README.md b/examples/amp-story/README.md
index be4c74f9095ea9c..816c6febe43110f 100644
--- a/examples/amp-story/README.md
+++ b/examples/amp-story/README.md
@@ -1,5 +1,7 @@
# Google AMP Story
+This example shows how to create an AMP page with `amp-story` using Next.js and the AMP feature.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example amp-story amp-app
+npm init next-app --example amp-story amp-app
# or
yarn create next-app --example amp-story amp-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to create an AMP page with `amp-story` using Next.js and the AMP feature.
diff --git a/examples/amp/README.md b/examples/amp/README.md
index 5aa3fd6c327c710..b828d6d6c537373 100644
--- a/examples/amp/README.md
+++ b/examples/amp/README.md
@@ -1,5 +1,7 @@
# Google AMP
+This example shows how to create AMP pages using Next.js and the AMP feature. It shows a normal page (non-AMP), an AMP only page, and a hybrid AMP page.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example amp amp-app
+npm init next-app --example amp amp-app
# or
yarn create next-app --example amp amp-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to create AMP pages using Next.js and the AMP feature. It shows a normal page (non-AMP), an AMP only page, and a hybrid AMP page.
diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md
index eda6eea533b1354..445051ff5c1fc63 100644
--- a/examples/analyze-bundles/README.md
+++ b/examples/analyze-bundles/README.md
@@ -1,5 +1,7 @@
# Analyzer Bundles example
+This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/zeit/next.js/tree/master/packages/next-bundle-analyzer)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example analyze-bundles analyze-bundles-app
+npm init next-app --example analyze-bundles analyze-bundles-app
# or
yarn create next-app --example analyze-bundles analyze-bundles-app
```
@@ -37,9 +39,7 @@ yarn
yarn dev
```
-## The idea behind the example
-
-This example shows how to analyze the output bundles using [@next/bundle-analyzer](https://github.com/zeit/next.js/tree/master/packages/next-bundle-analyzer)
+### Analyze webpack output
To analyze your webpack output, invoke the following command:
diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md
index 325f085eacb9ecc..b1d07a06b974a3e 100644
--- a/examples/api-routes-apollo-server-and-client/README.md
+++ b/examples/api-routes-apollo-server-and-client/README.md
@@ -1,5 +1,14 @@
# Apollo Server and Client Example
+[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
+
+In this simple example, we integrate Apollo seamlessly with Next by wrapping our _pages/\_app.js_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
+
+On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
+
+Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
+https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +19,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes-apollo-server-and-client api-routes-apollo-server-and-client-app
+npm init 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
```
@@ -42,14 +51,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
-
-In this simple example, we integrate Apollo seamlessly with Next by wrapping our _pages/\_app.js_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
-
-On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
-
-Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
-https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
diff --git a/examples/api-routes-graphql/README.md b/examples/api-routes-graphql/README.md
index 66f1bcdd36025a0..ec0442b823311eb 100644
--- a/examples/api-routes-graphql/README.md
+++ b/examples/api-routes-graphql/README.md
@@ -1,5 +1,7 @@
# API routes with GraphQL server
+Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes-graphql api-routes-graphql-app
+npm init next-app --example api-routes-graphql api-routes-graphql-app
# or
yarn create next-app --example api-routes-graphql api-routes-graphql-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [apollo-server-micro](https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-micro) to provide simple GraphQL server consumed by Next.js app.
diff --git a/examples/api-routes-micro/README.md b/examples/api-routes-micro/README.md
index 61f80c35d19a13a..7fb0d0b449cd6ee 100644
--- a/examples/api-routes-micro/README.md
+++ b/examples/api-routes-micro/README.md
@@ -1,5 +1,7 @@
# API routes with Micro example
+Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [Micro](https://github.com/zeit/micro), an `http` server for microservices
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes-micro api-routes-micro-app
+npm init next-app --example api-routes-micro api-routes-micro-app
# or
yarn create next-app --example api-routes-micro api-routes-micro-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows their usage alongside [Micro](https://github.com/zeit/micro), an `http` server for microservices
diff --git a/examples/api-routes-middleware/README.md b/examples/api-routes-middleware/README.md
index 83ac10eeb72d170..c11e0ff5f3a8abc 100644
--- a/examples/api-routes-middleware/README.md
+++ b/examples/api-routes-middleware/README.md
@@ -1,5 +1,7 @@
# API routes with middleware
+Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how to implement simple `middleware` to wrap around your `API` endpoints.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes-middleware api-routes-middleware-app
+npm init next-app --example api-routes-middleware api-routes-middleware-app
# or
yarn create next-app --example api-routes-middleware api-routes-middleware-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how to implement simple `middleware` to wrap around your `API` endpoints.
diff --git a/examples/api-routes-rest/README.md b/examples/api-routes-rest/README.md
index f1422c294e90009..61902da4db293ec 100644
--- a/examples/api-routes-rest/README.md
+++ b/examples/api-routes-rest/README.md
@@ -1,5 +1,7 @@
# API routes with REST
+Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how it can be used to create your [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) api.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes-rest api-routes-rest-app
+npm init next-app --example api-routes-rest api-routes-rest-app
# or
yarn create next-app --example api-routes-rest api-routes-rest-app
```
@@ -25,7 +27,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes), which provide an easy solution to build your own `API`. This example shows how it can be used to create your [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) api.
diff --git a/examples/api-routes/README.md b/examples/api-routes/README.md
index f7885a7c7116348..8a67988109a77f0 100644
--- a/examples/api-routes/README.md
+++ b/examples/api-routes/README.md
@@ -1,5 +1,7 @@
# Basic API routes example
+Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example api-routes api-routes-app
+npm init next-app --example api-routes api-routes-app
# or
yarn create next-app --example api-routes api-routes-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [API routes](https://github.com/zeit/next.js#api-routes) which provides an easy solution to build your own `API`. This example shows how to create multiple `API` endpoints with serverless functions, which can execute independently.
diff --git a/examples/auth0/README.md b/examples/auth0/README.md
index f120b72e91a6c8f..ef4dfe8be1c38d7 100644
--- a/examples/auth0/README.md
+++ b/examples/auth0/README.md
@@ -6,10 +6,10 @@ Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example auth0 auth0
+npm init next-app --example auth0 auth0
# or
yarn create next-app --example auth0 auth0
```
diff --git a/examples/basic-css/README.md b/examples/basic-css/README.md
index 483c37fc8956a0a..dcf18ca4e64dcf9 100644
--- a/examples/basic-css/README.md
+++ b/examples/basic-css/README.md
@@ -1,5 +1,7 @@
# Basic CSS example
+Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you to write scope styled components with full css support. This is important for the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example basic-css basic-css-app
+npm init next-app --example basic-css basic-css-app
# or
yarn create next-app --example basic-css basic-css-app
```
@@ -42,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
-to write scope styled components with full css support. This is important for
-the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
diff --git a/examples/basic-export/README.md b/examples/basic-export/README.md
index 747032cafc6c50a..7ed82b4597b3821 100644
--- a/examples/basic-export/README.md
+++ b/examples/basic-export/README.md
@@ -1,5 +1,7 @@
# Basic export example
+This example shows the most basic usage of `next export`. Without `exportPathMap`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example basic-export basic-export-app
+npm init next-app --example basic-export basic-export-app
# or
yarn create next-app --example basic-export basic-export-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows the most basic usage of `next export`. Without `exportPathMap`.
diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
index 16de925cd7e1618..5de0a8b380ae51f 100644
--- a/examples/blog-starter/README.md
+++ b/examples/blog-starter/README.md
@@ -1,5 +1,11 @@
# Blog starter example
+This is an example of a blog built with Next.js. [Read more about the motivation and how it is built](https://jolvera.dev/posts/rebuilding-my-blog-with-nextjs).
+
+The blog is still barebones and need more improvements and styling, but this should be enough to get you started.
+
+[Demo deployed in Now](https://nextjs-blog-starter.now.sh/)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,11 +16,12 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Download [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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:
-```
-npm i -g create-next-app
-create-next-app --example blog-starter
+```bash
+npm init next-app --example blog-starter blog-starter-app
+# or
+yarn create next-app --example blog-starter blog-starter-app
```
### Download manually
@@ -42,11 +49,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This is an example of a blog built with Next.js. [Read more about the motivation and how it is built](https://jolvera.dev/posts/rebuilding-my-blog-with-nextjs).
-
-The blog is still barebones and need more improvements and styling, but this should be enough to get you started.
-
-[Demo deployed in Now](https://nextjs-blog-starter.now.sh/)
diff --git a/examples/custom-charset/README.md b/examples/custom-charset/README.md
index 7e9d3b7667a343b..52436a27df0e253 100644
--- a/examples/custom-charset/README.md
+++ b/examples/custom-charset/README.md
@@ -1,13 +1,18 @@
# Custom server example
+The HTTP/1.1 specification says - if charset is not set in the http header then the browser defaults use ISO-8859-1.
+For languages like Polish, Albanian, Hungarian, Czech, Slovak, Slovene, there will be broken characters encoding from SSR.
+
+You can overwrite Content-Type in getInitialProps. But if you want to handle it as a server side concern, you can use this as an simple example.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-charset custom-charset-app
+npm init next-app --example custom-charset custom-charset-app
# or
yarn create next-app --example custom-charset custom-charset-app
```
@@ -36,10 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The HTTP/1.1 specification says - if charset is not set in the http header then the browser defaults use ISO-8859-1.
-For languages like Polish, Albanian, Hungarian, Czech, Slovak, Slovene, there will be broken characters encoding from SSR.
-
-You can overwrite Content-Type in getInitialProps. But if you want to handle it as a server side concern, you can use this as an simple example.
diff --git a/examples/custom-server-actionhero/README.md b/examples/custom-server-actionhero/README.md
index 5c2067d9d5b0736..a41794570df6f65 100644
--- a/examples/custom-server-actionhero/README.md
+++ b/examples/custom-server-actionhero/README.md
@@ -9,10 +9,10 @@ A more detailed example showcasing how to use fetch and web sockets to interact
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-actionhero custom-server-actionhero-app
+npm init next-app --example custom-server-actionhero custom-server-actionhero-app
# or
yarn create next-app --example custom-server-actionhero custom-server-actionhero-app
```
diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md
index 0ad50f6e2ac1a87..090bff8f1b2a748 100644
--- a/examples/custom-server-express/README.md
+++ b/examples/custom-server-express/README.md
@@ -1,13 +1,19 @@
# Custom Express Server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-express custom-server-express-app
+npm init next-app --example custom-server-express custom-server-express-app
# or
yarn create next-app --example custom-server-express custom-server-express-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/custom-server-fastify/README.md b/examples/custom-server-fastify/README.md
index e6807325b602b76..a59590ba63e55f5 100644
--- a/examples/custom-server-fastify/README.md
+++ b/examples/custom-server-fastify/README.md
@@ -1,13 +1,19 @@
# Custom Fastify Server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Fastify](https://github.com/fastify/fastify) to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-fastify custom-server-fastify-app
+npm init next-app --example custom-server-fastify custom-server-fastify-app
# or
yarn create next-app --example custom-server-fastify custom-server-fastify-app
```
@@ -37,11 +43,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Fastify](https://github.com/fastify/fastify) to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/custom-server-hapi/README.md b/examples/custom-server-hapi/README.md
index 4f049db126ab264..5f69a48c9ce1cb6 100644
--- a/examples/custom-server-hapi/README.md
+++ b/examples/custom-server-hapi/README.md
@@ -1,13 +1,19 @@
# Custom server using Hapi example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Hapi](https://hapijs.com) to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-hapi custom-server-hapi-app
+npm init next-app --example custom-server-hapi custom-server-hapi-app
# or
yarn create next-app --example custom-server-hapi custom-server-hapi-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Hapi](https://hapijs.com) to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/custom-server-koa/README.md b/examples/custom-server-koa/README.md
index 13a693d3869ed98..7bb2f74ff6e86d8 100644
--- a/examples/custom-server-koa/README.md
+++ b/examples/custom-server-koa/README.md
@@ -1,13 +1,19 @@
# Custom Koa Server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](http://koajs.com/) to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-koa custom-server-koa-app
+npm init next-app --example custom-server-koa custom-server-koa-app
# or
yarn create next-app --example custom-server-koa custom-server-koa-app
```
@@ -37,14 +43,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using [Koa](http://koajs.com/) to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
-
## Side note: Enabling gzip compression
The most common Koa middleware for handling the gzip compression is [compress](https://github.com/koajs/compress), but unfortunately it is currently not compatible with Next.
diff --git a/examples/custom-server-micro/README.md b/examples/custom-server-micro/README.md
index 8d65ad9b4f2cefa..544a2bfb646573f 100644
--- a/examples/custom-server-micro/README.md
+++ b/examples/custom-server-micro/README.md
@@ -1,13 +1,19 @@
# Custom Micro Server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using micro and micro-route to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-micro custom-server-micro-app
+npm init next-app --example custom-server-micro custom-server-micro-app
# or
yarn create next-app --example custom-server-micro custom-server-micro-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using micro and micro-route to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/custom-server-nodemon/README.md b/examples/custom-server-nodemon/README.md
index d77a5d5e21a9057..8c509a358123379 100644
--- a/examples/custom-server-nodemon/README.md
+++ b/examples/custom-server-nodemon/README.md
@@ -1,13 +1,15 @@
# Custom server with Nodemon example
+The example shows how you can apply [Nodemon](https://nodemon.io/) to a custom server to have live reload of the server code without being affected by the Next.js universal code.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-nodemon custom-server-nodemon-app
+npm init next-app --example custom-server-nodemon custom-server-nodemon-app
# or
yarn create next-app --example custom-server-nodemon custom-server-nodemon-app
```
@@ -36,7 +38,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The example shows how you can apply [Nodemon](https://nodemon.io/) to a custom server to have live reload of the server code without being affected by the Next.js universal code.
diff --git a/examples/custom-server-polka/README.md b/examples/custom-server-polka/README.md
index 41a4c71dfaf8cbf..49bb96cf758168a 100644
--- a/examples/custom-server-polka/README.md
+++ b/examples/custom-server-polka/README.md
@@ -1,13 +1,19 @@
# Custom [Polka](https://github.com/lukeed/polka) Server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-polka custom-server-polka-app
+npm init next-app --example custom-server-polka custom-server-polka-app
# or
yarn create next-app --example custom-server-polka custom-server-polka-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/custom-server-reasonml/README.md b/examples/custom-server-reasonml/README.md
index ab2544164e9edab..333011f9847c6cc 100644
--- a/examples/custom-server-reasonml/README.md
+++ b/examples/custom-server-reasonml/README.md
@@ -1,13 +1,19 @@
# Custom server ReasonML example
+ReasonML is an exciting new language. Since it can compile directly to JS via [BuckleScript](https://bucklescript.github.io/en/),
+we can power our backend server with ReasonML and also build the frontend with
+[ReasonReact](https://reasonml.github.io/reason-react/en/) (covered in the [with-reasonml example](https://github.com/zeit/next.js/tree/canary/examples/with-reasonml)).
+
+This example shows how powerful and helpful it is to build a Next.js custom server with a typesafe language. It is based off the [custom-server example](https://github.com/zeit/next.js/tree/canary/examples/custom-server) that uses pure Node.js to build the custom server.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-reasonml custom-server-reasonml-app
+npm init next-app --example custom-server-reasonml custom-server-reasonml-app
# or
yarn create next-app --example custom-server-reasonml custom-server-reasonml-app
```
@@ -58,11 +64,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind this example
-
-ReasonML is an exciting new language. Since it can compile directly to JS via [BuckleScript](https://bucklescript.github.io/en/),
-we can power our backend server with ReasonML and also build the frontend with
-[ReasonReact](https://reasonml.github.io/reason-react/en/) (covered in the [with-reasonml example](https://github.com/zeit/next.js/tree/canary/examples/with-reasonml)).
-
-This example shows how powerful and helpful it is to build a Next.js custom server with a typesafe language. It is based off the [custom-server example](https://github.com/zeit/next.js/tree/canary/examples/custom-server) that uses pure Node.js to build the custom server.
diff --git a/examples/custom-server-typescript/README.md b/examples/custom-server-typescript/README.md
index 6f10728bb270455..b77a6c48d8c5da6 100644
--- a/examples/custom-server-typescript/README.md
+++ b/examples/custom-server-typescript/README.md
@@ -1,13 +1,18 @@
# Custom server with TypeScript + Nodemon example
+The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
+
+Server entry point is `server/index.ts` in development and `dist/index.js` in production.
+The second directory should be added to `.gitignore`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server-typescript custom-server-typescript-app
+npm init next-app --example custom-server-typescript custom-server-typescript-app
# or
yarn create next-app --example custom-server-typescript custom-server-typescript-app
```
@@ -36,10 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
-
-Server entry point is `server/index.ts` in development and `dist/index.js` in production.
-The second directory should be added to `.gitignore`.
diff --git a/examples/custom-server/README.md b/examples/custom-server/README.md
index 29452a0d8be0c68..8c9e8bf7c9f505e 100644
--- a/examples/custom-server/README.md
+++ b/examples/custom-server/README.md
@@ -1,13 +1,17 @@
# Custom server example
+Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
+
+The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example custom-server custom-server-app
+npm init next-app --example custom-server custom-server-app
# or
yarn create next-app --example custom-server custom-server-app
```
@@ -36,9 +40,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can customize as much as you want.
-
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
diff --git a/examples/data-fetch/README.md b/examples/data-fetch/README.md
index 3ee3ac9782c02be..ec0a093d03bb278 100644
--- a/examples/data-fetch/README.md
+++ b/examples/data-fetch/README.md
@@ -1,5 +1,10 @@
# Data fetch example
+Next.js was conceived to make it easy to create universal apps. That's why fetching data
+on the server and the client when necessary is so easy with Next.
+
+Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +15,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example data-fetch data-fetch-app
+npm init next-app --example data-fetch data-fetch-app
# or
yarn create next-app --example data-fetch data-fetch-app
```
@@ -42,10 +47,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js was conceived to make it easy to create universal apps. That's why fetching data
-on the server and the client when necessary is so easy with Next.
-
-Using `getInitialProps` fetches data on the server for SSR and then on the client when the component is re-mounted (not on the first paint).
diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md
index 1103444fc183fc2..9d791190e9007bd 100644
--- a/examples/dynamic-routing/README.md
+++ b/examples/dynamic-routing/README.md
@@ -1,5 +1,17 @@
# Dynamic Routing example
+This example shows usage of dynamic routing.
+
+This example contains two dynamic pages:
+
+1. `pages/post/[id]/index.js`
+ - e.g. matches `/post/my-example` (`/post/:id`)
+1. `pages/post/[id]/[comment].js`
+ - e.g. matches `/post/my-example/a-comment` (`/post/:id/:comment`)
+
+These routes are automatically matched by the server.
+You can use `next/link` as displayed in this example to route to these pages client side.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +22,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example dynamic-routing dynamic-routing-app
+npm init next-app --example dynamic-routing dynamic-routing-app
# or
yarn create next-app --example dynamic-routing dynamic-routing-app
```
@@ -42,17 +54,3 @@ Deploy it to the cloud with [Now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows usage of dynamic routing.
-
-This example contains two dynamic pages:
-
-1. `pages/post/[id]/index.js`
- - e.g. matches `/post/my-example` (`/post/:id`)
-1. `pages/post/[id]/[comment].js`
- - e.g. matches `/post/my-example/a-comment` (`/post/:id/:comment`)
-
-These routes are automatically matched by the server.
-You can use `next/link` as displayed in this example to route to these pages client side.
diff --git a/examples/form-handler/README.md b/examples/form-handler/README.md
index 0c37d04eae14579..b75b9c10c982279 100644
--- a/examples/form-handler/README.md
+++ b/examples/form-handler/README.md
@@ -1,13 +1,15 @@
# Form Handler
+Sometimes handle multiple forms can be tricky, the idea is to have a global reducer with the name of each form and the inputs of it; making accessible everywhere.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example form-handler form-handler-app
+npm init next-app --example form-handler form-handler-app
# or
yarn create next-app --example form-handler form-handler-app
```
@@ -36,8 +38,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Sometimes handle multiple forms can be tricky, the idea is to have a global reducer
-with the name of each form and the inputs of it; making accessible everywhere.
diff --git a/examples/gh-pages/README.md b/examples/gh-pages/README.md
index cec9e33ba3637b2..4f4893e09ed301f 100644
--- a/examples/gh-pages/README.md
+++ b/examples/gh-pages/README.md
@@ -1,13 +1,15 @@
# gh-pages Hello World example
+This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example gh-pages gh-pages-app
+npm init next-app --example gh-pages gh-pages-app
# or
yarn create next-app --example gh-pages gh-pages-app
```
@@ -60,7 +62,3 @@ https://github.com/thierryc/Next-gh-page-example/
https://thierryc.github.io/Next-gh-page-example/
```
-
-## The idea behind the example
-
-This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities.
diff --git a/examples/head-elements/README.md b/examples/head-elements/README.md
index c1145f1e274da73..72f04f159545879 100644
--- a/examples/head-elements/README.md
+++ b/examples/head-elements/README.md
@@ -1,5 +1,9 @@
# Head elements example
+For every page you can inject elements into the page head. This way you can add stylesheets, JS scripts, meta tags, a custom title or whatever you think is convenient to add inside the `
` of your page.
+
+This example shows in `pages/index.js` how to add a title and a couple of meta tags.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example head-elements head-elements-app
+npm init next-app --example head-elements head-elements-app
# or
yarn create next-app --example head-elements head-elements-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-For every page you can inject elements into the page head. This way you can add stylesheets, JS scripts, meta tags, a custom title or whatever you think is convenient to add inside the `` of your page.
-
-This example shows in `pages/index.js` how to add a title and a couple of meta tags.
diff --git a/examples/hello-world/README.md b/examples/hello-world/README.md
index c195fea160d4727..f6a38a2b054833d 100644
--- a/examples/hello-world/README.md
+++ b/examples/hello-world/README.md
@@ -1,5 +1,7 @@
# Hello World example
+This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example hello-world hello-world-app
+npm init next-app --example hello-world hello-world-app
# or
yarn create next-app --example hello-world hello-world-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows the most basic idea behind Next. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories.
diff --git a/examples/layout-component/README.md b/examples/layout-component/README.md
index 6ae480355365b5f..d4c50f741a7d016 100644
--- a/examples/layout-component/README.md
+++ b/examples/layout-component/README.md
@@ -1,5 +1,7 @@
# Layout component example
+This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same `` settings, the `` and the ``. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example layout-component layout-component-app
+npm init next-app --example layout-component layout-component-app
# or
yarn create next-app --example layout-component layout-component-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same `` settings, the `` and the ``. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.
diff --git a/examples/nested-components/README.md b/examples/nested-components/README.md
index 38de8491a2a4493..88b3c08da28acec 100644
--- a/examples/nested-components/README.md
+++ b/examples/nested-components/README.md
@@ -1,5 +1,7 @@
# Example app using nested components
+Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.js` that uses `components/paragraph.js` and `components/post.js` that can be styled and managed separately.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example nested-components nested-components-app
+npm init next-app --example nested-components nested-components-app
# or
yarn create next-app --example nested-components nested-components-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.js` that uses `components/paragraph.js` and `components/post.js` that can be styled and managed separately.
diff --git a/examples/only-client-render-external-dependencies/README.md b/examples/only-client-render-external-dependencies/README.md
index e3f843ccddf473f..eb268b5ab07af55 100644
--- a/examples/only-client-render-external-dependencies/README.md
+++ b/examples/only-client-render-external-dependencies/README.md
@@ -1,5 +1,7 @@
# Only client render for external dependencies
+This example shows how to use an external dependency that only allows client-render.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example only-client-render-external-dependencies only-client-render-external-dependencies-app
+npm init next-app --example only-client-render-external-dependencies only-client-render-external-dependencies-app
# or
yarn create next-app --example only-client-render-external-dependencies only-client-render-external-dependencies-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use an external dependency that only allows client-render.
diff --git a/examples/progressive-render/README.md b/examples/progressive-render/README.md
index 60df0570cd49023..1f0404503cb6e07 100644
--- a/examples/progressive-render/README.md
+++ b/examples/progressive-render/README.md
@@ -1,5 +1,21 @@
# Example app implementing progressive server-side render
+Sometimes you want to **not** server render some parts of your application.
+
+For example:
+
+1. Third party components without server render capabilities
+2. Components that depend on `window` or other browser only APIs
+3. Content isn't important enough for the user (eg. below the fold content)
+
+To handle these cases, you can conditionally render your component using the `useEffect` hook.
+
+This example features:
+
+- A custom hook called `useMounted`, implementing this behavior
+- An app with a component that must only be rendered in the client
+- A loading component that will be displayed before rendering the client-only component
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +26,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example progressive-render progressive-render-app
+npm init next-app --example progressive-render progressive-render-app
# or
yarn create next-app --example progressive-render progressive-render-app
```
@@ -42,21 +58,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Sometimes you want to **not** server render some parts of your application.
-
-For example:
-
-1. Third party components without server render capabilities
-2. Components that depend on `window` or other browser only APIs
-3. Content isn't important enough for the user (eg. below the fold content)
-
-To handle these cases, you can conditionally render your component using the `useEffect` hook.
-
-This example features:
-
-- A custom hook called `useMounted`, implementing this behavior
-- An app with a component that must only be rendered in the client
-- A loading component that will be displayed before rendering the client-only component
diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md
index fbfb6b3eae884c4..1ef82ae9821f8e6 100644
--- a/examples/shared-modules/README.md
+++ b/examples/shared-modules/README.md
@@ -1,5 +1,10 @@
# Example app using shared modules
+This example features:
+
+- An app with two pages which has a common Counter component
+- That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +15,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example shared-modules shared-modules-app
+npm init next-app --example shared-modules shared-modules-app
# or
yarn create next-app --example shared-modules shared-modules-app
```
@@ -42,10 +47,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- An app with two pages which has a common Counter component
-- That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime
diff --git a/examples/ssr-caching/README.md b/examples/ssr-caching/README.md
index 6c0062850329db9..38cbc3ab12e38f3 100644
--- a/examples/ssr-caching/README.md
+++ b/examples/ssr-caching/README.md
@@ -1,13 +1,20 @@
# Example app where it caches SSR'ed pages in the memory
+React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache already rendered pages.
+That's what this example demonstrate.
+
+This app uses Next's [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) mode. It also uses [express](https://expressjs.com/) to handle routing and page serving.
+
+Alternatively, see [the example using React ESI](../with-react-esi/).
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example ssr-caching ssr-caching-app
+npm init next-app --example ssr-caching ssr-caching-app
# or
yarn create next-app --example ssr-caching ssr-caching-app
```
@@ -36,12 +43,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-React Server Side rendering is very costly and takes a lot of server's CPU power for that. One of the best solutions for this problem is cache already rendered pages.
-That's what this example demonstrate.
-
-This app uses Next's [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) mode. It also uses [express](https://expressjs.com/) to handle routing and page serving.
-
-Alternatively, see [the example using React ESI](../with-react-esi/).
diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md
index 85617b5bff77bc7..af0ed0ad998757c 100644
--- a/examples/svg-components/README.md
+++ b/examples/svg-components/README.md
@@ -1,5 +1,7 @@
# SVG components example
+This example uses a custom `.babelrc` to add support for importing `.svg` files and rendering them as React components. [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) is used to handle transpiling the SVGs.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example svg-components svg-components-app
+npm init next-app --example svg-components svg-components-app
# or
yarn create next-app --example svg-components svg-components-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example uses a custom `.babelrc` to add support for importing `.svg` files and rendering them as React components. [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) is used to handle transpiling the SVGs.
diff --git a/examples/using-nerv/README.md b/examples/using-nerv/README.md
index 544a6362c05677c..532a1a2fa9de2cb 100644
--- a/examples/using-nerv/README.md
+++ b/examples/using-nerv/README.md
@@ -1,13 +1,19 @@
# Hello World example
+This example uses [Nerv](https://nerv.aotu.io/) instead of React. It's a "blazing fast React alternative, compatible with IE8 and React 16". Here we've customized Next.js to use Nerv instead of React.
+
+Here's how we did it:
+
+- Use `next.config.js` to customize our webpack config to support [Nerv](https://nerv.aotu.io/)
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example using-nerv using-nerv-app
+npm init next-app --example using-nerv using-nerv-app
# or
yarn create next-app --example using-nerv using-nerv-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example uses [Nerv](https://nerv.aotu.io/) instead of React. It's a "blazing fast React alternative, compatible with IE8 and React 16". Here we've customized Next.js to use Nerv instead of React.
-
-Here's how we did it:
-
-- Use `next.config.js` to customize our webpack config to support [Nerv](https://nerv.aotu.io/)
diff --git a/examples/using-preact/README.md b/examples/using-preact/README.md
index 70e4d575474dca7..8a87016ca4eaeec 100644
--- a/examples/using-preact/README.md
+++ b/examples/using-preact/README.md
@@ -1,13 +1,20 @@
# Preact example
+This example uses [Preact](https://github.com/developit/preact) instead of React. It's a React like UI framework which is fast and small. Here we've customized Next.js to use Preact instead of React.
+
+Here's how we did it:
+
+- Use `next.config.js` to customize our webpack config by aliasing React to `preact/compat`
+- Use `server.js` to make our server use Preact by aliasing React to `preact/compat`
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example using-preact using-preact-app
+npm init next-app --example using-preact using-preact-app
# or
yarn create next-app --example using-preact using-preact-app
```
@@ -36,12 +43,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example uses [Preact](https://github.com/developit/preact) instead of React. It's a React like UI framework which is fast and small. Here we've customized Next.js to use Preact instead of React.
-
-Here's how we did it:
-
-- Use `next.config.js` to customize our webpack config by aliasing React to `preact/compat`
-- Use `server.js` to make our server use Preact by aliasing React to `preact/compat`
diff --git a/examples/using-router/README.md b/examples/using-router/README.md
index 23ba0b1db425cd9..d14a89f9f52aa0b 100644
--- a/examples/using-router/README.md
+++ b/examples/using-router/README.md
@@ -1,5 +1,10 @@
# Example app utilizing next/router for routing
+This example features:
+
+- An app linking pages using `next/router` instead of ` ` component.
+- Access the pathname using `next/router` and render it in a component
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +15,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example using-router using-router-app
+npm init next-app --example using-router using-router-app
# or
yarn create next-app --example using-router using-router-app
```
@@ -42,10 +47,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- An app linking pages using `next/router` instead of ` ` component.
-- Access the pathname using `next/router` and render it in a component
diff --git a/examples/using-with-router/README.md b/examples/using-with-router/README.md
index 017e570325b13dd..fab07357d6c5a02 100644
--- a/examples/using-with-router/README.md
+++ b/examples/using-with-router/README.md
@@ -1,5 +1,9 @@
# Example app utilizing `withRouter` utility for routing
+Sometimes, we want to use the `router` inside component of our app without using the singleton `next/router` API.
+
+You can do that by creating a React Higher Order Component with the help of the `withRouter` utility.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example using-with-router using-with-router-app
+npm init next-app --example using-with-router using-with-router-app
# or
yarn create next-app --example using-with-router using-with-router-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Sometimes, we want to use the `router` inside component of our app without using the singleton `next/router` API.
-
-You can do that by creating a React Higher Order Component with the help of the `withRouter` utility.
diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md
index 21b2162bc21f319..1e3b41b0dfb2c03 100644
--- a/examples/with-absolute-imports/README.md
+++ b/examples/with-absolute-imports/README.md
@@ -1,5 +1,7 @@
# Example app with absolute imports
+This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-absolute-imports with-absolute-imports-app
+npm init next-app --example with-absolute-imports with-absolute-imports-app
# or
yarn create next-app --example with-absolute-imports with-absolute-imports-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration.
diff --git a/examples/with-algolia-react-instantsearch/README.md b/examples/with-algolia-react-instantsearch/README.md
index 85f4f8becaba4da..6475108ec931659 100644
--- a/examples/with-algolia-react-instantsearch/README.md
+++ b/examples/with-algolia-react-instantsearch/README.md
@@ -1,13 +1,15 @@
# With Algolia React InstantSearch example
+The goal of this example is to illustrate how you can use [Algolia React InstantSearch](https://community.algolia.com/react-instantsearch/) to perform your search with a Server-rendered application developed with Next.js. It also illustrates how you can keep in sync the Url with the search.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app
+npm init next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app
# or
yarn create next-app --example with-algolia-react-instantsearch with-algolia-react-instantsearch-app
```
@@ -41,9 +43,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The goal of this example is to illustrate how you can use [Algolia React InstantSearch](https://community.algolia.com/react-instantsearch/) to perform
-your search with a Server-rendered application developed with Next.js. It also illustrates how you
-can keep in sync the Url with the search.
diff --git a/examples/with-ant-design-less/README.md b/examples/with-ant-design-less/README.md
index 1be88536d1a00ce..7f67e9495725ae2 100644
--- a/examples/with-ant-design-less/README.md
+++ b/examples/with-ant-design-less/README.md
@@ -1,5 +1,7 @@
# Ant Design example
+This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-ant-design-less with-ant-design-app
+npm init next-app --example with-ant-design-less with-ant-design-app
# or
yarn create next-app --example with-ant-design-less with-ant-design-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
diff --git a/examples/with-ant-design/README.md b/examples/with-ant-design/README.md
index 6bf0d546b1e4ec3..b50208f5883cdb7 100644
--- a/examples/with-ant-design/README.md
+++ b/examples/with-ant-design/README.md
@@ -1,5 +1,7 @@
# Ant Design example
+This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-ant-design with-ant-design-app
+npm init next-app --example with-ant-design with-ant-design-app
# or
yarn create next-app --example with-ant-design with-ant-design-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Ant Design of React](http://ant.design). This is intended to show the integration of this UI toolkit with the Framework.
diff --git a/examples/with-antd-mobile/README.md b/examples/with-antd-mobile/README.md
index 78b7514338fa6a7..3b227d647269d6c 100644
--- a/examples/with-antd-mobile/README.md
+++ b/examples/with-antd-mobile/README.md
@@ -1,5 +1,7 @@
# Ant Design Mobile example
+This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framwork) with Next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-antd-mobile with-antd-mobile-app
+npm init next-app --example with-antd-mobile with-antd-mobile-app
# or
yarn create next-app --example with-antd-mobile with-antd-mobile-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framwork) with Next.js.
diff --git a/examples/with-aphrodite/README.md b/examples/with-aphrodite/README.md
index be8279ce573ce70..9355d63d13c60bd 100644
--- a/examples/with-aphrodite/README.md
+++ b/examples/with-aphrodite/README.md
@@ -1,5 +1,9 @@
# Example app with aphrodite
+This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-aphrodite with-aphrodite-app
+npm init next-app --example with-aphrodite with-aphrodite-app
# or
yarn create next-app --example with-aphrodite with-aphrodite-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [Aphrodite](https://github.com/Khan/aphrodite/).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
diff --git a/examples/with-apollo-and-redux-saga/README.md b/examples/with-apollo-and-redux-saga/README.md
index 6ebcc945eaa17e0..fef06ecd1dad2e7 100644
--- a/examples/with-apollo-and-redux-saga/README.md
+++ b/examples/with-apollo-and-redux-saga/README.md
@@ -1,13 +1,15 @@
# Apollo & Redux Saga Example
+In 2.0.0, Apollo Client severs out-of-the-box support for redux in favor of Apollo's client side state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux-saga`](https://github.com/zeit/next.js/tree/master/examples/with-redux-saga) examples.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-apollo-and-redux-saga with-apollo-and-redux-saga-app
+npm init next-app --example with-apollo-and-redux-saga with-apollo-and-redux-saga-app
# or
yarn create next-app --example with-apollo-and-redux-saga with-apollo-and-redux-saga-app
```
@@ -37,9 +39,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-In 2.0.0, Apollo Client severs out-of-the-box support for redux in favor of Apollo's client side state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux-saga`](https://github.com/zeit/next.js/tree/master/examples/with-redux-saga) examples.
+### Note:
Note that you can access the redux store like you normally would using `react-redux`'s `connect`. Here's a quick example:
@@ -53,6 +53,4 @@ export default withReduxSaga(connect(mapStateToProps, null)(Index))
`connect` must go inside `withReduxSaga` otherwise `connect` will not be able to find the store.
-### Note:
-
In these _with-apollo_ examples, the `withData()` HOC must wrap a top-level component from within the `pages` directory. Wrapping a child component with the HOC will result in a `Warning: Failed prop type: The prop 'serverState' is marked as required in 'WithData(Apollo(Component))', but its value is 'undefined'` error. Down-tree child components will have access to Apollo, and can be wrapped with any other sort of `graphql()`, `compose()`, etc HOC's.
diff --git a/examples/with-apollo-and-redux/README.md b/examples/with-apollo-and-redux/README.md
index 185c95d8683e3e8..0548ba8e8ca56ac 100644
--- a/examples/with-apollo-and-redux/README.md
+++ b/examples/with-apollo-and-redux/README.md
@@ -1,5 +1,9 @@
# Apollo & Redux Example
+This example serves as a conduit if you were using Apollo 1.X with Redux, and are migrating to Apollo 3.x, however, you have chosen not to manage your entire application state within Apollo (`apollo-link-state`).
+
+In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-apollo-and-redux with-apollo-and-redux-app
+npm init next-app --example with-apollo-and-redux with-apollo-and-redux-app
# or
yarn create next-app --example with-apollo-and-redux with-apollo-and-redux-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example serves as a conduit if you were using Apollo 1.X with Redux, and are migrating to Apollo 3.x, however, you have chosen not to manage your entire application state within Apollo (`apollo-link-state`).
-
-In 3.0.0, Apollo serves out-of-the-box support for redux in favor of Apollo's state management. This example aims to be an amalgamation of the [`with-apollo`](https://github.com/zeit/next.js/tree/master/examples/with-apollo) and [`with-redux`](https://github.com/zeit/next.js/tree/master/examples/with-redux) examples.
diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md
index 249dee80e903a2a..f7a21a22f6b9d01 100644
--- a/examples/with-apollo/README.md
+++ b/examples/with-apollo/README.md
@@ -1,5 +1,16 @@
# Apollo Example
+[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
+
+In this simple example, we integrate Apollo seamlessly with Next by wrapping our `pages/index.js` inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
+
+On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
+
+This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+
+Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
+https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -12,10 +23,10 @@ _Live Example: https://next-with-apollo.now.sh_
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-apollo with-apollo-app
+npm init next-app --example with-apollo with-apollo-app
# or
yarn create next-app --example with-apollo with-apollo-app
```
@@ -44,16 +55,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
-
-In this simple example, we integrate Apollo seamlessly with Next by wrapping our `pages/index.js` inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
-
-On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
-
-This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
-
-Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
-https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
diff --git a/examples/with-app-layout/readme.md b/examples/with-app-layout/README.md
similarity index 77%
rename from examples/with-app-layout/readme.md
rename to examples/with-app-layout/README.md
index c1be4690428bdab..e0adb09c81c56b7 100644
--- a/examples/with-app-layout/readme.md
+++ b/examples/with-app-layout/README.md
@@ -1,5 +1,7 @@
# With `App` layout example
+Shows how to use \_app.js to implement a global layout for all pages.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-app-layout with-app-layout-app
+npm init next-app --example with-app-layout with-app-layout-app
# or
yarn create next-app --example with-app-layout with-app-layout-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Shows how to use \_app.js to implement a global layout for all pages.
diff --git a/examples/with-asset-imports/README.md b/examples/with-asset-imports/README.md
index a2ac8f0466bd897..02581a94d54e7ac 100644
--- a/examples/with-asset-imports/README.md
+++ b/examples/with-asset-imports/README.md
@@ -1,5 +1,7 @@
# Example app with asset imports
+This example shows how to enable the imports of assets (images, videos, etc.) and get a URL pointing to `/public`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-asset-imports with-asset-imports-app
+npm init next-app --example with-asset-imports with-asset-imports-app
# or
yarn create next-app --example with-asset-imports with-asset-imports-app
```
@@ -43,9 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to enable the imports of assets (images, videos, etc.) and get a URL pointing to `/public`.
+## Note
This is also configurable to point to a CDN changing the `baseUri` to the CDN domain, something similar to this:
diff --git a/examples/with-astroturf/README.md b/examples/with-astroturf/README.md
index 139c4d180e6486f..e54040b61909bac 100644
--- a/examples/with-astroturf/README.md
+++ b/examples/with-astroturf/README.md
@@ -1,5 +1,7 @@
# Example app with [astroturf](https://github.com/4Catalyzer/astroturf)
+This example features how to use [astroturf](https://github.com/4Catalyzer/astroturf) as the zero-runtime CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-astroturf with-astroturf-app
+npm init next-app --example with-astroturf with-astroturf-app
# or
yarn create next-app --example with-astroturf with-astroturf-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [astroturf](https://github.com/4Catalyzer/astroturf) as the zero-runtime CSS-in-JS styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
diff --git a/examples/with-aws-amplify-typescript/README.md b/examples/with-aws-amplify-typescript/README.md
index b0e7b29e5e75acd..5ab6cbcc9fa2884 100644
--- a/examples/with-aws-amplify-typescript/README.md
+++ b/examples/with-aws-amplify-typescript/README.md
@@ -2,14 +2,22 @@
[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/zeit/next.js/tree/canary/examples/with-aws-amplify-typescript)
-## Setup
+This example shows how to build a server rendered web application with NextJS and AWS Amplify. We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app. The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
+
+Two routes are implemented :
+
+- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.tsx](/pages/index.tsx))
+
+- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].tsx](/pages/todo/[id].tsx))
+
+## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-aws-amplify-typescript nextjs-aws-amplify-typescript-app
+npm init next-app --example with-aws-amplify-typescript nextjs-aws-amplify-typescript-app
# or
yarn create next-app --example with-aws-amplify-typescript nextjs-aws-amplify-typescript-app
```
@@ -120,17 +128,3 @@ yarn dev
1. Open [`amplify/backend/api/nextjswithamplifyts/schema.graphql`](amplify/backend/api/nextjswithamplifyts/schema.graphql) and change what you need to.
2. Run `amplify push`
3. 👍
-
-## The idea behind the example
-
-This example shows how to build a server rendered web application with NextJS and AWS Amplify.
-
-We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app.
-
-The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
-
-Two routes are implemented :
-
-- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.tsx](/pages/index.tsx))
-
-- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].tsx](/pages/todo/[id].tsx))
diff --git a/examples/with-aws-amplify/README.md b/examples/with-aws-amplify/README.md
index cf9bb92be3920ff..63b26885fe57f5e 100644
--- a/examples/with-aws-amplify/README.md
+++ b/examples/with-aws-amplify/README.md
@@ -2,14 +2,21 @@
[![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/zeit/next.js/tree/canary/examples/with-aws-amplify)
-## Setup
+This example shows how to build a server rendered web application with NextJS and AWS Amplify. We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app. The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
+
+Two routes are implemented :
+
+- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.js](/pages/index.js))
+- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].js](/pages/todo/[id].js))
+
+## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-aws-amplify nextjs-aws-amplify-app
+npm init next-app --example with-aws-amplify nextjs-aws-amplify-app
# or
yarn create next-app --example with-aws-amplify nextjs-aws-amplify-app
```
@@ -133,17 +140,3 @@ amplify add api
rm ./schema.graphql
amplify push
```
-
-## The idea behind the example
-
-This example shows how to build a server rendered web application with NextJS and AWS Amplify.
-
-We use AWS Amplify to generate code and to manage and consume the AWS cloud resources needed for our app.
-
-The NextJS app has dynamic and static routes to demonstrate how to load data on the server based on the incoming request.
-
-Two routes are implemented :
-
-- `/` : A static route that uses getInitialProps to load data from AppSync and renders it on the server (Code in [pages/index.js](/pages/index.js))
-
-- `/todo/[id]` : A dynamic route that uses getInitialProps and the id from the provided context to load a single todo from AppSync and render it on the server. (Code in [pages/todo/:[id].js](/pages/todo/[id].js))
diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md
index 437370acff5b7a0..01fb45ed4d1786d 100644
--- a/examples/with-babel-macros/README.md
+++ b/examples/with-babel-macros/README.md
@@ -1,5 +1,7 @@
# Example app with [babel-macros](https://github.com/kentcdodds/babel-macros)
+This example features how to configure and use [`babel-macros`](https://github.com/kentcdodds/babel-macros) which allows you to easily add babel plugins which export themselves as a macro without needing to configure them.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-babel-macros with-babel-macros-app
+npm init next-app --example with-babel-macros with-babel-macros-app
# or
yarn create next-app --example with-babel-macros with-babel-macros-app
```
@@ -43,11 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example features how to configure and use [`babel-macros`](https://github.com/kentcdodds/babel-macros) which allows you
-to easily add babel plugins which export themselves as a macro without needing
-to configure them.
+## Note
You'll notice the configuration in `.babelrc` includes the `babel-macros`
plugin, then we can use the `preval.macro` in `pages/index.js` to pre-evaluate
diff --git a/examples/with-carbon-components/README.md b/examples/with-carbon-components/README.md
index 6c9a1a8f4eda632..1b2d22ff7f7589a 100644
--- a/examples/with-carbon-components/README.md
+++ b/examples/with-carbon-components/README.md
@@ -1,5 +1,9 @@
# Example app with carbon-components-react
+This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](http://www.carbondesignsystem.com/components/overview) with Next.js.
+
+Create your own theme with Carbon Design System's [theming tools](http://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-carbon-components with-carbon-components-app
+npm init next-app --example with-carbon-components with-carbon-components-app
# or
yarn create next-app --example with-carbon-components with-carbon-components-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](http://www.carbondesignsystem.com/components/overview) with Next.js.
-
-Create your own theme with Carbon Design System's [theming tools](http://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`
diff --git a/examples/with-carlo/README.md b/examples/with-carlo/README.md
index d7da77941f20805..942be49ba50d58a 100644
--- a/examples/with-carlo/README.md
+++ b/examples/with-carlo/README.md
@@ -1,13 +1,15 @@
# Carlo example
+This example show how you can use Next.js with [Carlo](https://github.com/GoogleChromeLabs/carlo). Here we use a [Custom server](https://github.com/zeit/next.js/blob/canary/examples/custom-server/README.md) to fit the carlo configs.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-carlo with-carlo-app
+npm init next-app --example with-carlo with-carlo-app
# or
yarn create next-app --example with-carlo with-carlo-app
```
@@ -39,7 +41,3 @@ yarn dev
npm run build
npm start
```
-
-## The idea behind the example
-
-This example show how you can use Next.js with [Carlo](https://github.com/GoogleChromeLabs/carlo). Here we use a [Custom server](https://github.com/zeit/next.js/blob/canary/examples/custom-server/README.md) to fit the carlo configs.
diff --git a/examples/with-cerebral/README.md b/examples/with-cerebral/README.md
index 35cca4b9b5ed5f9..54ab93610c33b9d 100644
--- a/examples/with-cerebral/README.md
+++ b/examples/with-cerebral/README.md
@@ -1,5 +1,39 @@
# Declarative State & Side-effect management with [CerebralJS](https://cerebraljs.com/)
+Use [CerebralJS](https://cerebraljs.com/) to manage an apps state and side effects in a declarative manner:
+
+Declarative CerebralJS:
+
+```js
+;[
+ setLoading(true),
+ getUser,
+ {
+ success: setUser,
+ error: setError,
+ },
+ setLoading(false),
+]
+```
+
+vs imperative JS:
+
+```js
+function getUser() {
+ this.isLoading = true
+ ajax
+ .get('/user')
+ .then(user => {
+ this.data = user
+ this.isLoading = false
+ })
+ .catch(error => {
+ this.error = error
+ this.isLoading = false
+ })
+}
+```
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +44,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-cerebral with-cerebral-app
+npm init next-app --example with-cerebral with-cerebral-app
# or
yarn create next-app --example with-cerebral with-cerebral-app
```
@@ -42,39 +76,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Use [CerebralJS](https://cerebraljs.com/) to manage an apps state and side effects in a declarative manner:
-
-Declarative CerebralJS:
-
-```js
-;[
- setLoading(true),
- getUser,
- {
- success: setUser,
- error: setError,
- },
- setLoading(false),
-]
-```
-
-vs imperative JS:
-
-```js
-function getUser() {
- this.isLoading = true
- ajax
- .get('/user')
- .then(user => {
- this.data = user
- this.isLoading = false
- })
- .catch(error => {
- this.error = error
- this.isLoading = false
- })
-}
-```
diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
index cf58f677fd8d9f9..ba1b43bd40e48fe 100644
--- a/examples/with-chakra-ui/README.md
+++ b/examples/with-chakra-ui/README.md
@@ -1,5 +1,9 @@
# Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui)
+This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app.
+
+We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-chakra-ui with-chakra-ui-app
+npm init next-app --example with-chakra-ui with-chakra-ui-app
# or
yarn create next-app --example with-chakra-ui with-chakra-ui-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app.
-
-We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props.
diff --git a/examples/with-componentdidcatch/readme.md b/examples/with-componentdidcatch/README.md
similarity index 78%
rename from examples/with-componentdidcatch/readme.md
rename to examples/with-componentdidcatch/README.md
index db9261c0e3087d4..885d91ed7eb8fa8 100644
--- a/examples/with-componentdidcatch/readme.md
+++ b/examples/with-componentdidcatch/README.md
@@ -1,5 +1,7 @@
# With `componentDidCatch` example
+This example shows how to catch errors caught by `componentDidCatch` in React's **client** side.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-componentdidcatch with-componentdidcatch-app
+npm init next-app --example with-componentdidcatch with-componentdidcatch-app
# or
yarn create next-app --example with-componentdidcatch with-componentdidcatch-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to catch errors caught by `componentDidCatch` in React's **client** side.
diff --git a/examples/with-configured-preset-env/README.md b/examples/with-configured-preset-env/README.md
index f53ee4d2efa0329..1f197df05b0bccf 100644
--- a/examples/with-configured-preset-env/README.md
+++ b/examples/with-configured-preset-env/README.md
@@ -1,5 +1,7 @@
# Example preconfigured Babel [preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env)
+This example shows how to customize `.babelrc` with `@babel/preset-env`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-configured-preset-env with-configured-preset-env-app
+npm init next-app --example with-configured-preset-env with-configured-preset-env-app
# or
yarn create next-app --example with-configured-preset-env with-configured-preset-env-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to customize `.babelrc` with `@babel/preset-env`.
diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
index db58c1a16484176..7f8126d24da6461 100644
--- a/examples/with-context-api/README.md
+++ b/examples/with-context-api/README.md
@@ -1,5 +1,15 @@
# Hello World example
+This example shows how to use react context api in our app.
+
+It provides an example of using `pages/_app.js` to include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
+
+We start of by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
+
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+
+The `pages/about.js` shows how to pass an increment value from the about page into the context provider itself.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +20,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-context-api with-context-api-app
+npm init next-app --example with-context-api with-context-api-app
# or
yarn create next-app --example with-context-api with-context-api-app
```
@@ -42,15 +52,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example\*
-
-This example shows how to use react context api in our app.
-
-It provides an example of using `pages/_app.js` to include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
-
-We start of by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
-
-The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
-
-The `pages/about.js` shows how to pass an increment value from the about page into the context provider itself.
diff --git a/examples/with-cookie-auth-fauna/README.md b/examples/with-cookie-auth-fauna/README.md
index 987877caf25d26e..973f5baab352c60 100644
--- a/examples/with-cookie-auth-fauna/README.md
+++ b/examples/with-cookie-auth-fauna/README.md
@@ -1,14 +1,25 @@
# With Cookie Auth and Fauna
+In this example, we authenticate users and store a token in a secure (non-JS) cookie. The example only shows how the user session works, keeping a user logged in between pages.
+
+This example uses [Fauna](https://fauna.com/) as the auth service and DB.
+
+The repo includes a minimal auth backend built with the new [API Routes support](https://github.com/zeit/next.js/pull/7296) (`pages/api`), [Micro](https://www.npmjs.com/package/micro), [Fauna for Auth](https://app.fauna.com/tutorials/authentication) and [dotenv](https://github.com/zeit/next.js/tree/canary/examples/with-dotenv) for environment variables. The backend allows the user to create an account (a User document), login, and see their user id (User ref id).
+
+Session is synchronized across tabs. If you logout your session gets removed on all the windows as well. We use the HOC `withAuthSync` for this.
+
+The helper function `auth` helps to retrieve the token across pages and redirects the user if not token was found.
+
## How to use
### Using `create-next-app`
-Download [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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 i -g create-next-app
-create-next-app --example with-cookie-auth-fauna with-cookie-auth-fauna-app
+npm init next-app --example with-cookie-auth-fauna with-cookie-auth-fauna-app
+# or
+yarn create next-app --example with-cookie-auth-fauna with-cookie-auth-fauna-app
```
### Download manually
@@ -56,15 +67,3 @@ Then deploy it to the cloud:
```bash
now
```
-
-## The idea behind the example
-
-In this example, we authenticate users and store a token in a secure (non-JS) cookie. The example only shows how the user session works, keeping a user logged in between pages.
-
-This example uses [Fauna](https://fauna.com/) as the auth service and DB.
-
-The repo includes a minimal auth backend built with the new [API Routes support](https://github.com/zeit/next.js/pull/7296) (`pages/api`), [Micro](https://www.npmjs.com/package/micro), [Fauna for Auth](https://app.fauna.com/tutorials/authentication) and [dotenv](https://github.com/zeit/next.js/tree/canary/examples/with-dotenv) for environment variables. The backend allows the user to create an account (a User document), login, and see their user id (User ref id).
-
-Session is synchronized across tabs. If you logout your session gets removed on all the windows as well. We use the HOC `withAuthSync` for this.
-
-The helper function `auth` helps to retrieve the token across pages and redirects the user if not token was found.
diff --git a/examples/with-cookie-auth/README.md b/examples/with-cookie-auth/README.md
index f0e22fbafb075cb..bf0d012e4dec7b2 100644
--- a/examples/with-cookie-auth/README.md
+++ b/examples/with-cookie-auth/README.md
@@ -1,5 +1,15 @@
# Example app utilizing cookie-based authentication
+In this example, we authenticate users and store a token in a cookie. The example only shows how the user session works, keeping a user logged in between pages.
+
+This example is backend agnostic and uses [isomorphic-unfetch](https://www.npmjs.com/package/isomorphic-unfetch) to do the API calls on the client and the server.
+
+The repo includes a minimal passwordless backend built with the new [API Routes support](https://github.com/zeit/next.js/pull/7296) (`pages/api`), [Micro](https://www.npmjs.com/package/micro) and the [GitHub API](https://developer.github.com/v3/). The backend allows the user to log in with their GitHub username.
+
+Session is synchronized across tabs. If you logout your session gets removed on all the windows as well. We use the HOC `withAuthSync` for this.
+
+The helper function `auth` helps to retrieve the token across pages and redirects the user if not token was found.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,11 +20,12 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Download [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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:
-```
-npm i -g create-next-app
-create-next-app --example with-cookie-auth with-cookie-auth-app
+```bash
+npm init next-app --example with-cookie-auth with-cookie-auth-app
+# or
+yarn create next-app --example with-cookie-auth with-cookie-auth-app
```
### Download manually
@@ -43,15 +54,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-In this example, we authenticate users and store a token in a cookie. The example only shows how the user session works, keeping a user logged in between pages.
-
-This example is backend agnostic and uses [isomorphic-unfetch](https://www.npmjs.com/package/isomorphic-unfetch) to do the API calls on the client and the server.
-
-The repo includes a minimal passwordless backend built with the new [API Routes support](https://github.com/zeit/next.js/pull/7296) (`pages/api`), [Micro](https://www.npmjs.com/package/micro) and the [GitHub API](https://developer.github.com/v3/). The backend allows the user to log in with their GitHub username.
-
-Session is synchronized across tabs. If you logout your session gets removed on all the windows as well. We use the HOC `withAuthSync` for this.
-
-The helper function `auth` helps to retrieve the token across pages and redirects the user if not token was found.
diff --git a/examples/with-custom-babel-config/README.md b/examples/with-custom-babel-config/README.md
index cd471468b6ca750..d230bd981a383c1 100644
--- a/examples/with-custom-babel-config/README.md
+++ b/examples/with-custom-babel-config/README.md
@@ -1,5 +1,13 @@
# Using a custom Babel config
+This example features:
+
+- An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/).
+- It uses babel-preset-stage-0, which allows us to use above JavaScript feature.
+- It uses '.babelrc' file in the app directory to add above preset.
+
+> Most of the time, when writing a custom `.babelrc` file, you need to add `next/babel` as a preset.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-custom-babel-config with-custom-babel-config-app
+npm init next-app --example with-custom-babel-config with-custom-babel-config-app
# or
yarn create next-app --example with-custom-babel-config with-custom-babel-config-app
```
@@ -42,13 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/).
-- It uses babel-preset-stage-0, which allows us to use above JavaScript feature.
-- It uses '.babelrc' file in the app directory to add above preset.
-
-> Most of the time, when writing a custom `.babelrc` file, you need to add `next/babel` as a preset.
diff --git a/examples/with-custom-reverse-proxy/README.md b/examples/with-custom-reverse-proxy/README.md
index 70323218f2f1411..a1fd50b56395c15 100644
--- a/examples/with-custom-reverse-proxy/README.md
+++ b/examples/with-custom-reverse-proxy/README.md
@@ -1,13 +1,20 @@
# Reverse Proxy example
+This example applies this gist https://gist.github.com/jamsesso/67fd937b74989dc52e33 to Nextjs and provides:
+
+- Reverse proxy in development mode by add `http-proxy-middleware` to custom server
+- NOT a recommended approach to production scale (hence explicit dev flag) as we should scope proxy as outside UI applications and have separate web server taking care of that.
+
+Sorry for the extra packages. I belong to the minority camp of writing ES6 code on Windows developers. Essentially you only need `http-proxy-middleware` on top of bare-bone Nextjs setup to run this example.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app
+npm init next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app
# or
yarn create next-app --example with-custom-reverse-proxy with-custom-reverse-proxy-app
```
@@ -31,15 +38,6 @@ yarn
yarn dev
```
-## The idea behind the example
-
-This example applies this gist https://gist.github.com/jamsesso/67fd937b74989dc52e33 to Nextjs and provides:
-
-- Reverse proxy in development mode by add `http-proxy-middleware` to custom server
-- NOT a recommended approach to production scale (hence explicit dev flag) as we should scope proxy as outside UI applications and have separate web server taking care of that.
-
-Sorry for the extra packages. I belong to the minority camp of writing ES6 code on Windows developers. Essentially you only need `http-proxy-middleware` on top of bare-bone Nextjs setup to run this example.
-
## What it does
Take any random query string to the index page and does a GET to `/api/` which gets routed internally to `https://swapi.co/api/`, or any API endpoint you wish to configure through the proxy.
diff --git a/examples/with-cxs/README.md b/examples/with-cxs/README.md
index c58ec103850914d..f3aae99bb662223 100644
--- a/examples/with-cxs/README.md
+++ b/examples/with-cxs/README.md
@@ -1,5 +1,9 @@
# Example app with cxs
+This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-cxs with-cxs-app
+npm init next-app --example with-cxs with-cxs-app
# or
yarn create next-app --example with-cxs with-cxs-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [cxs](https://github.com/jxnblk/cxs/).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
diff --git a/examples/with-data-prefetch/README.md b/examples/with-data-prefetch/README.md
index 212b7872c82182f..bb85bfc7307cf76 100644
--- a/examples/with-data-prefetch/README.md
+++ b/examples/with-data-prefetch/README.md
@@ -1,5 +1,11 @@
# Example app with prefetching data
+Next.js lets you prefetch the JS code of another page just adding the `prefetch` prop to `next/link`. This can help you avoid the download time a new page you know beforehand the user is most probably going to visit.
+
+In the example we'll extend the `Link` component to also run the `getInitialProps` (if it's defined) of the new page and save the resulting props on cache. When the user visits the page it will load the props from cache and avoid any request.
+
+It uses `sessionStorage` as cache but it could be replaced with any other more specialized system. Like IndexedDB or just an in-memory API with a better cache strategy to prune old cache and force new fetching.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-data-prefetch with-data-prefetch-app
+npm init next-app --example with-data-prefetch with-data-prefetch-app
# or
yarn create next-app --example with-data-prefetch with-data-prefetch-app
```
@@ -43,14 +49,8 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Next.js lets you prefetch the JS code of another page just adding the `prefetch` prop to `next/link`. This can help you avoid the download time a new page you know beforehand the user is most probably going to visit.
-
-In the example we'll extend the `Link` component to also run the `getInitialProps` (if it's defined) of the new page and save the resulting props on cache. When the user visits the page it will load the props from cache and avoid any request.
-
-It uses `sessionStorage` as cache but it could be replaced with any other more specialized system. Like IndexedDB or just an in-memory API with a better cache strategy to prune old cache and force new fetching.
+## Note
-> This example is based on the [ScaleAPI article explaining this same technique](https://www.scaleapi.com/blog/increasing-the-performance-of-dynamic-next-js-websites).
+This example is based on the [ScaleAPI article explaining this same technique](https://www.scaleapi.com/blog/increasing-the-performance-of-dynamic-next-js-websites).
**Note**: it only works in production environment. In development Next.js just avoid doing the prefetch.
diff --git a/examples/with-docker/README.md b/examples/with-docker/README.md
index 727847a81f8a97f..ed84d6e16f08a17 100644
--- a/examples/with-docker/README.md
+++ b/examples/with-docker/README.md
@@ -1,13 +1,19 @@
# With Docker
+This example show how to set custom environment variables for your **docker application** at runtime.
+
+The `dockerfile` is the simplest way to run Next.js app in docker, and the size of output image is `173MB`. However, for an even smaller build, you can do multi-stage builds with `dockerfile.multistage`. The size of output image is `85MB`.
+
+You can check the [Example Dockerfile for your own Node.js project](https://github.com/mhart/alpine-node/tree/43ca9e4bc97af3b1f124d27a2cee002d5f7d1b32#example-dockerfile-for-your-own-nodejs-project) section in [mhart/alpine-node](https://github.com/mhart/alpine-node) for more details.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-docker with-docker-app
+npm init next-app --example with-docker with-docker-app
# or
yarn create next-app --example with-docker with-docker-app
```
@@ -52,11 +58,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now --docker -e API_URL="https://example.com"
```
-
-## The idea behind the example
-
-This example show how to set custom environment variables for your **docker application** at runtime.
-
-The `dockerfile` is the simplest way to run Next.js app in docker, and the size of output image is `173MB`. However, for an even smaller build, you can do multi-stage builds with `dockerfile.multistage`. The size of output image is `85MB`.
-
-You can check the [Example Dockerfile for your own Node.js project](https://github.com/mhart/alpine-node/tree/43ca9e4bc97af3b1f124d27a2cee002d5f7d1b32#example-dockerfile-for-your-own-nodejs-project) section in [mhart/alpine-node](https://github.com/mhart/alpine-node) for more details.
diff --git a/examples/with-dotenv/README.md b/examples/with-dotenv/README.md
index cbbdcbd19f339c4..c02e791fa1398dd 100644
--- a/examples/with-dotenv/README.md
+++ b/examples/with-dotenv/README.md
@@ -1,5 +1,7 @@
# With Dotenv example
+This example shows how to inline env vars.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-dotenv with-dotenv-app
+npm init next-app --example with-dotenv with-dotenv-app
# or
yarn create next-app --example with-dotenv with-dotenv-app
```
@@ -43,11 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to inline env vars.
-
-**Please note**:
+## Note
- It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file.
- In this example, as soon as you reference an env var in your code, it will automatically be made publicly available and exposed to the client.
diff --git a/examples/with-draft-js/README.md b/examples/with-draft-js/README.md
index 27f3d500b0e3e3b..fb6a1af74c7749e 100644
--- a/examples/with-draft-js/README.md
+++ b/examples/with-draft-js/README.md
@@ -1,5 +1,9 @@
# DraftJS Medium editor inspiration
+Have you ever wanted to have an editor like medium.com in your Next.js app? DraftJS is avalaible for SSR, but some plugins like the toolbar are using `window`, which does not work when doing SSR.
+
+This example aims to provides a fully customizable example of the famous medium editor with DraftJS. The goal was to get it as customizable as possible, and fully working with Next.js without using the react-no-ssr package.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-draft-js
+npm init next-app --example with-draft-js
# or
yarn create next-app --example with-draft-js with-draft-js-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Have you ever wanted to have an editor like medium.com in your Next.js app? DraftJS is avalaible for SSR, but some plugins like the toolbar are using `window`, which does not work when doing SSR.
-
-This example aims to provides a fully customizable example of the famous medium editor with DraftJS. The goal was to get it as customizable as possible, and fully working with Next.js without using the react-no-ssr package.
diff --git a/examples/with-dynamic-app-layout/readme.md b/examples/with-dynamic-app-layout/README.md
similarity index 65%
rename from examples/with-dynamic-app-layout/readme.md
rename to examples/with-dynamic-app-layout/README.md
index a4d131549479b92..8ea3628800de8c8 100644
--- a/examples/with-dynamic-app-layout/readme.md
+++ b/examples/with-dynamic-app-layout/README.md
@@ -1,5 +1,7 @@
# With dynamic `App` layout example
+Shows how to use _app.js to implement \_dynamic_ layouts for pages. This is achieved by attaching a static `Layout` property to each page that needs a different layout. In that way, once we use `_app.js` to wrap our pages, we can get it from `Component.Layout` and render it accordingly.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-dynamic-app-layout with-dynamic-app-layout-app
+npm init next-app --example with-dynamic-app-layout with-dynamic-app-layout-app
# or
yarn create next-app --example with-dynamic-app-layout with-dynamic-app-layout-app
```
@@ -42,8 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Shows how to use _app.js to implement \_dynamic_ layouts for pages.
-This is achieved by attaching a static `Layout` property to each page that needs a different layout. In that way, once we use `_app.js` to wrap our pages, we can get it from `Component.Layout` and render it accordingly.
diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md
index bf1441b4a15e04a..041b23c0f3edd28 100644
--- a/examples/with-dynamic-import/README.md
+++ b/examples/with-dynamic-import/README.md
@@ -1,5 +1,7 @@
# Example app with dynamic-imports
+This examples shows how to dynamically import modules via [`import()`](https://github.com/tc39/proposal-dynamic-import) API
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-dynamic-import with-dynamic-import-app
+npm init next-app --example with-dynamic-import with-dynamic-import-app
# or
yarn create next-app --example with-dynamic-import with-dynamic-import-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This examples shows how to dynamically import modules via [`import()`](https://github.com/tc39/proposal-dynamic-import) API
diff --git a/examples/with-electron-typescript/README.md b/examples/with-electron-typescript/README.md
index cacc6b8bf7d353e..aa56880848e1374 100644
--- a/examples/with-electron-typescript/README.md
+++ b/examples/with-electron-typescript/README.md
@@ -1,15 +1,25 @@
# Electron with Typescript application example
+This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application. Both Next.js and Electron layers are written in TypeScript and compiled to JavaScript during the build process.
+
+| Part | Source code (Typescript) | Builds (JavaScript) |
+| ---------- | ------------------------ | ------------------- |
+| Next.js | `/renderer` | `/renderer` |
+| Electron | `/electron-src` | `/main` |
+| Production | | `/dist` |
+
+For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
+
**You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-electron-typescript with-electron-typescript-app
+npm init next-app --example with-electron-typescript with-electron-typescript-app
# or
yarn create next-app --example with-electron-typescript with-electron-typescript-app
```
@@ -40,17 +50,7 @@ Available commands:
"yarn type-check": check TypeScript in project
```
-## The idea behind the example
-
-This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application. Both Next.js and Electron layers are written in TypeScript and compiled to JavaScript during the build process.
-
-| Part | Source code (Typescript) | Builds (JavaScript) |
-| ---------- | ------------------------ | ------------------- |
-| Next.js | `/renderer` | `/renderer` |
-| Electron | `/electron-src` | `/main` |
-| Production | | `/dist` |
-
-For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
+## Notes
You can create the production app using `npm run dist`.
diff --git a/examples/with-electron/README.md b/examples/with-electron/README.md
index 79c1ff2c1ea247c..1eb0efe5cc28c23 100644
--- a/examples/with-electron/README.md
+++ b/examples/with-electron/README.md
@@ -1,15 +1,19 @@
# Electron application example
+This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application.
+
+For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
+
**You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-electron with-electron-app
+npm init next-app --example with-electron with-electron-app
# or
yarn create next-app --example with-electron with-electron-app
```
@@ -33,10 +37,4 @@ yarn
yarn start
```
-## The idea behind the example
-
-This example show how you can use Next.js inside an Electron application to avoid a lot of configuration, use Next.js router as view and use server-render to speed up the initial render of the application.
-
-For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
-
You can create the production app using `npm run dist`.
diff --git a/examples/with-emotion-fiber/README.md b/examples/with-emotion-fiber/README.md
index e1ac6c925b265c8..ddc315c7c64e64b 100644
--- a/examples/with-emotion-fiber/README.md
+++ b/examples/with-emotion-fiber/README.md
@@ -1,5 +1,7 @@
# Pass Server Data Directly to a Next.js Page during SSR
+Extract and inline critical css with [emotion](https://github.com/emotion-js/emotion) using [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-emotion-fiber with-emotion-fiber-app
+npm init next-app --example with-emotion-fiber with-emotion-fiber-app
# or
yarn create next-app --example with-emotion-fiber with-emotion-fiber-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Extract and inline critical css with [emotion](https://github.com/emotion-js/emotion) using [emotion-server](https://github.com/emotion-js/emotion/tree/master/packages/emotion-server) and [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion).
diff --git a/examples/with-emotion/README.md b/examples/with-emotion/README.md
index 7815880215be9d3..6a2a534d6d2baf0 100644
--- a/examples/with-emotion/README.md
+++ b/examples/with-emotion/README.md
@@ -1,5 +1,11 @@
# Example app with [emotion](https://github.com/tkh44/emotion)
+This example features how to use [emotion](https://github.com/tkh44/emotion) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
+
+We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-selector and CSS animations.
+
+This is based off the with-glamorous example.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-emotion with-emotion-app
+npm init next-app --example with-emotion with-emotion-app
# or
yarn create next-app --example with-emotion with-emotion-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [emotion](https://github.com/tkh44/emotion) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
-
-We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-selector and CSS animations.
-
-This is based off the with-glamorous example.
diff --git a/examples/with-env-from-next-config-js/README.md b/examples/with-env-from-next-config-js/README.md
index 081488e14ca57a6..9084bbdaeb346aa 100644
--- a/examples/with-env-from-next-config-js/README.md
+++ b/examples/with-env-from-next-config-js/README.md
@@ -1,5 +1,15 @@
# With env From next.config.js
+This example demonstrates setting parameters that will be used by your application and set at build time (not run time).
+More specifically, what that means, is that environmental variables are programmed into the special configuration file `next.js.config` and then
+returned to your react components (including `getInitialProps`) when the program is built with `next build`.
+
+As the build process (`next build`) is proceeding, `next.config.js` is processed and passed in as a parameter is the variable `phase`.
+`phase` can have the values `PHASE_DEVELOPMENT_SERVER` or `PHASE_PRODUCTION_BUILD` (as defined in `next\constants`). Based on the variable
+`phase`, different environmental variables can be set for use in your react app. That is, if you reference `process.env.RESTURL_SPEAKERS`
+in your react app, whatever is returned by `next.config.js` as the variable `env`, (or `env.RESTURL_SPEAKERS`) will be accessible in your
+app as `process.env.RESTURL_SPEAKERS`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +20,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-env-from-next-config-js
+npm init next-app --example with-env-from-next-config-js
# or
yarn create next-app --example with-env-from-next-config-js
```
@@ -43,18 +53,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind this example
-
-This example demonstrates setting parameters that will be used by your application and set at build time (not run time).
-More specifically, what that means, is that environmental variables are programmed into the special configuration file `next.js.config` and then
-returned to your react components (including `getInitialProps`) when the program is built with `next build`.
-
-As the build process (`next build`) is proceeding, `next.config.js` is processed and passed in as a parameter is the variable `phase`.
-`phase` can have the values `PHASE_DEVELOPMENT_SERVER` or `PHASE_PRODUCTION_BUILD` (as defined in `next\constants`). Based on the variable
-`phase`, different environmental variables can be set for use in your react app. That is, if you reference `process.env.RESTURL_SPEAKERS`
-in your react app, whatever is returned by `next.config.js` as the variable `env`, (or `env.RESTURL_SPEAKERS`) will be accessible in your
-app as `process.env.RESTURL_SPEAKERS`.
-
> ## Special note
>
> `next build` does a hard coded variable substitution into your JavaScript before the final bundle is created. This means
diff --git a/examples/with-external-styled-jsx-sass/README.md b/examples/with-external-styled-jsx-sass/README.md
index 42050736de93849..7909f55652dd9a9 100644
--- a/examples/with-external-styled-jsx-sass/README.md
+++ b/examples/with-external-styled-jsx-sass/README.md
@@ -1,5 +1,7 @@
# Example app with next-sass
+This example features an app with external CSS written in SASS and loaded and automatically scoped with `styled-jsx/webpack`. [Learn more](https://github.com/zeit/styled-jsx#styles-in-regular-css-files)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app
+npm init next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app
# or
yarn create next-app --example with-external-styled-jsx-sass with-external-styled-jsx-sass-app
```
@@ -42,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-An app with external CSS written in SASS and loaded and automatically scoped with `styled-jsx/webpack`. [Learn more](https://github.com/zeit/styled-jsx#styles-in-regular-css-files)
diff --git a/examples/with-fela/README.md b/examples/with-fela/README.md
index 3f670e014eaa8d7..40a53aa84117434 100755
--- a/examples/with-fela/README.md
+++ b/examples/with-fela/README.md
@@ -1,5 +1,9 @@
# Example app with Fela
+This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-fela with-fela-app
+npm init next-app --example with-fela with-fela-app
# or
yarn create next-app --example with-fela with-fela-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [fela](https://github.com/rofrischmann/fela).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
diff --git a/examples/with-firebase-authentication/README.md b/examples/with-firebase-authentication/README.md
index e7b3feda64e0e27..5b175adaafaf129 100644
--- a/examples/with-firebase-authentication/README.md
+++ b/examples/with-firebase-authentication/README.md
@@ -1,13 +1,15 @@
# With Firebase Authentication example
+The goal is to authenticate users with firebase and store their auth token in sessions. A logged in user will see their messages on page load and then be able to post new messages.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-firebase-authentication with-firebase-authentication-app
+npm init next-app --example with-firebase-authentication with-firebase-authentication-app
# or
yarn create next-app --example with-firebase-authentication with-firebase-authentication-app
```
@@ -57,7 +59,3 @@ now
```
After `now` successfully deploys, a URL will for your site will be displayed. Copy that URL and navigate to your Firebase project's Authentication tab. Scroll down in the page to "Authorized domains" and add that URL to the list.
-
-## The idea behind the example
-
-The goal is to authenticate users with firebase and store their auth token in sessions. A logged in user will see their messages on page load and then be able to post new messages.
diff --git a/examples/with-firebase-cloud-messaging/README.md b/examples/with-firebase-cloud-messaging/README.md
index bce8dcf26e09ae9..645724ced447801 100644
--- a/examples/with-firebase-cloud-messaging/README.md
+++ b/examples/with-firebase-cloud-messaging/README.md
@@ -1,13 +1,36 @@
# With Firebase Cloud Messaging example
-## How to run
+To demo how to implement firebase cloud messaging to send web push notification in next.js.
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/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 with-firebase-cloud-messaging with-firebase-cloud-messaging-app
+# or
+yarn create next-app --example with-firebase-cloud-messaging with-firebase-cloud-messaging-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-firebase-cloud-messaging
+cd with-firebase-cloud-messaging
+```
Install it and run:
```bash
npm install
-npm run build
npm run dev
+# or
+yarn
+yarn dev
```
## Set your send id
@@ -23,7 +46,3 @@ now
## How to send a notification
https://firebase.google.com/docs/cloud-messaging/js/first-message,
-
-## The idea behind the example
-
-To demo how to implement firebase cloud messaging to send web push notification in next.js.
diff --git a/examples/with-firebase-hosting-and-docker/README.md b/examples/with-firebase-hosting-and-docker/README.md
index ce4761e1580490e..bc11d003199e7d0 100644
--- a/examples/with-firebase-hosting-and-docker/README.md
+++ b/examples/with-firebase-hosting-and-docker/README.md
@@ -1,13 +1,19 @@
# With Firebase Hosting and Docker example
+The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL, with docker support for a consistent development environment. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render. Docker is entirely dedicated for local development and the deployment process and that Firebase itself will not leverage Docker itself.
+
+This is based off of the work of @jthegedus in the [with-firebase-hosting](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting) example.
+
+If you're having issues, feel free to tag @sampsonjoliver in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-firebase-hosting-and-docker with-firebase-hosting-and-docker-app
+npm init next-app --example with-firebase-hosting-and-docker with-firebase-hosting-and-docker-app
# or
yarn create next-app --example with-firebase-hosting-and-docker with-firebase-hosting-and-docker-app
```
@@ -48,14 +54,6 @@ open http://localhost:3000
yarn docker:deploy
```
-## The idea behind the example
-
-The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL, with docker support for a consistent development environment. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render. Docker is entirely dedicated for local development and the deployment process and that Firebase itself will not leverage Docker itself.
-
-This is based off of the work of @jthegedus in the [with-firebase-hosting](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting) example.
-
-If you're having issues, feel free to tag @sampsonjoliver in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
-
## Important
- The empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL.
diff --git a/examples/with-firebase-hosting-and-typescript/README.md b/examples/with-firebase-hosting-and-typescript/README.md
index 2b6df506b9aa254..cfdf42ff09c1116 100644
--- a/examples/with-firebase-hosting-and-typescript/README.md
+++ b/examples/with-firebase-hosting-and-typescript/README.md
@@ -1,13 +1,19 @@
# With Firebase Hosting and Typescript example
+The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL, with a complete Typescript stack for both the Next app and for the Firebase Functions. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render.
+
+This is based off of the work of @jthegedus in the [with-firebase-hosting](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting) example.
+
+If you're having issues, feel free to tag @sampsonjoliver in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
+npm init next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
# or
yarn create next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
```
@@ -59,14 +65,6 @@ npm run deploy
npm run clean
```
-## The idea behind the example
-
-The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL, with a complete Typescript stack for both the Next app and for the Firebase Functions. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render.
-
-This is based off of the work of @jthegedus in the [with-firebase-hosting](https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting) example.
-
-If you're having issues, feel free to tag @sampsonjoliver in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
-
## Important
- The empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL.
diff --git a/examples/with-firebase-hosting/README.md b/examples/with-firebase-hosting/README.md
index 3c3f89559677e23..3d61fe276a3ab2f 100644
--- a/examples/with-firebase-hosting/README.md
+++ b/examples/with-firebase-hosting/README.md
@@ -1,13 +1,19 @@
# With Firebase Hosting example
+The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render.
+
+This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described [here](https://medium.com/@jthegedus/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2).
+
+If you're having issues, feel free to tag @jthegedus in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
+
## How to use
-**Using `create-next-app`**
+### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-firebase-hosting with-firebase-hosting-app
+npm init next-app --example with-firebase-hosting with-firebase-hosting-app
# or
yarn create next-app --example with-firebase-hosting with-firebase-hosting-app
```
@@ -68,14 +74,6 @@ npm run clean
-## The idea behind the example
-
-The goal is to host the Next.js app on Firebase Cloud Functions with Firebase Hosting rewrite rules so our app is served from our Firebase Hosting URL. Each individual `page` bundle is served in a new call to the Cloud Function which performs the initial server render.
-
-This is based off of the work at https://github.com/geovanisouza92/serverless-firebase & https://github.com/jthegedus/firebase-functions-next-example as described [here](https://medium.com/@jthegedus/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2).
-
-If you're having issues, feel free to tag @jthegedus in the [issue you create on the next.js repo](https://github.com/zeit/next.js/issues/new)
-
## Important
- The empty `placeholder.html` file is so Firebase Hosting does not error on an empty `public/` folder and still hosts at the Firebase project URL.
diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md
index 51adedb584080b8..b651d479a5bf54a 100644
--- a/examples/with-flow/README.md
+++ b/examples/with-flow/README.md
@@ -1,5 +1,7 @@
# Example app with [Flow](https://flowtype.org/)
+This example shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-flow with-flow-app
+npm init next-app --example with-flow with-flow-app
# or
yarn create next-app --example with-flow with-flow-app
```
@@ -42,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
-
-![with-flow](with-flow.gif)
diff --git a/examples/with-framer-motion/README.md b/examples/with-framer-motion/README.md
index ce9ad6f2470e211..0db2bfd88551de5 100644
--- a/examples/with-framer-motion/README.md
+++ b/examples/with-framer-motion/README.md
@@ -1,5 +1,9 @@
# framer-motion example
+Framer [`Motion`](https://github.com/framer/motion) is a production-ready animation library. By using a custom [``](https://nextjs.org/docs#custom-app) along with Motion's [`AnimatePresence`](https://www.framer.com/api/motion/animate-presence/) component, transitions between Next pages becomes simple and declarative.
+
+When using Next's ` ` component, you will likely want to [disable the default scroll behavior](https://nextjs.org/docs#disabling-the-scroll-changes-to-top-on-page) for a more seamless navigation experience. Scrolling to the top of a page can be re-enabled by adding a `onExitComplete` callback on the `AnimatePresence` component.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/segmentio/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/zeit/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
-npx create-next-app --example with-framer-motion with-framer-motion
+npm init next-app --example with-framer-motion with-framer-motion
# or
yarn create next-app --example with-framer-motion with-framer-motion
```
@@ -40,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Framer [`Motion`](https://github.com/framer/motion) is a production-ready animation library. By using a custom [``](https://nextjs.org/docs#custom-app) along with Motion's [`AnimatePresence`](https://www.framer.com/api/motion/animate-presence/) component, transitions between Next pages becomes simple and declarative.
-
-When using Next's ` ` component, you will likely want to [disable the default scroll behavior](https://nextjs.org/docs#disabling-the-scroll-changes-to-top-on-page) for a more seamless navigation experience. Scrolling to the top of a page can be re-enabled by adding a `onExitComplete` callback on the `AnimatePresence` component.
diff --git a/examples/with-freactal/README.md b/examples/with-freactal/README.md
index 077008de161bacc..159bc5d1e5c146d 100644
--- a/examples/with-freactal/README.md
+++ b/examples/with-freactal/README.md
@@ -1,5 +1,9 @@
# Freactal example
+When it comes to state management of the React webapp, Redux is the most popular solution. However it brings lots of boilerplate code and fiddling aroud multiple files when tracing even simplest state change.
+
+[Freactal](https://github.com/FormidableLabs/freactal) is a state management library that put this disadvantages away. With very little setup code your components' `props` are enhanced with two key ingredients: `state` and `effects`. Another benefit of Freactal is that you don't need to place _state_ at some special place (global store). You can even have multiple state roots and compose them together - just like your components (this is true also for `effects`).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-freactal with-freactal-app
+npm init next-app --example with-freactal with-freactal-app
# or
yarn create next-app --example with-freactal with-freactal-app
```
@@ -43,12 +47,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-When it comes to state management of the React webapp, Redux is the most popular solution. However it brings lots of boilerplate code and fiddling aroud multiple files when tracing even simplest state change.
-
-[Freactal](https://github.com/FormidableLabs/freactal) is a state management library that put this disadvantages away. With very little setup code your components' `props` are enhanced with two key ingredients: `state` and `effects`. Another benefit of Freactal is that you don't need to place _state_ at some special place (global store). You can even have multiple state roots and compose them together - just like your components (this is true also for `effects`).
-
### example app
In this example the `index` page renders list of public repos on GitHub for selected username. It fetches list of repos from public gihub api. First page of this list is rendered by SSR. _serverState_ is then hydrated into the `Index` page. Button at the end of the list allows to load next page of repos list from the API on the client.
diff --git a/examples/with-glamor/README.md b/examples/with-glamor/README.md
index ace637f3b33328f..ea803ab5840b7ef 100644
--- a/examples/with-glamor/README.md
+++ b/examples/with-glamor/README.md
@@ -1,5 +1,11 @@
# Example app with glamor
+This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
+In this example a custom React.createElement is used. With the help of a babel plugin we can remove the extra boilerplate introduced by having to import this function anywhere the css prop would be used. Documentation of using the `css` prop with glamor [can be found here](https://github.com/threepointone/glamor/blob/master/docs/createElement.md)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-glamor with-glamor-app
+npm init next-app --example with-glamor with-glamor-app
# or
yarn create next-app --example with-glamor with-glamor-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
-
-In this example a custom React.createElement is used. With the help of a babel plugin we can remove the extra boilerplate introduced by having to import this function anywhere the css prop would be used. Documentation of using the `css` prop with glamor [can be found here](https://github.com/threepointone/glamor/blob/master/docs/createElement.md)
diff --git a/examples/with-glamorous/README.md b/examples/with-glamorous/README.md
index 1b9a02340bb9eae..8e29d0439093f13 100644
--- a/examples/with-glamorous/README.md
+++ b/examples/with-glamorous/README.md
@@ -1,15 +1,19 @@
# Example app with [glamorous](https://github.com/kentcdodds/glamorous)
-## How to use
-
> Glamorous is no longer maintained. Choose styled-components or emotion instead
+This example features how to use [glamorous](https://github.com/kentcdodds/glamorous) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). It also incorporates [glamor](https://github.com/threepointone/glamor) since `glamor` is a dependency for `glamorous`.
+
+We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-elements and CSS animations.
+
+## How to use
+
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-glamorous with-glamorous-app
+npm init next-app --example with-glamorous with-glamorous-app
# or
yarn create next-app --example with-glamorous with-glamorous-app
```
@@ -38,9 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [glamorous](https://github.com/kentcdodds/glamorous) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). It also incorporates [glamor](https://github.com/threepointone/glamor) since `glamor` is a dependency for `glamorous`.
-
-We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-elements and CSS animations.
diff --git a/examples/with-google-analytics-amp/README.md b/examples/with-google-analytics-amp/README.md
index b54051300a63930..4b121cdfbbe8745 100644
--- a/examples/with-google-analytics-amp/README.md
+++ b/examples/with-google-analytics-amp/README.md
@@ -1,5 +1,7 @@
# Example app with google analytics & amp
+This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/) in conjunction with [AMP](https://nextjs.org/docs#amp-support). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events). There are two separate initializations of the Google Analytics tracking code; one for AMP and one for non-AMP pages.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-google-analytics-amp with-google-analytics-amp-app
+npm init next-app --example with-google-analytics-amp with-google-analytics-amp-app
# or
yarn create next-app --example with-google-analytics-amp with-google-analytics-amp-app
```
@@ -39,7 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/) in conjunction with [AMP](https://nextjs.org/docs#amp-support). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events). There are two separate initializations of the Google Analytics tracking code; one for AMP and one for non-AMP pages.
diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md
index 0400d7a6415c210..c3205e1e3065ef4 100644
--- a/examples/with-google-analytics/README.md
+++ b/examples/with-google-analytics/README.md
@@ -1,5 +1,7 @@
# Example app with analytics
+This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-google-analytics with-google-analytics-app
+npm init next-app --example with-google-analytics with-google-analytics-app
# or
yarn create next-app --example with-google-analytics with-google-analytics-app
```
@@ -39,7 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use [Next.js](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
diff --git a/examples/with-graphql-faunadb/README.md b/examples/with-graphql-faunadb/README.md
index 631cfb8f7256e86..68815c44ce86dad 100644
--- a/examples/with-graphql-faunadb/README.md
+++ b/examples/with-graphql-faunadb/README.md
@@ -20,10 +20,10 @@ To use a live FaunaDB database, create one and import this example's `schema.gql
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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:
```
-npx create-next-app --example with-graphql-faunadb with-graphql-faunadb
+npm init next-app --example with-graphql-faunadb with-graphql-faunadb
# or
yarn create next-app --example with-graphql-faunadb with-graphql-faunadb
```
diff --git a/examples/with-graphql-hooks/README.md b/examples/with-graphql-hooks/README.md
index 52e7830a4ec9f5c..350e7da7bf64e8e 100644
--- a/examples/with-graphql-hooks/README.md
+++ b/examples/with-graphql-hooks/README.md
@@ -1,5 +1,9 @@
# GraphQL Hooks Example
+[GraphQL Hooks](https://github.com/nearform/graphql-hooks) is a library from NearForm that intends to be a minimal hooks-first GraphQL client. Providing a similar API to Apollo.
+
+You'll see this shares the same [graph.cool](https://www.graph.cool) backend as the Apollo example, this is so you can compare the two side by side. The app itself should also look identical.
+
This started life as a copy of the `with-apollo` example. We then stripped out Apollo and replaced it with `graphql-hooks`. This was mostly as an exercise in ensuring basic functionality could be achieved in a similar way to Apollo. The [bundle size](https://bundlephobia.com/result?p=graphql-hooks@3.2.1) of `graphql-hooks` is tiny in comparison to Apollo and should cover a fair amount of use cases.
## Deploy your own
@@ -14,10 +18,10 @@ _Live Example: https://next-with-graphql-hooks.now.sh_
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-graphql-hooks with-graphql-hooks-app
+npm init next-app --example with-graphql-hooks with-graphql-hooks-app
# or
yarn create next-app --example with-graphql-hooks with-graphql-hooks-app
```
@@ -46,9 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[GraphQL Hooks](https://github.com/nearform/graphql-hooks) is a library from NearForm that intends to be a minimal hooks-first GraphQL client. Providing a similar API to Apollo.
-
-You'll see this shares the same [graph.cool](https://www.graph.cool) backend as the Apollo example, this is so you can compare the two side by side. The app itself should also look identical.
diff --git a/examples/with-graphql-react/README.md b/examples/with-graphql-react/README.md
index 884b4d58b773bd7..94874af0f2cfc28 100644
--- a/examples/with-graphql-react/README.md
+++ b/examples/with-graphql-react/README.md
@@ -1,40 +1,51 @@
# Next.js example with [`graphql-react`](https://github.com/jaydenseric/graphql-react)
+[`graphql-react`](https://github.com/jaydenseric/graphql-react) is a [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that is lightweight (< 2.5 KB [size limited](https://github.com/ai/size-limit)) but powerful; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react)
-## Setup
+## How to use
-1. Download the example:
+### Using `create-next-app`
- ```sh
- curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-graphql-react
- ```
+Execute [`create-next-app`](https://github.com/zeit/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:
-2. Change directory to it:
+```bash
+npm init next-app --example with-graphql-react with-graphql-react-app
+# or
+yarn create next-app --example with-graphql-react with-graphql-react-app
+```
- ```sh
- cd with-graphql-react
- ```
+### Download manually
-3. Install it:
+Download the example:
- ```sh
- npm install
- ```
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-graphql-react
+cd with-graphql-react
+```
-4. Run it:
+Install it and run:
- ```sh
- npm run dev
- ```
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
-## The idea behind the example
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
-[`graphql-react`](https://github.com/jaydenseric/graphql-react) is a [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that is lightweight (< 2.5 KB [size limited](https://github.com/ai/size-limit)) but powerful; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
+```bash
+now
+```
+
+## Notes
- In `next.config.js` Next.js config is decorated using [`withGraphQLConfig`](https://github.com/jaydenseric/next-graphql-react#function-withgraphqlconfig) from [`next-graphql-react`](https://github.com/jaydenseric/next-graphql-react), to exclude specific [`graphql-react`](https://github.com/jaydenseric/graphql-react) and [`next-graphql-react`](https://github.com/jaydenseric/next-graphql-react) server only imports from the client bundle.
- In `pages/_app.js` a [custom `App` component](https://github.com/zeit/next.js#custom-app) is decorated with the [`withGraphQLApp`](https://github.com/jaydenseric/next-graphql-react/#function-withgraphqlapp) [higher-order component](https://reactjs.org/docs/higher-order-components) from [`next-graphql-react`](https://github.com/jaydenseric/next-graphql-react), generating a `graphql` prop that populates the [`GraphQLProvider`](https://github.com/jaydenseric/graphql-react#function-graphqlprovider) component from [`graphql-react`](https://github.com/jaydenseric/graphql-react).
diff --git a/examples/with-grommet/README.md b/examples/with-grommet/README.md
index 38e00b379bb85d0..6df92ccf0fb1429 100644
--- a/examples/with-grommet/README.md
+++ b/examples/with-grommet/README.md
@@ -1,5 +1,9 @@
# Example app with Grommet
+This example shows how to use the [Grommet UI library](https://grommet.io/) with Next.js.
+
+It works by extending the ` ` to enable server-side rendering of `styled-components`, which are used by Grommet, and extending ` ` to provide a Grommet context (and optionally a theme) for all child pages and components.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-grommet with-grommet-app
+npm init next-app --example with-grommet with-grommet-app
# or
yarn create next-app --example with-grommet with-grommet-app
```
@@ -46,9 +50,3 @@ now
### Try it on CodeSandbox
[Open this example on CodeSandbox](https://codesandbox.io/s/github/zeit/next.js/tree/canary/examples/with-grommet)
-
-## The idea behind the example
-
-This example shows how to use the [Grommet UI library](https://grommet.io/) with Next.js.
-
-It works by extending the ` ` to enable server-side rendering of `styled-components`, which are used by Grommet, and extending ` ` to provide a Grommet context (and optionally a theme) for all child pages and components.
diff --git a/examples/with-hashed-statics/README.md b/examples/with-hashed-statics/README.md
index 17d0e785f1b4a7b..78c1f24c518500c 100644
--- a/examples/with-hashed-statics/README.md
+++ b/examples/with-hashed-statics/README.md
@@ -1,5 +1,9 @@
# Example app with imported and hashed statics
+This example shows how to import images, videos, etc. from `/static` and get the URL with a hash query allowing to use better cache without problems.
+
+This example supports `.svg`, `.png` and `.txt` extensions, but it can be configured to support any possible extension changing the `extensions` array in the `next.config.js` [file](https://github.com/zeit/next.js/blob/canary/examples/with-hashed-statics/next.config.js#L4).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-hashed-statics with-hashed-statics-app
+npm init next-app --example with-hashed-statics with-hashed-statics-app
# or
yarn create next-app --example with-hashed-statics with-hashed-statics-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to import images, videos, etc. from `/static` and get the URL with a hash query allowing to use better cache without problems.
-
-This example supports `.svg`, `.png` and `.txt` extensions, but it can be configured to support any possible extension changing the `extensions` array in the `next.config.js` [file](https://github.com/zeit/next.js/blob/canary/examples/with-hashed-statics/next.config.js#L4).
diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md
index db3d6adfae99482..8ae6ea93895d8a6 100644
--- a/examples/with-higher-order-component/README.md
+++ b/examples/with-higher-order-component/README.md
@@ -1,5 +1,7 @@
# Higher Order Component example
+This example show you how to create Higher Order Component in next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,11 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to
-bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-higher-order-component with-higher-order-component-app
+npm init next-app --example with-higher-order-component with-higher-order-component-app
# or
yarn create next-app --example with-higher-order-component with-higher-order-component-app
```
@@ -45,7 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now)
```bash
now
```
-
-## About example
-
-This example show you how to create Higher Order Component in next.js
diff --git a/examples/with-http2/README.md b/examples/with-http2/README.md
index efce7b7cf3b54f8..4d1a48b607db3c6 100644
--- a/examples/with-http2/README.md
+++ b/examples/with-http2/README.md
@@ -1,13 +1,15 @@
# HTTP2 server example
+This example shows the most basic example using an HTTP2 server. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-http2 with-http2-app
+npm init next-app --example with-http2 with-http2-app
# or
yarn create next-app --example with-http2 with-http2-app
```
@@ -43,7 +45,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows the most basic example using an HTTP2 server. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities.
diff --git a/examples/with-immutable-redux-wrapper/README.md b/examples/with-immutable-redux-wrapper/README.md
index 17f4db237dd8fc2..9f0760e5f26b7d8 100644
--- a/examples/with-immutable-redux-wrapper/README.md
+++ b/examples/with-immutable-redux-wrapper/README.md
@@ -1,5 +1,7 @@
# Immutable Redux Example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
> This example and documentation is based on the [with-redux-wrapper](https://github.com/zeit/next.js/tree/master/examples/with-redux-wrapper) example.
## Deploy your own
@@ -12,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-immutable-redux-wrapper with-immutable-redux-wrapper-app
+npm init next-app --example with-immutable-redux-wrapper with-immutable-redux-wrapper-app
# or
yarn create next-app --example with-immutable-redux-wrapper with-immutable-redux-wrapper-app
```
@@ -45,9 +47,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+## Notes
In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-ioc/README.md b/examples/with-ioc/README.md
index b8b2fc225209922..391e853f33bcfe6 100644
--- a/examples/with-ioc/README.md
+++ b/examples/with-ioc/README.md
@@ -1,13 +1,19 @@
# Dependency Injection (IoC) example ([ioc](https://github.com/alexindigo/ioc))
+This example uses [ioc](https://github.com/alexindigo/ioc) for dependency injection, which lets you create decoupled shared components and keep them free from implementation details of your app / other components.
+
+It builds on top of [with-next-routes](https://github.com/zeit/next.js/tree/master/examples/with-next-routes) example and makes use of dependency injection to propagate custom `Link` component to other components.
+
+Also, it illustrates ergonomics of testing using dependency injection.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-ioc with-ioc-app
+npm init next-app --example with-ioc with-ioc-app
# or
yarn create next-app --example with-ioc with-ioc-app
```
@@ -36,11 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example uses [ioc](https://github.com/alexindigo/ioc) for dependency injection, which lets you create decoupled shared components and keep them free from implementation details of your app / other components.
-
-It builds on top of [with-next-routes](https://github.com/zeit/next.js/tree/master/examples/with-next-routes) example and makes use of dependency injection to propagate custom `Link` component to other components.
-
-Also, it illustrates ergonomics of testing using dependency injection.
diff --git a/examples/with-jest-flow/README.md b/examples/with-jest-flow/README.md
index f6ad8dee410db5b..801f6874a676217 100644
--- a/examples/with-jest-flow/README.md
+++ b/examples/with-jest-flow/README.md
@@ -1,13 +1,15 @@
# Example app with Jest tests and [Flow](https://flowtype.org/)
+This example features an app with jest tests and the [Flow](https://flowtype.org/) static type checker, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-jest-flow with-jest-flow-app
+npm init next-app --example with-jest-flow with-jest-flow-app
# or
yarn create next-app --example with-jest-flow with-jest-flow-app
```
@@ -38,10 +40,3 @@ npm run test
# or
yarn test
```
-
-## The idea behind the example
-
-This example features:
-
-- An app with jest tests
-- The [Flow](https://flowtype.org/) static type checker, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code.
diff --git a/examples/with-jest-react-testing-library/README.md b/examples/with-jest-react-testing-library/README.md
index 788d96f74633592..16da585ef9777b6 100644
--- a/examples/with-jest-react-testing-library/README.md
+++ b/examples/with-jest-react-testing-library/README.md
@@ -1,13 +1,15 @@
# Example app with React Testing Library and Jest
+This example features an app with [react testing library](https://github.com/kentcdodds/react-testing-library) by [Kent Dodds](https://github.com/kentcdodds/). This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. And also, is a replacement for enzyme.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-jest-react-testing-library with-rtl-app
+npm init next-app --example with-jest-react-testing-library with-rtl-app
# or
yarn create next-app --example with-jest-react-testing-library with-rtl-app
```
@@ -38,11 +40,3 @@ npm run test
# or
yarn test
```
-
-## The idea behind the example
-
-This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. And also, is a replacement for enzyme.
-
-This example features:
-
-- An app with [react testing library](https://github.com/kentcdodds/react-testing-library) by [Kent Dodds](https://github.com/kentcdodds/)
diff --git a/examples/with-jest-typescript/README.md b/examples/with-jest-typescript/README.md
index 0bb7ac9611ae7e9..285c0755c5d5048 100644
--- a/examples/with-jest-typescript/README.md
+++ b/examples/with-jest-typescript/README.md
@@ -1,13 +1,15 @@
# Example app with Jest tests inside a NextJS TypeScript app
+This example shows a configuration and several examples for a running Jest tests in a NextJS TypeScript app.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-jest-typescript with-jest-typescript-app
+npm init next-app --example with-jest-typescript with-jest-typescript-app
# or
yarn create next-app --example with-jest-typescript with-jest-typescript-app
```
@@ -38,7 +40,3 @@ npm run test
# or
yarn test
```
-
-## The idea behind the example
-
-This example shows a configuration and several examples for a running Jest tests in a NextJS TypeScript app
diff --git a/examples/with-jest/README.md b/examples/with-jest/README.md
index b8fdadb096775c1..74c3c84fc0d211c 100644
--- a/examples/with-jest/README.md
+++ b/examples/with-jest/README.md
@@ -1,13 +1,15 @@
# Example app with Jest tests
+This example features an app with jest tests.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-jest with-jest-app
+npm init next-app --example with-jest with-jest-app
# or
yarn create next-app --example with-jest with-jest-app
```
@@ -38,9 +40,3 @@ npm run test
# or
yarn test
```
-
-## The idea behind the example
-
-This example features:
-
-- An app with jest tests
diff --git a/examples/with-kea/README.md b/examples/with-kea/README.md
index 3efd755c15b9b87..d23447a8f36290e 100644
--- a/examples/with-kea/README.md
+++ b/examples/with-kea/README.md
@@ -1,5 +1,7 @@
# kea example
+This example uses [kea](https://github.com/keajs/kea).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-kea with-kea-app
+npm init next-app --example with-kea with-kea-app
# or
yarn create next-app --example with-kea with-kea-app
```
diff --git a/examples/with-linaria/README.md b/examples/with-linaria/README.md
index abf72f44ae254aa..248e9586b980aa7 100644
--- a/examples/with-linaria/README.md
+++ b/examples/with-linaria/README.md
@@ -1,5 +1,9 @@
# Example app with [linaria](https://linaria.now.sh/)
+This example features how to use [linaria](https://linaria.now.sh/) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
+
+We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-selector and CSS animations.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-linaria with-linaria-app
+npm init next-app --example with-linaria with-linaria-app
# or
yarn create next-app --example with-linaria with-linaria-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [linaria](https://linaria.now.sh/) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx).
-
-We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseudo-selector and CSS animations.
diff --git a/examples/with-lingui/README.md b/examples/with-lingui/README.md
index ef908243205be4d..5c4058e65b2302a 100644
--- a/examples/with-lingui/README.md
+++ b/examples/with-lingui/README.md
@@ -1,5 +1,11 @@
# With Lingui example
+This example shows a way to use [lingui.js](https://lingui.js.org) with next.js.
+
+It adds a webpack loader for the messages to avoid having to manually compile while developing as well as adds the compile step to the `next build` script for production builds.
+
+The example also uses a Higher order Component which can be added to all pages which will be translated and that checks for a `?lang` query string switch the language. Next.js will dynamically load in the messages for the locale when navigating using a Next.js ` ` component.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-lingui with-lingui-app
+npm init next-app --example with-lingui with-lingui-app
# or
yarn create next-app --example with-lingui with-lingui-app
```
@@ -43,14 +49,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows a way to use [lingui.js](https://lingui.js.org) with next.js.
-
-It adds a webpack loader for the messages to avoid having to manually compile while developing as well as adds the compile step to the `next build` script for production builds.
-
-The example also uses a Higher order Component which can be added to all pages which will be translated and that checks for a `?lang` query string switch the language. Next.js will dynamically load in the messages for the locale when navigating using a Next.js ` ` component.
-
### How to add more translated strings
To add new strings use the [react component](https://lingui.js.org/tutorials/react-patterns.html#common-i18n-patterns-in-react) ` ` and then run `yarn export` to export the messages into `locale/{language}/messages.po`.
diff --git a/examples/with-loading/README.md b/examples/with-loading/README.md
index 8979eed1683ccc0..9b0463a165708e7 100644
--- a/examples/with-loading/README.md
+++ b/examples/with-loading/README.md
@@ -1,5 +1,15 @@
# Example app with page loading indicator
+Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
+
+We can simply fix this issue by showing a loading indicator. That's what this examples shows.
+
+It features:
+
+- An app with two pages which uses a common [Header](./components/Header.js) component for navigation links.
+- Using `next/router` to identify different router events
+- Uses [nprogress](https://github.com/rstacruz/nprogress) as the loading indicator.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +20,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-loading with-loading-app
+npm init next-app --example with-loading with-loading-app
# or
yarn create next-app --example with-loading with-loading-app
```
@@ -42,15 +52,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Sometimes when switching between pages, Next.js needs to download pages(chunks) from the server before rendering the page. And it may also need to wait for the data. So while doing these tasks, browser might be non responsive.
-
-We can simply fix this issue by showing a loading indicator. That's what this examples shows.
-
-It features:
-
-- An app with two pages which uses a common [Header](./components/Header.js) component for navigation links.
-- Using `next/router` to identify different router events
-- Uses [nprogress](https://github.com/rstacruz/nprogress) as the loading indicator.
diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md
index c3e4646e8dd6821..ca41b800c31bc0a 100644
--- a/examples/with-markdown/README.md
+++ b/examples/with-markdown/README.md
@@ -1,5 +1,7 @@
# With Markdown example
+This example shows how to integrate an [MDX](https://github.com/mdx-js/mdx) which is a _"JSX in Markdown loader, parser, and renderer for ambitious projects"_.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-markdown with-markdown
+npm init next-app --example with-markdown with-markdown
# or
yarn create next-app --example with-markdown with-markdown-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to integrate an [MDX](https://github.com/mdx-js/mdx) which is a _"JSX in Markdown loader, parser, and renderer for ambitious projects"_.
diff --git a/examples/with-mdx/README.md b/examples/with-mdx/README.md
index 901670ede268bc8..5790a1a3bf6f008 100644
--- a/examples/with-mdx/README.md
+++ b/examples/with-mdx/README.md
@@ -1,5 +1,7 @@
# Example app with MDX
+This example shows using [MDX](https://github.com/mdx-js/mdx) as top level pages for your next.js app.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mdx with-mdx-app
+npm init next-app --example with-mdx with-mdx-app
# or
yarn create next-app --example with-mdx with-mdx-app
```
@@ -42,8 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows using [MDX](https://github.com/mdx-js/mdx) as top level pages
-for your next.js app.
diff --git a/examples/with-mobx-keystone-typescript/README.md b/examples/with-mobx-keystone-typescript/README.md
index c9c053792462575..cb5d6c2684a5707 100644
--- a/examples/with-mobx-keystone-typescript/README.md
+++ b/examples/with-mobx-keystone-typescript/README.md
@@ -1,5 +1,7 @@
# mobx-keystone example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
+npm init next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
# or
yarn create next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
```
@@ -54,10 +56,6 @@ This example is a typescript and mobx-keysone port of the [with-redux](https://g
}
```
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
-
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
![](http://i.imgur.com/JCxtWSj.gif)
diff --git a/examples/with-mobx-react-lite/README.md b/examples/with-mobx-react-lite/README.md
index 5ddce41585866d8..18dea1de3547d3b 100644
--- a/examples/with-mobx-react-lite/README.md
+++ b/examples/with-mobx-react-lite/README.md
@@ -1,5 +1,7 @@
# MobX example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use MobX that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mobx-react-lite with-mobx-react-lite-app
+npm init next-app --example with-mobx-react-lite with-mobx-react-lite-app
# or
yarn create next-app --example with-mobx-react-lite with-mobx-react-lite-app
```
@@ -45,16 +47,12 @@ now
## Notes
-This example is a mobx-react-lite port of the [with-mobx](https://github.com/zeit/next.js/tree/master/examples/with-mobx) example. MobX support has been implemented using React Hooks:
-
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use MobX that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
-
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
![](http://i.imgur.com/JCxtWSj.gif)
+This example is a mobx-react-lite port of the [with-mobx](https://github.com/zeit/next.js/tree/master/examples/with-mobx) example. MobX support has been implemented using React Hooks.
+
Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the MobX store and returning the initial timestamp to be rendered. The root component for the render method is a React context provider that allows us to send the store down to children components so they can access to the state when required.
To pass the initial timestamp from the server to the client we pass it as a prop called `lastUpdate` so then it's available when the client takes over.
diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md
index 46fb8851f3d4313..5ea9a8158c9b120 100644
--- a/examples/with-mobx-state-tree-typescript/README.md
+++ b/examples/with-mobx-state-tree-typescript/README.md
@@ -1,5 +1,7 @@
# MobX State Tree example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
+npm init next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
# or
yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app
```
@@ -58,9 +60,7 @@ This example is a typescript and mobx-state-tree port of the [with-redux](https:
After initializing the store (and possibly making changes such as fetching data), `getInitialProps` must stringify the store in order to pass it as props to the client. `mobx-state-tree` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is sent to the client as `props.initialState` where the pages's `constructor()` may use it to rehydrate the client store.
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+## Notes
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md
index a3edb872683db30..4379ea24083e742 100644
--- a/examples/with-mobx-state-tree/README.md
+++ b/examples/with-mobx-state-tree/README.md
@@ -1,5 +1,7 @@
# MobX State Tree example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mobx-state-tree with-mobx-state-tree-app
+npm init next-app --example with-mobx-state-tree with-mobx-state-tree-app
# or
yarn create next-app --example with-mobx-state-tree with-mobx-state-tree-app
```
@@ -58,9 +60,7 @@ This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/
After initializing the store (and possibly making changes such as fetching data), `getInitialProps` must stringify the store in order to pass it as props to the client. `mobx-state-tree` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is sent to the client as `props.initialState` where the pages's `constructor()` may use it to rehydrate the client store.
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+## Notes
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-mobx/README.md b/examples/with-mobx/README.md
index 5924f8f59a812ea..31ae05c42e285a2 100644
--- a/examples/with-mobx/README.md
+++ b/examples/with-mobx/README.md
@@ -1,5 +1,7 @@
# MobX example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mobx with-mobx-app
+npm init next-app --example with-mobx with-mobx-app
# or
yarn create next-app --example with-mobx with-mobx-app
```
@@ -61,9 +63,7 @@ This example is a mobx port of the [with-redux](https://github.com/zeit/next.js/
Be aware that data that was used on the server (and provided via `getInitialProps`) will be stringified in order to rehydrate the client with it. That means, if you create a store that is, say, an `ObservableMap` and give it as prop to a page, then the server will render appropriately. But stringifying it for the client will turn the `ObservableMap` to an ordinary JavaScript object (which does not have `Map`-style methods and is not an observable). So it is better to create the store as a normal object and turn it into a `Observable` in the `render()` method. This way both sides have an `Observable` to work with.
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+## Notes
In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-mocha/README.md b/examples/with-mocha/README.md
index 4b9d7cef47beda7..8e42f143ac05147 100644
--- a/examples/with-mocha/README.md
+++ b/examples/with-mocha/README.md
@@ -1,13 +1,15 @@
# Example app with Mocha tests
+This example features an app with Mocha tests.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-mocha with-mocha-app
+npm init next-app --example with-mocha with-mocha-app
# or
yarn create next-app --example with-mocha with-mocha-app
```
@@ -39,10 +41,4 @@ npm run test
yarn test
```
-## The idea behind the example
-
-This example features:
-
-- An app with Mocha tests
-
> 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/zeit/next.js/issues/2895).
diff --git a/examples/with-netlify-cms/readme.md b/examples/with-netlify-cms/README.md
similarity index 83%
rename from examples/with-netlify-cms/readme.md
rename to examples/with-netlify-cms/README.md
index f5f0ef31d03ddb9..3322c374471d640 100644
--- a/examples/with-netlify-cms/readme.md
+++ b/examples/with-netlify-cms/README.md
@@ -1,13 +1,15 @@
# Example app using Netlify CMS
+[Netlify CMS](https://www.netlifycms.org/) is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/segmentio/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/zeit/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
-npx create-next-app --example with-netlify-cms with-netlify-cms-app
+npm init next-app --example with-netlify-cms with-netlify-cms-app
# or
yarn create next-app --example with-netlify-cms with-netlify-cms-app
```
@@ -37,10 +39,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-[Netlify CMS](https://www.netlifycms.org/) is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
-
## How it works
Sites take its content from markdown files in `/content`. Two of pages (`home` and `about`) are referencing directly their respective markdown files.
diff --git a/examples/with-next-css/README.md b/examples/with-next-css/README.md
index 536fea0e1c2c22e..f7e5983c9c607ca 100644
--- a/examples/with-next-css/README.md
+++ b/examples/with-next-css/README.md
@@ -1,5 +1,7 @@
# next-css example
+This example demonstrates how to use Next.js' built-in CSS imports and CSS modules support.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-css with-next-css-app
+npm init next-app --example with-next-css with-next-css-app
# or
yarn create next-app --example with-next-css with-next-css-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example demonstrates how to use Next.js' built-in CSS imports and CSS modules support.
diff --git a/examples/with-next-less/README.md b/examples/with-next-less/README.md
index fa64075b2bcd7fe..bc298d10f6f5d51 100644
--- a/examples/with-next-less/README.md
+++ b/examples/with-next-less/README.md
@@ -1,5 +1,9 @@
# Example App with next-less
+This example demonstrates how to use the [next-less plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-less).
+
+It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-less plugin.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-less with-next-less-app
+npm init next-app --example with-next-less with-next-less-app
# or
yarn create next-app --example with-next-less with-next-less-app
```
@@ -42,8 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example demonstrates how to use the [next-less plugin](https://github.com/zeit/next-plugins/tree/master/packages/next-less).
-It includes patterns for with and without CSS Modules, with PostCSS and with additional webpack configurations on top of the next-less plugin.
diff --git a/examples/with-next-offline/README.md b/examples/with-next-offline/README.md
index 087a1d0d7f42411..8f256c529c43efd 100644
--- a/examples/with-next-offline/README.md
+++ b/examples/with-next-offline/README.md
@@ -1,13 +1,15 @@
# next-offline example
+This example demonstrates how to use the [next-offline plugin](https://github.com/hanford/next-offline) It includes manifest.json to install app via chrome
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-offline with-next-offline-app
+npm init next-app --example with-next-offline with-next-offline-app
# or
yarn create next-app --example with-next-offline with-next-offline-app
```
@@ -68,7 +70,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example demonstrates how to use the [next-offline plugin](https://github.com/hanford/next-offline) It includes manifest.json to install app via chrome
diff --git a/examples/with-next-page-transitions/README.md b/examples/with-next-page-transitions/README.md
index 5f61a7398dfd347..703cde4611731a3 100644
--- a/examples/with-next-page-transitions/README.md
+++ b/examples/with-next-page-transitions/README.md
@@ -1,5 +1,9 @@
# next-page-transitions example
+The [`next-page-transitions`](https://github.com/illinois/next-page-transitions) library is a component that sits at the app level and allows you to animate page changes. It works especially nicely with apps with a shared layout element, like a navbar. This component will ensure that only one page is ever mounted at a time, and manages the timing of animations for you. This component works similarly to [`react-transition-group`](https://github.com/reactjs/react-transition-group) in that it applies classes to a container around your page; it's up to you to write the CSS transitions or animations to make things pretty!
+
+This example includes two pages with links between them. The "About" page demonstrates how `next-page-transitions` makes it easy to add a loading state when navigating to a page: it will wait for the page to "load" its content (in this examples, that's simulated with a timeout) and then hide the loading indicator and animate in the page when it's done.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-page-transitions with-next-page-transitions
+npm init next-app --example with-next-page-transitions with-next-page-transitions
# or
yarn create next-app --example with-next-page-transitions with-next-page-transitions
```
@@ -40,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The [`next-page-transitions`](https://github.com/illinois/next-page-transitions) library is a component that sits at the app level and allows you to animate page changes. It works especially nicely with apps with a shared layout element, like a navbar. This component will ensure that only one page is ever mounted at a time, and manages the timing of animations for you. This component works similarly to [`react-transition-group`](https://github.com/reactjs/react-transition-group) in that it applies classes to a container around your page; it's up to you to write the CSS transitions or animations to make things pretty!
-
-This example includes two pages with links between them. The "About" page demonstrates how `next-page-transitions` makes it easy to add a loading state when navigating to a page: it will wait for the page to "load" its content (in this examples, that's simulated with a timeout) and then hide the loading indicator and animate in the page when it's done.
diff --git a/examples/with-next-routes/README.md b/examples/with-next-routes/README.md
index 537a8f856132174..a6cec8dd92760ca 100644
--- a/examples/with-next-routes/README.md
+++ b/examples/with-next-routes/README.md
@@ -1,13 +1,17 @@
# Named routes example ([next-routes](https://github.com/fridays/next-routes))
+This example uses [next-routes](https://github.com/fridays/next-routes) for dynamic routing, which lets you define parameterized, named routes with express-style parameters matching.
+
+It works similar to the [parameterized-routing](https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) example and makes use of next.js [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) possibilities.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-routes with-next-routes-app
+npm init next-app --example with-next-routes with-next-routes-app
# or
yarn create next-app --example with-next-routes with-next-routes-app
```
@@ -36,9 +40,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example uses [next-routes](https://github.com/fridays/next-routes) for dynamic routing, which lets you define parameterized, named routes with express-style parameters matching.
-
-It works similar to the [parameterized-routing](https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) example and makes use of next.js [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) possibilities.
diff --git a/examples/with-next-sass/README.md b/examples/with-next-sass/README.md
index 2a9c53e449748cc..a7bdee16fa9cc42 100644
--- a/examples/with-next-sass/README.md
+++ b/examples/with-next-sass/README.md
@@ -1,5 +1,7 @@
# Example app with next-sass
+This example uses next-sass without css-modules. The config can be found in `next.config.js`, change `withSass()` to `withSass({cssModules: true})` if you use css-modules. Then in the code, you import the stylesheet as `import style from '../styles/style.scss'` and use it like ``. [Learn more](https://github.com/zeit/next-plugins/tree/master/packages/next-sass).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-sass with-next-sass-app
+npm init next-app --example with-next-sass with-next-sass-app
# or
yarn create next-app --example with-next-sass with-next-sass-app
```
@@ -52,13 +54,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- An app with next-sass
-
-This example uses next-sass without css-modules. The config can be found in `next.config.js`, change `withSass()` to `withSass({cssModules: true})` if you use css-modules. Then in the code, you import the stylesheet as `import style from '../styles/style.scss'` and use it like `
`.
-
-[Learn more](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
diff --git a/examples/with-next-seo/README.md b/examples/with-next-seo/README.md
index 5643f8e9d604dbc..bedaa7082504706 100644
--- a/examples/with-next-seo/README.md
+++ b/examples/with-next-seo/README.md
@@ -1,5 +1,7 @@
# Next SEO example
+This example shows how you integrate [next-seo](https://github.com/garmeeh/next-seo), a plugin to help manage your SEO in Next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-next-seo next-seo-app
+npm init next-app --example with-next-seo next-seo-app
# or
yarn create next-app --example with-next-seo next-seo-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Example shows how you integrate [next-seo](https://github.com/garmeeh/next-seo), a plugin to help manage your SEO in Next.js
diff --git a/examples/with-noscript/README.md b/examples/with-noscript/README.md
index 3ec632409d1061f..de5e3b32127de91 100644
--- a/examples/with-noscript/README.md
+++ b/examples/with-noscript/README.md
@@ -1,5 +1,7 @@
# Noscript example
+This example show you how to use `
` with image resource in next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-noscript with-noscript-app
+npm init next-app --example with-noscript with-noscript-app
# or
yarn create next-app --example with-noscript with-noscript-app
```
@@ -66,7 +68,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## About example
-
-This example show you how to use `
` with image resource in next.js
diff --git a/examples/with-now-env/README.md b/examples/with-now-env/README.md
index 8cc5955352e800d..b44a64f92792323 100644
--- a/examples/with-now-env/README.md
+++ b/examples/with-now-env/README.md
@@ -1,13 +1,15 @@
# Now-env example
+This example shows the usage of [Now Secrets](https://zeit.co/docs/v2/deployments/environment-variables-and-secrets/?query=secret#securing-environment-variables-using-secrets) and [now dev](https://zeit.co/docs/v2/development/basics), it shows how to add environment variables in development that can be replaced in production by the secrets defined with [Now](https://zeit.co/now).
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-now-env with-now-env-app
+npm init next-app --example with-now-env with-now-env-app
# or
yarn create next-app --example with-now-env with-now-env-app
```
@@ -42,7 +44,3 @@ now
```
keep in mind that in order to deploy the app to `now` the env [secrets](https://zeit.co/docs/getting-started/secrets) defined in `now.json` should be listed in your account.
-
-## The idea behind the example
-
-This example shows the usage of [Now Secrets](https://zeit.co/docs/v2/deployments/environment-variables-and-secrets/?query=secret#securing-environment-variables-using-secrets) and [now dev](https://zeit.co/docs/v2/development/basics), it shows how to add environment variables in development that can be replaced in production by the secrets defined with [Now](https://zeit.co/now).
diff --git a/examples/with-office-ui-fabric-react/README.md b/examples/with-office-ui-fabric-react/README.md
index 55d671b5565b864..59c707b5ef46440 100644
--- a/examples/with-office-ui-fabric-react/README.md
+++ b/examples/with-office-ui-fabric-react/README.md
@@ -1,13 +1,15 @@
# Office UI Fabric React example
+This example shows how to use Office UI Fabric React in Next.js.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-office-ui-fabric-react with-office-ui-fabric-react-app
+npm init next-app --example with-office-ui-fabric-react with-office-ui-fabric-react-app
# or
yarn create next-app --example with-office-ui-fabric-react with-office-ui-fabric-react-app
```
@@ -36,7 +38,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Office UI Fabric React in Next.js.
diff --git a/examples/with-orbit-components/README.md b/examples/with-orbit-components/README.md
index 7870c6dd470cdad..0ddd9c6d3ce4a42 100644
--- a/examples/with-orbit-components/README.md
+++ b/examples/with-orbit-components/README.md
@@ -1,5 +1,11 @@
# Example app with styled-components
+[Orbit-components](https://orbit.kiwi) is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
+
+For this purpose we are extending `
` of injected `
`, and also adding `@kiwicom/babel-plugin-orbit-components`.
+
+This fork comes from [styled-components-example](https://github.com/zeit/next.js/tree/canary/examples/with-styled-components).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-orbit-components with-orbit-components-app
+npm init next-app --example with-orbit-components with-orbit-components-app
# or
yarn create next-app --example with-orbit-components with-orbit-components-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Orbit-components](https://orbit.kiwi) is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
-
-For this purpose we are extending `
` of injected `
`, and also adding `@kiwicom/babel-plugin-orbit-components`
-
-This fork comes from [styled-components-example](https://github.com/zeit/next.js/tree/canary/examples/with-styled-components)
diff --git a/examples/with-overmind/README.md b/examples/with-overmind/README.md
index 3466a1ffae60e59..bcf8058f5e74473 100644
--- a/examples/with-overmind/README.md
+++ b/examples/with-overmind/README.md
@@ -1,5 +1,7 @@
# Overmind example
+This example uses [overmind](https://overmindjs.org/?view=react&typescript=false).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-overmind with-overmind-app
+npm init next-app --example with-overmind with-overmind-app
# or
yarn create next-app --example with-overmind with-overmind-app
```
diff --git a/examples/with-patternfly/README.md b/examples/with-patternfly/README.md
index b92ea2321ae8c28..77cdd7e9ee02588 100644
--- a/examples/with-patternfly/README.md
+++ b/examples/with-patternfly/README.md
@@ -1,5 +1,7 @@
# Patternfly example
+This example shows how to use Next.js along with [Patterfly](https://www.patternfly.org/v4/) including handling of external styles and assets. This is intended to show the integration of this design system with the Framework.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-patternfly with-patternfly-app
+npm init next-app --example with-patternfly with-patternfly-app
# or
yarn create next-app --example with-patternfly with-patternfly-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Patterfly](https://www.patternfly.org/v4/) including handling of external styles and assets. This is intended to show the integration of this design system with the Framework.
diff --git a/examples/with-pkg/README.md b/examples/with-pkg/README.md
index 4db5f0fd4c8b202..e729cfb89a89d31 100644
--- a/examples/with-pkg/README.md
+++ b/examples/with-pkg/README.md
@@ -1,13 +1,17 @@
# Example with pkg
+This example demonstrate how you can use [pkg](https://github.com/zeit/pkg) to create a binary version of a Next.js application.
+
+To do it we need to create at least a super simple custom server that allow us to run `node server.js` instead of `next` or `next start`. We also need to create a `index.js` that works as the entry point for **pkg**, in that file we force to set NODE_ENV as production.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-pkg with-pkg-app
+npm init next-app --example with-pkg with-pkg-app
# or
yarn create next-app --example with-pkg with-pkg-app
```
@@ -40,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example demonstrate how you can use [pkg](https://github.com/zeit/pkg) to create a binary version of a Next.js application.
-
-To do it we need to create at least a super simple custom server that allow us to run `node server.js` instead of `next` or `next start`. We also need to create a `index.js` that works as the entry point for **pkg**, in that file we force to set NODE_ENV as production.
diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md
index 9c64ca46803b7c0..e7f8355c5a70479 100644
--- a/examples/with-polyfills/README.md
+++ b/examples/with-polyfills/README.md
@@ -1,5 +1,9 @@
# Example app with polyfills
+Next.js supports browsers from IE10 to the latest. It adds polyfills as they need. But Next.js cannot add polyfills for code inside NPM modules. So sometimes, you need to add polyfills by yourself.
+
+This how you can do it easily with Next.js's custom webpack config feature.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-polyfills with-polyfills-app
+npm init next-app --example with-polyfills with-polyfills-app
# or
yarn create next-app --example with-polyfills with-polyfills-app
```
@@ -42,10 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js supports browsers from IE10 to the latest. It adds polyfills as they need. But Next.js cannot add polyfills for code inside NPM modules.
-So sometimes, you need to add polyfills by yourself.
-
-This how you can do it easily with Next.js's custom webpack config feature.
diff --git a/examples/with-portals-ssr/README.md b/examples/with-portals-ssr/README.md
index 7f7df9344802dfd..316bc24176b538c 100644
--- a/examples/with-portals-ssr/README.md
+++ b/examples/with-portals-ssr/README.md
@@ -1,5 +1,7 @@
# Example with Server Side Rendered portals
+An example of Server Side Rendered React [Portals](https://reactjs.org/docs/portals.html) with [`@jesstelford/react-portal-universal`](https://www.npmjs.com/package/@jesstelford/react-portal-universal) and Next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-portals-ssr with-portals-ssr
+npm init next-app --example with-portals-ssr with-portals-ssr
# or
yarn create next-app --example with-portals-ssr with-portals-ssr
```
@@ -42,9 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-An example of Server Side Rendered React [Portals](https://reactjs.org/docs/portals.html) with
-[`@jesstelford/react-portal-universal`](https://www.npmjs.com/package/@jesstelford/react-portal-universal)
-and Next.js.
diff --git a/examples/with-portals/README.md b/examples/with-portals/README.md
index ddbbca8a1a2c357..2bf739eea8b171b 100644
--- a/examples/with-portals/README.md
+++ b/examples/with-portals/README.md
@@ -1,5 +1,7 @@
# Example with portals
+This example show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-portals with-portals-app
+npm init next-app --example with-portals with-portals-app
# or
yarn create next-app --example with-portals with-portals-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example show how to use the React [Portals](https://reactjs.org/docs/portals.html) feature with Next.js.
diff --git a/examples/with-prefetching/README.md b/examples/with-prefetching/README.md
index 1adf887807c5f9b..faa1ec58cb43b1f 100644
--- a/examples/with-prefetching/README.md
+++ b/examples/with-prefetching/README.md
@@ -1,5 +1,11 @@
# Example app with prefetching pages
+This example features an app with four simple pages:
+
+- Home/Features: Default API
+- About: Imperative API
+- Contact: Disable API
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-prefetching with-prefetching-app
+npm init next-app --example with-prefetching with-prefetching-app
# or
yarn create next-app --example with-prefetching with-prefetching-app
```
@@ -42,13 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- An app with four simple pages
-
- - Home/Features: Default api
- - About: Imperative api
- - Contact: Disable api
diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md
index f5b16f2c6a44b3a..c521f503fe761bb 100644
--- a/examples/with-pretty-url-routing/README.md
+++ b/examples/with-pretty-url-routing/README.md
@@ -1,13 +1,18 @@
# Example app with pretty url routing
+This example features:
+
+- route customisation and parameterization
+- reverse routing
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-pretty-url-routing with-pretty-url-routing-app
+npm init next-app --example with-pretty-url-routing with-pretty-url-routing-app
# or
yarn create next-app --example with-pretty-url-routing with-pretty-url-routing-app
```
@@ -36,10 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features:
-
-- route customisation and parameterization
-- reverse routing
diff --git a/examples/with-quill-js/README.md b/examples/with-quill-js/README.md
index 1b97ad7630db9d7..7b0f85e209254ff 100644
--- a/examples/with-quill-js/README.md
+++ b/examples/with-quill-js/README.md
@@ -1,5 +1,9 @@
# Quilljs editor Example
+[Quill](https://quilljs.com/) is powerful rich text editor. This example uses [react-quill](https://github.com/zenoamaro/react-quill) to integrate Quill with Next.js.
+
+Quill does not suppport SSR, so it's only loaded and rendered in the browser.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-quill-js with-quill-js-app
+npm init next-app --example with-quill-js with-quill-js-app
# or
yarn create next-app --example with-quill-js with-quill-js-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Quill](https://quilljs.com/) is powerful rich text editor. This example uses [react-quill](https://github.com/zenoamaro/react-quill) to integrate Quill with Next.js.
-
-Quill does not suppport SSR, so it's only loaded and rendered in the browser.
diff --git a/examples/with-rbx-bulma-pro/README.md b/examples/with-rbx-bulma-pro/README.md
index d73a035db2b800b..2e98007e3548d6b 100644
--- a/examples/with-rbx-bulma-pro/README.md
+++ b/examples/with-rbx-bulma-pro/README.md
@@ -1,5 +1,7 @@
# rbx & bulma-pro example
+This example shows how to use Next.js along with [rbx](https://github.com/dfee/rbx)(Bulma UI Framework for react) and [Bulma Pro](https://mubaidr.js.org/bulma-pro/).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute create-next-app with yarn or npm to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-rbx-bulma-pro with-rbx-bulma-pro-app
+npm init next-app --example with-rbx-bulma-pro with-rbx-bulma-pro-app
# or
yarn create next-app --example with-rbx-bulma-pro with-rbx-bulma-pro-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [rbx](https://github.com/dfee/rbx)(Bulma UI Framework for react) and [Bulma Pro](https://mubaidr.js.org/bulma-pro/).
diff --git a/examples/with-react-esi/README.md b/examples/with-react-esi/README.md
index 8d567475579cc5d..f91931570d68671 100644
--- a/examples/with-react-esi/README.md
+++ b/examples/with-react-esi/README.md
@@ -1,15 +1,21 @@
# React ESI example
+React Server Side rendering is very costly and takes a lot of server's CPU power for that.
+One of the best solutions for this problem is cache fragments of rendered pages, each fragment corresponding to a component subtree.
+This example shows how to leverage [React ESI](https://github.com/dunglas/react-esi) and the Varnish HTTP accelerator to improve dramatically the performance of an app.
+
+The example (and the underlying lib) can work with any ESI implementation, including Akamai, Fastly and Cloudflare Workers.
+
# Example app with prefetching pages
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-esi with-react-esi-app
+npm init next-app --example with-react-esi with-react-esi-app
# or
yarn create next-app --example with-react-esi with-react-esi-app
```
@@ -31,11 +37,3 @@ Run the following command to start the project:
```bash
docker-compose up
```
-
-## The idea behind the example
-
-React Server Side rendering is very costly and takes a lot of server's CPU power for that.
-One of the best solutions for this problem is cache fragments of rendered pages, each fragment corresponding to a component subtree.
-This example shows how to leverage [React ESI](https://github.com/dunglas/react-esi) and the Varnish HTTP accelerator to improve dramatically the performance of an app.
-
-The example (and the underlying lib) can work with any ESI implementation, including Akamai, Fastly and Cloudflare Workers.
diff --git a/examples/with-react-ga/README.md b/examples/with-react-ga/README.md
index 2491ab96f7bd65b..26ab3d134782561 100644
--- a/examples/with-react-ga/README.md
+++ b/examples/with-react-ga/README.md
@@ -1,5 +1,8 @@
# React-GA example
+This example shows the most basic way to use [react-ga](https://github.com/react-ga/react-ga) using custom [App](https://github.com/zeit/next.js#custom-app)
+component with NextJs. Modify `Tracking ID` in `utils/analytics.js` file for testing this example.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +13,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-ga with-react-ga-app
+npm init next-app --example with-react-ga with-react-ga-app
# or
yarn create next-app --example with-react-ga with-react-ga-app
```
@@ -42,8 +45,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows the most basic way to use [react-ga](https://github.com/react-ga/react-ga) using custom [App](https://github.com/zeit/next.js#custom-app)
-component with NextJs. Modify `Tracking ID` in `utils/analytics.js` file for testing this example.
diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md
index ba58bc8ade46650..8d810a7610dedb5 100644
--- a/examples/with-react-helmet/README.md
+++ b/examples/with-react-helmet/README.md
@@ -1,5 +1,10 @@
# react-helmet example
+This an minimalistic example of how to combine next.js and [react-helmet](https://github.com/nfl/react-helmet).
+The title of the page shall be changed to "Hello next.js!"
+If you go to the page `/about`, the title will be overridden to "About | Hello next.js!"
+The rest is all up to you.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +15,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-helmet with-react-helmet-app
+npm init next-app --example with-react-helmet with-react-helmet-app
# or
yarn create next-app --example with-react-helmet with-react-helmet-app
```
@@ -45,10 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## Notes
-
-This an minimalistic example of how to combine next.js and [react-helmet](https://github.com/nfl/react-helmet).
-The title of the page shall be changed to "Hello next.js!"
-If you go to the page `/about`, the title will be overridden to "About | Hello next.js!"
-The rest is all up to you.
diff --git a/examples/with-react-intl/README.md b/examples/with-react-intl/README.md
index 1c13d3c6a95c2e6..0169286b036dd2e 100644
--- a/examples/with-react-intl/README.md
+++ b/examples/with-react-intl/README.md
@@ -1,13 +1,15 @@
# Example app with [React Intl][]
+This example app shows how to integrate [React Intl][] with Next.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-intl with-react-intl-app
+npm init next-app --example with-react-intl with-react-intl-app
# or
yarn create next-app --example with-react-intl with-react-intl-app
```
@@ -37,10 +39,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example app shows how to integrate [React Intl][] with Next.
-
### Features of this example app
- Server-side language negotiation
diff --git a/examples/with-react-jss/README.md b/examples/with-react-jss/README.md
index 6000524a376075d..7b68e4ee6365f32 100644
--- a/examples/with-react-jss/README.md
+++ b/examples/with-react-jss/README.md
@@ -1,5 +1,9 @@
# react-jss example
+This example shows how to integrate react-jss and jss in Next.js
+
+The critical styles will be injected into the head when server rendered.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-jss with-react-jss-app
+npm init next-app --example with-react-jss with-react-jss-app
# or
yarn create next-app --example with-react-jss with-react-jss-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to integrate react-jss and jss in Next.js
-
-The critical styles will be injected into the head when server rendered.
diff --git a/examples/with-react-md/README.md b/examples/with-react-md/README.md
index 3387dc9049e893b..8040f0abcecbd3f 100644
--- a/examples/with-react-md/README.md
+++ b/examples/with-react-md/README.md
@@ -1,5 +1,9 @@
# Example app with react-md
+This example features how you use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
+
+I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.
+
![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
## Deploy your own
@@ -12,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-md with-react-md-app
+npm init next-app --example with-react-md with-react-md-app
# or
yarn create next-app --example with-react-md with-react-md-app
```
@@ -46,9 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use [react-md](https://react-md.mlaursen.com/) (React Material Design) with Next.js.
-
-I recommend reading [layout-component](../layout-component) example next to learn how to reuse the layout across the pages.
diff --git a/examples/with-react-multi-carousel/README.md b/examples/with-react-multi-carousel/README.md
index 95608ad7a218e1d..442005bc0750106 100644
--- a/examples/with-react-multi-carousel/README.md
+++ b/examples/with-react-multi-carousel/README.md
@@ -1,6 +1,6 @@
# react-multi-carousel example
-Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.
+[react-multi-carousel](https://www.npmjs.com/package/react-multi-carousel) is a React component that provides a Carousel that renders on the server-side that supports multiple items with no external dependency.
## Deploy your own
@@ -14,10 +14,10 @@ _Live Example: https://react-multi-carousel.now.sh_
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-multi-carousel with-react-multi-carousel-app
+npm init next-app --example with-react-multi-carousel with-react-multi-carousel-app
# or
yarn create next-app --example with-react-multi-carousel with-react-multi-carousel-app
```
@@ -47,15 +47,11 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-[react-multi-carousel](https://www.npmjs.com/package/react-multi-carousel) is a React component that provides a Carousel that renders on the server-side that supports multiple items with no external dependency.
-
-The reason for that is i needed to implement a Carousel component for my own project, but couldn't find any that is lightweight and supports both ssr and allows me to customized.
-
## How does it work with ssr?
- On the server-side, we detect the user's device to decide how many items we are showing and then using flex-basis to assign \* width to the carousel item.
- On the client-side, old fashion getting width of the container and assign the average of it to each carousel item.
The UI part of this example is copy paste from for the sake of simplicity. [with-material-ui](https://github.com/zeit/next.js/tree/canary/examples/with-material-ui)
+
+Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.
diff --git a/examples/with-react-native-web/README.md b/examples/with-react-native-web/README.md
index 59ab5c78c6cf5d3..862ce0d3a7b63ff 100644
--- a/examples/with-react-native-web/README.md
+++ b/examples/with-react-native-web/README.md
@@ -1,5 +1,11 @@
# React Native Web example
+This example features how to use [react-native-web](https://github.com/necolas/react-native-web) to bring the platform-agnostic Components and APIs of React Native to the web.
+
+> **High-quality user interfaces**: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
+>
+> **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-native-web
+npm init next-app --example with-react-native-web
# or
yarn create next-app --example with-react-native-web with-react-native-web-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how to use [react-native-web](https://github.com/necolas/react-native-web) to bring the platform-agnostic Components and APIs of React Native to the web.
-
-> **High-quality user interfaces**: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
->
-> **Write once, render anywhere**: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.
diff --git a/examples/with-react-relay-network-modern/README.md b/examples/with-react-relay-network-modern/README.md
index 4e82d7a721669e9..140ba5aca01e9d0 100644
--- a/examples/with-react-relay-network-modern/README.md
+++ b/examples/with-react-relay-network-modern/README.md
@@ -1,5 +1,11 @@
# Relay Modern Example
+[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
+
+In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
+
+This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-relay-network-modern with-react-relay-network-modern-app
+npm init next-app --example with-react-relay-network-modern with-react-relay-network-modern-app
# or
yarn create next-app --example with-react-relay-network-modern with-react-relay-network-modern-app
```
@@ -64,11 +70,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
-
-In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
-
-This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md
index 16259d2ef35eb52..cd7389398abf0e2 100644
--- a/examples/with-react-toolbox/README.md
+++ b/examples/with-react-toolbox/README.md
@@ -1,5 +1,9 @@
# With react-toolbox example
+This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr).
+
+For actual use, you probably also want to add Roboto Font, and Material Design Icons. See
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-toolbox with-react-toolbox-app
+npm init next-app --example with-react-toolbox with-react-toolbox-app
# or
yarn create next-app --example with-react-toolbox with-react-toolbox-app
```
@@ -44,9 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr).
-
-For actual use, you probably also want to add Roboto Font, and Material Design Icons. See
diff --git a/examples/with-react-useragent/README.md b/examples/with-react-useragent/README.md
index 86f66fea670fdc2..1030108a0f56767 100644
--- a/examples/with-react-useragent/README.md
+++ b/examples/with-react-useragent/README.md
@@ -1,6 +1,13 @@
# react-useragent example
-Show how to setup [@quentin-sommer/react-useragent](https://github.com/quentin-sommer/react-useragent) using next.js client side and server side rendering.
+This example shows how to add user-agent awarness to your next.js app and set it up for server side rendering using [@quentin-sommer/react-useragent](https://github.com/quentin-sommer/react-useragent). It will enable you to directly detect the device from the server side.
+
+You can then decide what to render depending on the device. For example:
+
+- Smaller image for phones
+- Dedicated download button fos iOS devices.
+
+The example uses the `pages/_app.js` file to automatically inject user-agent detection in all your pages.
## Deploy your own
@@ -12,10 +19,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-useragent with-react-useragent-app
+npm init next-app --example with-react-useragent with-react-useragent-app
# or
yarn create next-app --example with-react-useragent with-react-useragent-app
```
@@ -44,14 +51,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to add user-agent awarness to your next.js app and set it up for server side rendering. It will enable you to directly detect the device from the server side.
-
-You can then decide what to render depending on the device. For example:
-
-- Smaller image for phones
-- Dedicated download button fos iOS devices.
-
-The example uses the `pages/_app.js` file to automatically injectuser-agent detection in all your pages.
diff --git a/examples/with-react-uwp/README.md b/examples/with-react-uwp/README.md
index a04983e212a9583..dfc0832c0b70c03 100644
--- a/examples/with-react-uwp/README.md
+++ b/examples/with-react-uwp/README.md
@@ -1,5 +1,7 @@
# React-UWP example
+This example features how you use [react-uwp](https://github.com/myxvisual/react-uwp) (React Components that Implement Microsoft's UWP Design & Fluent Design.) with Next.js.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-uwp with-react-uwp-app
+npm init next-app --example with-react-uwp with-react-uwp-app
# or
yarn create next-app --example with-react-uwp with-react-uwp-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use [react-uwp](https://github.com/myxvisual/react-uwp) (React Components that Implement Microsoft's UWP Design & Fluent Design.) with Next.js.
diff --git a/examples/with-react-with-styles/README.md b/examples/with-react-with-styles/README.md
index 108df4f0f2fe65b..d42efd9413f875a 100644
--- a/examples/with-react-with-styles/README.md
+++ b/examples/with-react-with-styles/README.md
@@ -1,5 +1,13 @@
# Example app with react-with-styles
+This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles.
+That means we can serve the required styles for the first render within the HTML and then load the rest in the client.
+In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
+We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/zeit/next.js/tree/master/examples/with-aphrodite).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-react-with-styles with-react-with-styles-app
+npm init next-app --example with-react-with-styles with-react-with-styles-app
# or
yarn create next-app --example with-react-with-styles with-react-with-styles-app
```
@@ -42,13 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles.
-That means we can serve the required styles for the first render within the HTML and then load the rest in the client.
-In this case we are using [react-with-styles](https://github.com/airbnb/react-with-styles).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
-
-We are using `pages/_index.js` from this example [with-aphrodite](https://github.com/zeit/next.js/tree/master/examples/with-aphrodite).
diff --git a/examples/with-reasonml-todo/README.md b/examples/with-reasonml-todo/README.md
index 23cc00c1597c94f..6b2123030d2d6d4 100644
--- a/examples/with-reasonml-todo/README.md
+++ b/examples/with-reasonml-todo/README.md
@@ -6,6 +6,14 @@ global state object can be used to track state across page within the applicatio
It is intended to show how to build a simple, stateful application using hooks
without the added complexity of a redux type library.
+This example features:
+
+- An app that mixes together JavaScript and ReasonML components and functions
+- An app with two pages which has a common Counter component
+- That Counter component maintain the counter inside its module. This is used
+ primarily to illustrate that modules get initialized once and their state
+ variables persist in runtime
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -16,12 +24,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-reasonml-todo with-reasonml-app
+npm init next-app --example with-reasonml-todo with-reasonml-app
# or
yarn create next-app --example with-reasonml-todo with-reasonml-app
```
@@ -79,13 +85,3 @@ There are 2 convenience scripts to facilitate running these separate processes:
script. This will also hot reload as you make changes.
You should start the scripts in the presented order.
-
-## The idea behind the example
-
-This example features:
-
-- An app that mixes together JavaScript and ReasonML components and functions
-- An app with two pages which has a common Counter component
-- That Counter component maintain the counter inside its module. This is used
- primarily to illustrate that modules get initialized once and their state
- variables persist in runtime
diff --git a/examples/with-reasonml/README.md b/examples/with-reasonml/README.md
index 5abf6f33d5df881..9b81da431eca186 100644
--- a/examples/with-reasonml/README.md
+++ b/examples/with-reasonml/README.md
@@ -1,5 +1,13 @@
# Example app using ReasonML & ReasonReact components
+This example features:
+
+- An app that mixes together JavaScript and ReasonML components and functions
+- An app with two pages which has a common Counter component
+- That Counter component maintain the counter inside its module. This is used
+ primarily to illustrate that modules get initialized once and their state
+ variables persist in runtime
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-reasonml with-reasonml-app
+npm init next-app --example with-reasonml with-reasonml-app
# or
yarn create next-app --example with-reasonml with-reasonml-app
```
@@ -71,13 +79,3 @@ There are 2 convenience scripts to facilitate running these separate processes:
script. This will also hot reload as you make changes.
You should start the scripts in the presented order.
-
-## The idea behind the example
-
-This example features:
-
-- An app that mixes together JavaScript and ReasonML components and functions
-- An app with two pages which has a common Counter component
-- That Counter component maintain the counter inside its module. This is used
- primarily to illustrate that modules get initialized once and their state
- variables persist in runtime
diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md
index 4723c2c3ab52b87..5f69c0aa03abc89 100644
--- a/examples/with-rebass/README.md
+++ b/examples/with-rebass/README.md
@@ -1,5 +1,7 @@
# Example app with Rebass
+This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js.
+
![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
## Deploy your own
@@ -12,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-rebass with-rebass-app
+npm init next-app --example with-rebass with-rebass-app
# or
yarn create next-app --example with-rebass with-rebass-app
```
@@ -46,7 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js.
diff --git a/examples/with-recompose/README.md b/examples/with-recompose/README.md
index aba2663a605ec4e..04e5b3d5db686ea 100644
--- a/examples/with-recompose/README.md
+++ b/examples/with-recompose/README.md
@@ -1,5 +1,9 @@
# Recompose example
+This example show how to use [Recompose](https://github.com/acdlite/recompose) to wrap page components using High Order Components and use `getInitialProps` without worries.
+
+It also configure Babel to change our recompose imports so we're going to actually import only the functions we need and reduce the bundle size.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-recompose with-recompose-app
+npm init next-app --example with-recompose with-recompose-app
# or
yarn create next-app --example with-recompose with-recompose-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example show how to use [Recompose](https://github.com/acdlite/recompose) to wrap page components using High Order Components and use `getInitialProps` without worries.
-
-It also configure Babel to change our recompose imports so we're going to actually import only the functions we need and reduce the bundle size.
diff --git a/examples/with-redux-code-splitting/README.md b/examples/with-redux-code-splitting/README.md
index eaf0ad97017143d..b1472ce3e1c9daf 100644
--- a/examples/with-redux-code-splitting/README.md
+++ b/examples/with-redux-code-splitting/README.md
@@ -1,5 +1,9 @@
# Redux with code splitting example
+Redux uses single store per application and usually it causes problems for code splitting when you want to load actions and reducers used on the current page only.
+
+This example utilizes [fast-redux](https://github.com/dogada/fast-redux) to split Redux's actions and reducers across pages. In result each page's javascript bundle contains only code that is used on the page. When user navigates to a new page, its actions and reducers are connected to the single shared application store.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-code-splitting with-redux-code-splitting-app
+npm init next-app --example with-redux-code-splitting with-redux-code-splitting-app
# or
yarn create next-app --example with-redux-code-splitting with-redux-code-splitting-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Redux uses single store per application and usually it causes problems for code splitting when you want to load actions and reducers used on the current page only.
-
-This example utilizes [fast-redux](https://github.com/dogada/fast-redux) to split Redux's actions and reducers across pages. In result each page's javascript bundle contains only code that is used on the page. When user navigates to a new page, its actions and reducers are connected to the single shared application store.
diff --git a/examples/with-redux-observable/README.md b/examples/with-redux-observable/README.md
index 5cea3acca802b7d..6a5141eda9dbd69 100644
--- a/examples/with-redux-observable/README.md
+++ b/examples/with-redux-observable/README.md
@@ -1,5 +1,13 @@
# Redux-Observable example
+This example is a page that renders information about Star-Wars characters. It
+fetches new character every 3 seconds having the initial character fetched on
+a server.
+
+Example also uses `redux-logger` to log every action.
+
+![demo page](demo.png)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-observable with-redux-observable-app
+npm init next-app --example with-redux-observable with-redux-observable-app
# or
yarn create next-app --example with-redux-observable with-redux-observable-app
```
@@ -43,15 +51,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-### The idea behind the example
-
-This example is a page that renders information about Star-Wars characters. It
-fetches new character every 3 seconds having the initial character fetched on
-a server.
-
-Example also uses `redux-logger` to log every action.
-
-![demo page](demo.png)
+### Notes
The main problem with integrating Redux, Redux-Observable and Next.js is
probably making initial requests on a server. That's because, the
diff --git a/examples/with-redux-persist/README.md b/examples/with-redux-persist/README.md
index 7c747cab629916e..3280cdfa1e18513 100644
--- a/examples/with-redux-persist/README.md
+++ b/examples/with-redux-persist/README.md
@@ -1,5 +1,9 @@
# Redux Persist example
+This example shows how to integrate Redux with the power of Redux Persist in Next.js.
+
+With the advantage of having a global state for your app using `redux`. You'll also require some of your state values to be available offline. There comes `redux-persist` using which you can persist your states in browser's local storage. While there are various ways of persisting your states which you can always find in there [documentation](https://github.com/rt2zz/redux-persist/blob/master/README.md). This is an example of how you can integrate `redux-persist` with redux along with Next.js's universal rendering approach.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-persist with-redux-persist-app
+npm init next-app --example with-redux-persist with-redux-persist-app
# or
yarn create next-app --example with-redux-persist with-redux-persist-app
```
@@ -43,11 +47,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to integrate Redux with the power of Redux Persist in Next.js.
-
-With the advantage of having a global state for your app using `redux`. You'll also require some of your state values to be available offline. There comes `redux-persist` using which you can persist your states in browser's local storage. While there are various ways of persisting your states which you can always find in there [documentation](https://github.com/rt2zz/redux-persist/blob/master/README.md). This is an example of how you can integrate `redux-persist` with redux along with Next.js's universal rendering approach.
+## Notes
In this example, we are going to use the Next.js example [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux-persist) to see how you can add a layer of persistence for one of the state from global redux state. To know more about how to create a Next.js project with Redux, you can browse the example project [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) to know more about its implementation.
diff --git a/examples/with-redux-reselect-recompose/README.md b/examples/with-redux-reselect-recompose/README.md
index d1218a65be2531f..719cc3a28ee5097 100644
--- a/examples/with-redux-reselect-recompose/README.md
+++ b/examples/with-redux-reselect-recompose/README.md
@@ -1,5 +1,7 @@
# Redux with reselect and recompose example
+This example is based on the great work of [with-redux](https://github.com/zeit/next.js/blob/master/examples/with-redux/) example with the addition of [reselect](https://github.com/reactjs/reselect) and [recompose](https://github.com/acdlite/recompose)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app
+npm init next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app
# or
yarn create next-app --example with-redux-reselect-recompose with-redux-reselect-recompose-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example is based on the great work of [with-redux](https://github.com/zeit/next.js/blob/master/examples/with-redux/) example with the addition of [reselect](https://github.com/reactjs/reselect) and [recompose](https://github.com/acdlite/recompose)
diff --git a/examples/with-redux-saga/README.md b/examples/with-redux-saga/README.md
index 2ed27002a099a7b..559ad98d7710376 100644
--- a/examples/with-redux-saga/README.md
+++ b/examples/with-redux-saga/README.md
@@ -1,5 +1,7 @@
# redux-saga example
+Usually splitting your app state into `pages` feels natural, but sometimes you'll want to have global state for your app. This is an example using `redux` and `redux-saga` that works with universal rendering. This is just one way it can be done. If you have any suggestions or feedback please submit an issue or PR.
+
> This example and documentation is based on the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example.
## Deploy your own
@@ -12,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-saga with-redux-saga-app
+npm init next-app --example with-redux-saga with-redux-saga-app
# or
yarn create next-app --example with-redux-saga with-redux-saga-app
```
@@ -45,9 +47,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural, but sometimes you'll want to have global state for your app. This is an example using `redux` and `redux-saga` that works with universal rendering. This is just one way it can be done. If you have any suggestions or feedback please submit an issue or PR.
+## Notes
In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-redux-thunk/README.md b/examples/with-redux-thunk/README.md
index e713b2d21b89b11..14815e93f1cf518 100644
--- a/examples/with-redux-thunk/README.md
+++ b/examples/with-redux-thunk/README.md
@@ -1,5 +1,9 @@
# Redux Thunk example
+This example shows how to integrate Redux and Redux Thunk in Next.js.
+
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with Next.js's universal rendering approach.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux-thunk with-redux-thunk-app
+npm init next-app --example with-redux-thunk with-redux-thunk-app
# or
yarn create next-app --example with-redux-thunk with-redux-thunk-app
```
@@ -43,11 +47,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to integrate Redux and Redux Thunk in Next.js.
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with Next.js's universal rendering approach.
+## Notes
In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color (black) than the client one (grey).
diff --git a/examples/with-redux-wrapper/README.md b/examples/with-redux-wrapper/README.md
index cf5f0469a442560..af6181bfbd7e3c0 100644
--- a/examples/with-redux-wrapper/README.md
+++ b/examples/with-redux-wrapper/README.md
@@ -1,5 +1,7 @@
# With Redux Wrapper Example
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/segmentio/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/zeit/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
-npx create-next-app --example with-redux-wrapper with-redux-wrapper-app
+npm init next-app --example with-redux-wrapper with-redux-wrapper-app
# or
yarn create next-app --example with-redux-wrapper with-redux-wrapper-app
```
@@ -43,9 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+## Notes
In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
diff --git a/examples/with-redux/README.md b/examples/with-redux/README.md
index 405e66639522cdd..c30b12da6cb7805 100644
--- a/examples/with-redux/README.md
+++ b/examples/with-redux/README.md
@@ -1,5 +1,9 @@
# Redux example
+This example shows how to integrate Redux in Next.js.
+
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with Next.js's universal rendering approach.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-redux with-redux-app
+npm init next-app --example with-redux with-redux-app
# or
yarn create next-app --example with-redux with-redux-app
```
@@ -43,11 +47,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to integrate Redux in Next.js.
-
-Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with Next.js's universal rendering approach.
+## Notes
In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color (black) than the client one (grey).
diff --git a/examples/with-reflux/README.md b/examples/with-reflux/README.md
index 45e225770e7b22b..9209715f0e31acc 100644
--- a/examples/with-reflux/README.md
+++ b/examples/with-reflux/README.md
@@ -1,5 +1,7 @@
# Pass Server Data Directly to a Next.js Page during SSR
+Use [reflux](https://github.com/reflux/refluxjs) to manage an application store with unidirectional dataflow.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-reflux with-reflux-app
+npm init next-app --example with-reflux with-reflux-app
# or
yarn create next-app --example with-reflux with-reflux-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Use [reflux](https://github.com/reflux/refluxjs) to manage an application store with unidirectional dataflow.
diff --git a/examples/with-refnux/README.md b/examples/with-refnux/README.md
index 23609dc57cc9a24..a27c75edaf44776 100644
--- a/examples/with-refnux/README.md
+++ b/examples/with-refnux/README.md
@@ -1,5 +1,8 @@
# Refnux example
+This example, just like `with-redux` and `with-mobx` examples, shows how to manage a global state in your web-application.
+In this case we are using [refnux](https://github.com/algesten/refnux) which is an alternative, simpler, purely functional store state manager.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +13,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-refnux with-refnux-app
+npm init next-app --example with-refnux with-refnux-app
# or
yarn create next-app --example with-refnux with-refnux-app
```
@@ -43,10 +46,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example, just like `with-redux` and `with-mobx` examples, shows how to manage a global state in your web-application.
-In this case we are using [refnux](https://github.com/algesten/refnux) which is an alternative, simpler, purely functional store state manager.
+## Notes
We have two very similar pages (page1.js, page2.js). They both
diff --git a/examples/with-relay-modern-server-express/README.md b/examples/with-relay-modern-server-express/README.md
index 527ac47d31118b6..728b04165293eab 100644
--- a/examples/with-relay-modern-server-express/README.md
+++ b/examples/with-relay-modern-server-express/README.md
@@ -1,13 +1,19 @@
# Relay Modern Server Express Example
+[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
+
+In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
+
+This example implements a simple graphql server using express, showing a custom graphql server integrated to next.js and relay modern.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-relay-modern-server-express with-relay-modern-server-express-app
+npm init next-app --example with-relay-modern-server-express with-relay-modern-server-express-app
# or
yarn create next-app --example with-relay-modern-server-express with-relay-modern-server-express-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
-
-In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
-
-This example implements a simple graphql server using express, showing a custom graphql server integrated to next.js and relay modern.
diff --git a/examples/with-relay-modern/README.md b/examples/with-relay-modern/README.md
index 8c655e792a4272a..7d5c6610280a5d5 100644
--- a/examples/with-relay-modern/README.md
+++ b/examples/with-relay-modern/README.md
@@ -1,5 +1,11 @@
# Relay Modern Example
+[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
+
+In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
+
+This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-relay-modern with-relay-modern-app
+npm init next-app --example with-relay-modern with-relay-modern-app
# or
yarn create next-app --example with-relay-modern with-relay-modern-app
```
@@ -64,11 +70,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-[Relay Modern](https://relay.dev/) is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
-
-In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes `options` argument that allows to specify a `query` that will be executed on the server when a page is being loaded.
-
-This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
diff --git a/examples/with-rematch/README.md b/examples/with-rematch/README.md
index f4e3ef9f3ba2c4b..f719485b3e24dfe 100644
--- a/examples/with-rematch/README.md
+++ b/examples/with-rematch/README.md
@@ -1,5 +1,9 @@
# Rematch example
+This example has two pages. The first page has a counter which can be incremented synchronously or asynchronously. The second page is a page which shows a list of github users. It fetches data from the github api using this [endpoint](api.github.com/users).
+
+Since rematch is utility which uses redux under the hood, some elements like `store.js` and `withRematch` are very similar to the `with-redux` example. Please go through the `with-redux` example [here](https://github.com/zeit/next.js/tree/master/examples/with-redux) before reading further if you are not familiar with how redux is integrated with nextjs. Rematch is just an extension for Redux so a lot of elements are the same.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-rematch with-rematch-app
+npm init next-app --example with-rematch with-rematch-app
# or
yarn create next-app --example with-rematch with-rematch-app
```
@@ -40,13 +44,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example has two pages. The first page has a counter which can be incremented synchronously or asynchronously. The second page is a page which shows a list of github users. It fetches data from the github api using this [endpoint](api.github.com/users).
-
-Since rematch is utility which uses redux under the hood, some elements like `store.js` and `withRematch` are very similar to the `with-redux` example. Please go through the `with-redux` example [here](https://github.com/zeit/next.js/tree/master/examples/with-redux) before reading further if you are not familiar with how redux is integrated with nextjs. Rematch is just an extension for Redux so a lot of elements are the same.
-
-**Directory structure**
+## Directory structure
Besides the `pages` directory, there is a directory called shared which holds all of the code belonging to rematch. `Rematch` has a lot lesser boilerplate than `Redux` because it is able to put actions(including async actions), _models_ and reducers together. Hence, a `models` directory is present, which contains the logic for `counter` and `github` users.
diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md
index ba7d8388e1cfe76..dd9d0a0ea524a30 100644
--- a/examples/with-segment-analytics/README.md
+++ b/examples/with-segment-analytics/README.md
@@ -1,5 +1,7 @@
# Example app with analytics
+This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the ``. Page views are tracked on both the server and client side and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions (see `contact.js` for example).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-segment-analytics with-segment-analytics-app
+npm init next-app --example with-segment-analytics with-segment-analytics-app
# or
yarn create next-app --example with-segment-analytics with-segment-analytics-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the ``. Page views are tracked on both the server and client side and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions (see `contact.js` for example).
diff --git a/examples/with-semantic-ui/README.md b/examples/with-semantic-ui/README.md
index 23091b259d333f4..f6932440c8fbbed 100644
--- a/examples/with-semantic-ui/README.md
+++ b/examples/with-semantic-ui/README.md
@@ -1,5 +1,7 @@
# Semantic UI example
+This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-semantic-ui with-semantic-ui-app
+npm init next-app --example with-semantic-ui with-semantic-ui-app
# or
yarn create next-app --example with-semantic-ui with-semantic-ui-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Semantic UI React](http://react.semantic-ui.com) including handling of external styles and assets. This is intended to show the integration of this UI toolkit with the Framework.
diff --git a/examples/with-sentry-simple/README.md b/examples/with-sentry-simple/README.md
index 83d76a03982e58c..fc03c60afae01e1 100644
--- a/examples/with-sentry-simple/README.md
+++ b/examples/with-sentry-simple/README.md
@@ -6,10 +6,10 @@
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-sentry-simple with-sentry-simple
+npm init next-app --example with-sentry-simple with-sentry-simple
# or
yarn create next-app --example with-sentry-simple with-sentry-simple
```
diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md
index 92b69c83849d480..5ab1e777340c68f 100644
--- a/examples/with-sentry/README.md
+++ b/examples/with-sentry/README.md
@@ -1,13 +1,15 @@
# Sentry example
+An example showing use of [Sentry](https://sentry.io) to catch & report errors on both client + server side.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-sentry with-sentry-app
+npm init next-app --example with-sentry with-sentry-app
# or
yarn create next-app --example with-sentry with-sentry-app
```
@@ -38,10 +40,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## About example
-
-An example showing use of [Sentry](https://sentry.io) to catch & report errors on both client + server side.
-
### Configuration
You will need a _Sentry DSN_ for your project. You can get it from the Settings of your Project, in **Client Keys (DSN)**, and copy the string labeled **DSN (Public)**.
diff --git a/examples/with-shallow-routing/README.md b/examples/with-shallow-routing/README.md
index 712405e1471fab9..bed84dd2ac281a4 100644
--- a/examples/with-shallow-routing/README.md
+++ b/examples/with-shallow-routing/README.md
@@ -1,5 +1,9 @@
# Shallow Routing Example
+With shallow routing, we could change the URL without actually running the `getInitialProps` every time you change the URL.
+
+We do this passing the `shallow: true` option to `Router.push` or `Router.replace`.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-shallow-routing with-shallow-routing-app
+npm init next-app --example with-shallow-routing with-shallow-routing-app
# or
yarn create next-app --example with-shallow-routing with-shallow-routing-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-With shallow routing, we could change the URL without actually running the `getInitialProps` every time you change the URL.
-
-We do this passing the `shallow: true` option to `Router.push` or `Router.replace`.
diff --git a/examples/with-sitemap-and-robots-express-server/README.md b/examples/with-sitemap-and-robots-express-server/README.md
index cd40576c4182d1e..d7b471b646ceb78 100644
--- a/examples/with-sitemap-and-robots-express-server/README.md
+++ b/examples/with-sitemap-and-robots-express-server/README.md
@@ -1,13 +1,18 @@
# Example with sitemap.xml and robots.txt using Express server
+This example app shows you how to set up sitemap.xml and robots.txt files for proper indexing by search engine bots.
+
+The app is deployed at: https://sitemap-robots.now.sh. Open the page and click the links to see sitemap.xml and robots.txt. Here is a snapshot of these files, with sitemap.xml on the left and robots.txt on the right:
+![sitemap-robots](https://user-images.githubusercontent.com/26158226/38786210-4d0c3f70-40db-11e8-8e44-b2c90cfd1b74.png)
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-sitemap-and-robots-express-server with-sitemap-and-robots-express-server-app
+npm init next-app --example with-sitemap-and-robots-express-server with-sitemap-and-robots-express-server-app
# or
yarn create next-app --example with-sitemap-and-robots-express-server with-sitemap-and-robots-express-server-app
```
@@ -37,14 +42,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example app shows you how to set up sitemap.xml and robots.txt files for proper indexing by search engine bots.
-
-The app is deployed at: https://sitemap-robots.now.sh. Open the page and click the links to see sitemap.xml and robots.txt. Here is a snapshot of these files, with sitemap.xml on the left and robots.txt on the right:
-![sitemap-robots](https://user-images.githubusercontent.com/26158226/38786210-4d0c3f70-40db-11e8-8e44-b2c90cfd1b74.png)
-
-Notes:
+## Notes
- routes `/a` and `/b` are added to sitemap manually
- routes that start with `/posts` are added automatically to sitemap; the current example creates an array of posts (see `server/posts.js`), but in a production-level web app, you would want to update `sitemap.xml` dynamically by getting posts from a database:
diff --git a/examples/with-slate/README.md b/examples/with-slate/README.md
index 6557b91aa94f95a..db37d2db532f7a0 100644
--- a/examples/with-slate/README.md
+++ b/examples/with-slate/README.md
@@ -1,5 +1,7 @@
# slate.js example
+This example shows how to use Next.js along with [Slate.js](https://www.slatejs.org/).
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-slate with-slate-app
+npm init next-app --example with-slate with-slate-app
# or
yarn create next-app --example with-slate with-slate-app
```
@@ -39,7 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Slate.js](https://www.slatejs.org/).
diff --git a/examples/with-socket.io/README.md b/examples/with-socket.io/README.md
index 305cb5d2a161a4c..91a21d2cbf91ba0 100644
--- a/examples/with-socket.io/README.md
+++ b/examples/with-socket.io/README.md
@@ -1,13 +1,15 @@
# Socket.io example
+This example shows how to use [socket.io](https://socket.io/) inside a Next.js application using a custom hook. The example combines the WebSocket server with the Next server. In a production application you should consider splitting them into different services.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-socket.io with-socket.io-app
+npm init next-app --example with-socket.io with-socket.io-app
# or
yarn create next-app --example with-socket.io with-socket.io-app
```
@@ -30,7 +32,3 @@ npm run dev
yarn
yarn dev
```
-
-## The idea behind the example
-
-This example shows how to use [socket.io](https://socket.io/) inside a Next.js application using a custom hook. The example combines the WebSocket server with the Next server. In a production application you should consider splitting them into different services.
diff --git a/examples/with-static-export/README.md b/examples/with-static-export/README.md
index 46023bdd1415ff8..d72dc854ac1f55b 100644
--- a/examples/with-static-export/README.md
+++ b/examples/with-static-export/README.md
@@ -1,13 +1,17 @@
# Static export example
+This example show how to export to static HTML files your Next.js application fetching data from an API to generate a dynamic list of pages.
+
+When trying to run `npm start` it will build and export your pages into the `out` folder and serve them on `localhost:5000`.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-static-export with-static-export-app
+npm init next-app --example with-static-export with-static-export-app
# or
yarn create next-app --example with-static-export with-static-export-app
```
@@ -33,9 +37,3 @@ npm run dev
yarn
yarn dev
```
-
-## The idea behind the example
-
-This example show how to export to static HTML files your Next.js application fetching data from an API to generate a dynamic list of pages.
-
-When trying to run `npm start` it will build and export your pages into the `out` folder and serve them on `localhost:5000`.
diff --git a/examples/with-stomp/README.md b/examples/with-stomp/README.md
index b72a478369c1357..0e8f966c13fb919 100644
--- a/examples/with-stomp/README.md
+++ b/examples/with-stomp/README.md
@@ -1,13 +1,19 @@
# Stomp example
+This example show how to use [STOMP](http://stomp.github.io/) inside a Next.js application.
+
+STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker.
+
+Read more about [STOMP](http://jmesnil.net/stomp-websocket/doc/) protocol.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-stomp with-stomp-app
+npm init next-app --example with-stomp with-stomp-app
# or
yarn create next-app --example with-stomp with-stomp-app
```
@@ -34,11 +40,3 @@ STOMP_SERVER=wss://some.stomp.server yarn dev
You'll need to provide the STOMP url of your server in `STOMP_SERVER`
> If you're on Windows you may want to use [cross-env](https://www.npmjs.com/package/cross-env)
-
-## The idea behind the example
-
-This example show how to use [STOMP](http://stomp.github.io/) inside a Next.js application.
-
-STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can communicate with any STOMP message broker.
-
-Read more about [STOMP](http://jmesnil.net/stomp-websocket/doc/) protocol.
diff --git a/examples/with-storybook/README.md b/examples/with-storybook/README.md
index 530a34478deb127..8b3f06192ba1eb5 100644
--- a/examples/with-storybook/README.md
+++ b/examples/with-storybook/README.md
@@ -1,13 +1,15 @@
# Example app with Storybook
+This example shows a default set up of Storybook. Also included in the example is a custom component included in both Storybook and the Next.js application.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-storybook with-storybook-app
+npm init next-app --example with-storybook with-storybook-app
# or
yarn create next-app --example with-storybook with-storybook-app
```
@@ -57,7 +59,3 @@ yarn build-storybook
cd storybook-static
now
```
-
-## The idea behind the example
-
-This example shows a default set up of Storybook. Also included in the example is a custom component included in both Storybook and the Next.js application.
diff --git a/examples/with-strict-csp-hash/README.md b/examples/with-strict-csp-hash/README.md
index c5c76a95b7c7a76..7cf4aa51c42837d 100644
--- a/examples/with-strict-csp-hash/README.md
+++ b/examples/with-strict-csp-hash/README.md
@@ -1,5 +1,11 @@
# Example app with strict CSP generating script hash
+This example features how you can set up a strict CSP for your pages whitelisting next's inline bootstrap script by hash.
+In contrast to the example `with-strict-csp` based on nonces, this way doesn't require running a server to generate fresh nonce values on every document request.
+It defines the CSP by document `meta` tag.
+
+Note: There are still valid cases for using a nonce in case you need to inline scripts or styles for which calculating a hash is not feasible.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +16,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-strict-csp-hash with-strict-csp-hash-app
+npm init next-app --example with-strict-csp-hash with-strict-csp-hash-app
# or
yarn create next-app --example with-strict-csp-hash with-strict-csp-hash-app
```
@@ -42,11 +48,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you can set up a strict CSP for your pages whitelisting next's inline bootstrap script by hash.
-In contrast to the example `with-strict-csp` based on nonces, this way doesn't require running a server to generate fresh nonce values on every document request.
-It defines the CSP by document `meta` tag.
-
-Note: There are still valid cases for using a nonce in case you need to inline scripts or styles for which calculating a hash is not feasible.
diff --git a/examples/with-strict-csp/README.md b/examples/with-strict-csp/README.md
index babbf7f20525638..5a290eacba71f3a 100644
--- a/examples/with-strict-csp/README.md
+++ b/examples/with-strict-csp/README.md
@@ -1,13 +1,17 @@
# Strict CSP example
+If you want to implement a CSP, the most effective way is to follow the [strict CSP](https://csp.withgoogle.com/docs/strict-csp.html) approach. For it to work, we need to generate a nonce on every request.
+
+This example uses [Helmet](https://github.com/helmetjs/helmet) to configure the CSP and add the appropriate headers to all server responses. The nonce is generated with [uuid](https://github.com/kelektiv/node-uuid). Then we can pass the nonce to `` and `` in the custom ``.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-strict-csp with-strict-csp-app
+npm init next-app --example with-strict-csp with-strict-csp-app
# or
yarn create next-app --example with-strict-csp with-strict-csp-app
```
@@ -36,9 +40,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-If you want to implement a CSP, the most effective way is to follow the [strict CSP](https://csp.withgoogle.com/docs/strict-csp.html) approach. For it to work, we need to generate a nonce on every request.
-
-This example uses [Helmet](https://github.com/helmetjs/helmet) to configure the CSP and add the appropriate headers to all server responses. The nonce is generated with [uuid](https://github.com/kelektiv/node-uuid). Then we can pass the nonce to `` and `` in the custom ``.
diff --git a/examples/with-style-sheet/README.md b/examples/with-style-sheet/README.md
index 7c3bb4e878a133b..8e3d6353dbebd95 100644
--- a/examples/with-style-sheet/README.md
+++ b/examples/with-style-sheet/README.md
@@ -1,5 +1,7 @@
# Using the style-sheet CSS in JS library and extract CSS to file.
+This example features an app using the [style-sheet](https://www.npmjs.com/package/style-sheet) CSS in JS library and demonstrates how it is possible to extract styles to file.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-style-sheet with-style-sheet-app
+npm init next-app --example with-style-sheet with-style-sheet-app
# or
yarn create next-app --example with-style-sheet with-style-sheet-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features an app using the [style-sheet](https://www.npmjs.com/package/style-sheet) CSS in JS library and demonstrates how it is possible to extract styles to file.
diff --git a/examples/with-styled-components-rtl/README.md b/examples/with-styled-components-rtl/README.md
index 85eca1a20bf70e5..2a1c1e9c7837bd5 100644
--- a/examples/with-styled-components-rtl/README.md
+++ b/examples/with-styled-components-rtl/README.md
@@ -12,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-styled-components-rtl with-styled-components-rtl-app
+npm init next-app --example with-styled-components-rtl with-styled-components-rtl-app
# or
yarn create next-app --example with-styled-components-rtl with-styled-components-rtl-app
```
@@ -45,7 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## Notes
Right to left allows to "flip" every element in your site to fit the needs of the cultures that are read from right to left (like arabic for example).
diff --git a/examples/with-styled-components/README.md b/examples/with-styled-components/README.md
index 503ec3855003943..246ff9a3230f930 100644
--- a/examples/with-styled-components/README.md
+++ b/examples/with-styled-components/README.md
@@ -1,5 +1,9 @@
# Example app with styled-components
+This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [``](https://nextjs.org/docs#custom-app) component.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-styled-components with-styled-components-app
+npm init next-app --example with-styled-components with-styled-components-app
# or
yarn create next-app --example with-styled-components with-styled-components-app
```
@@ -46,9 +50,3 @@ now
### Try it on CodeSandbox
[Open this example on CodeSandbox](https://codesandbox.io/s/github/zeit/next.js/tree/canary/examples/with-styled-components)
-
-## The idea behind the example
-
-This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [``](https://nextjs.org/docs#custom-app) component.
diff --git a/examples/with-styled-jsx-plugins/README.md b/examples/with-styled-jsx-plugins/README.md
index 26c32ddb0377b2e..d87b7f8a0e74e9e 100644
--- a/examples/with-styled-jsx-plugins/README.md
+++ b/examples/with-styled-jsx-plugins/README.md
@@ -1,5 +1,13 @@
# With styled-jsx plugins
+Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
+to write scope styled components with full css support. This is important for
+the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
+
+This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. In this case PostCSS was used as an example. PostCSS plugins are defined in `package.json`.
+
+More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-styled-jsx-plugins with-styled-jsx-plugins-app
+npm init next-app --example with-styled-jsx-plugins with-styled-jsx-plugins-app
# or
yarn create next-app --example with-styled-jsx-plugins with-styled-jsx-plugins-app
```
@@ -42,13 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
-to write scope styled components with full css support. This is important for
-the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
-
-This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. In this case PostCSS was used as an example. PostCSS plugins are defined in `package.json`.
-
-More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
diff --git a/examples/with-styled-jsx-postcss/readme.md b/examples/with-styled-jsx-postcss/README.md
similarity index 100%
rename from examples/with-styled-jsx-postcss/readme.md
rename to examples/with-styled-jsx-postcss/README.md
diff --git a/examples/with-styled-jsx-scss/README.md b/examples/with-styled-jsx-scss/README.md
index 4413beb5b328bcf..a590380d3cf906f 100644
--- a/examples/with-styled-jsx-scss/README.md
+++ b/examples/with-styled-jsx-scss/README.md
@@ -1,5 +1,13 @@
# With styled-jsx SASS / SCSS
+Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
+to write scope styled components with full css support. This is important for
+the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
+
+This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. This example shows how to implement the SASS plugin.
+
+More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-styled-jsx-scss with-styled-jsx-scss-app
+npm init next-app --example with-styled-jsx-scss with-styled-jsx-scss-app
# or
yarn create next-app --example with-styled-jsx-scss with-styled-jsx-scss-app
```
@@ -42,13 +50,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
-to write scope styled components with full css support. This is important for
-the modularity and code size of your bundles and also for the learning curve of the framework. If you know css you can write styled-jsx right away.
-
-This example shows how to configure styled-jsx to use external plugins to modify the output. Using this you can use PostCSS, SASS (SCSS), LESS, or any other pre-processor with styled-jsx. You can define plugins in `.babelrc`. This example shows how to implement the SASS plugin.
-
-More details about how plugins work can be found in the [styled-jsx readme](https://github.com/zeit/styled-jsx#css-preprocessing-via-plugins)
diff --git a/examples/with-styletron/README.md b/examples/with-styletron/README.md
index 859f70718735128..ec159dcceb7ec7e 100644
--- a/examples/with-styletron/README.md
+++ b/examples/with-styletron/README.md
@@ -1,5 +1,9 @@
# Example app with styletron
+This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-styletron with-styletron-app
+npm init next-app --example with-styletron with-styletron-app
# or
yarn create next-app --example with-styletron with-styletron-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styletron](https://github.com/rtsao/styletron).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``.
diff --git a/examples/with-sw-precache/README.md b/examples/with-sw-precache/README.md
index 61411cb2525f60f..18b934ddc21db2c 100644
--- a/examples/with-sw-precache/README.md
+++ b/examples/with-sw-precache/README.md
@@ -1,13 +1,17 @@
# sw-precache example
+You'll often want your Service Worker to be registered at the root level to give it access to your whole application.
+
+This example shows how this can be achieved alongside [sw-precache](https://github.com/GoogleChrome/sw-precache) (via [the webpack plugin](https://github.com/goldhand/sw-precache-webpack-plugin)).
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-sw-precache with-sw-precache-app
+npm init next-app --example with-sw-precache with-sw-precache-app
# or
yarn create next-app --example with-sw-precache with-sw-precache-app
```
@@ -34,9 +38,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-You'll often want your Service Worker to be registered at the root level to give it access to your whole application.
-
-This example shows how this can be achieved alongside [sw-precache](https://github.com/GoogleChrome/sw-precache) (via [the webpack plugin](https://github.com/goldhand/sw-precache-webpack-plugin)).
diff --git a/examples/with-tailwindcss-emotion/README.md b/examples/with-tailwindcss-emotion/README.md
index fee3c4e4013d3d1..602ce72824f32e7 100644
--- a/examples/with-tailwindcss-emotion/README.md
+++ b/examples/with-tailwindcss-emotion/README.md
@@ -12,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app
+npm init next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app
# or
yarn create next-app --example with-tailwindcss-emotion with-tailwindcss-emotion-app
```
@@ -45,7 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## Notes
This setup has inspiration from [examples/with-tailwindcss](https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/README.md). This example will show you how to integrate [Emotion](https://emotion.sh/docs/introduction) with [tailwind](https://tailwindcss.com/).
diff --git a/examples/with-tailwindcss/README.md b/examples/with-tailwindcss/README.md
index e9b026f260cb5cf..f5fb1fc7e791c45 100644
--- a/examples/with-tailwindcss/README.md
+++ b/examples/with-tailwindcss/README.md
@@ -12,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
+npm init next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app
```
@@ -45,7 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## Notes
This setup is a basic starting point for using [Tailwind CSS](https://tailwindcss.com) with Next.js. This example also includes the following [PostCSS](https://github.com/postcss/postcss) plugins:
diff --git a/examples/with-ts-node/README.md b/examples/with-ts-node/README.md
index 972203fa5a12863..ec9464282503e48 100644
--- a/examples/with-ts-node/README.md
+++ b/examples/with-ts-node/README.md
@@ -1,13 +1,16 @@
# Custom server with fully TypeScript + ts-node example (without babel and tsc), require next js 7+
+The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
+Server entry point is `server/index.ts` in development and production.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-ts-node with-ts-node-app
+npm init next-app --example with-ts-node with-ts-node-app
# or
yarn create next-app --example with-ts-node with-ts-node-app
```
@@ -36,8 +39,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code.
-Server entry point is `server/index.ts` in development and production.
diff --git a/examples/with-typescript-graphql/README.md b/examples/with-typescript-graphql/README.md
index de77eef4f0e01ce..bf299a32ec9389c 100644
--- a/examples/with-typescript-graphql/README.md
+++ b/examples/with-typescript-graphql/README.md
@@ -1,5 +1,19 @@
# GraphQL and TypeScript Example
+One of the strengths of GraphQL is [enforcing data types on runtime](https://graphql.github.io/graphql-spec/June2018/#sec-Value-Completion). Further, TypeScript and [GraphQL Code Generator](https://graphql-code-generator.com/) (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
+
+This template extends [Apollo Server and Client Example](https://github.com/zeit/next.js/tree/canary/examples/api-routes-apollo-server-and-client#readme) by rewriting in TypeScript and integrating [graphql-let](https://github.com/piglovesyou/graphql-let#readme), which runs [TypeScript React Apollo](https://graphql-code-generator.com/docs/plugins/typescript-react-apollo) in [graphql-codegen](https://github.com/dotansimha/graphql-code-generator#readme) under the hood. It enhances the typed GraphQL use as below.
+
+```typescript jsx
+import { useNewsQuery } from './news.grpahql'
+
+const News: React.FC = () => {
+ // Typed already️⚡️
+ const { data: { news } } = useNewsQuery()
+ if (news) {news.map(...)}
+}
+```
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +24,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-typescript-graphql with-typescript-graphql-app
+npm init next-app --example with-typescript-graphql with-typescript-graphql-app
# or
yarn create next-app --example with-typescript-graphql with-typescript-graphql-app
```
@@ -43,21 +57,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-One of the strengths of GraphQL is [enforcing data types on runtime](https://graphql.github.io/graphql-spec/June2018/#sec-Value-Completion). Further, TypeScript and [GraphQL Code Generator](https://graphql-code-generator.com/) (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
-
-This template extends [Apollo Server and Client Example](https://github.com/zeit/next.js/tree/canary/examples/api-routes-apollo-server-and-client#readme) by rewriting in TypeScript and integrating [graphql-let](https://github.com/piglovesyou/graphql-let#readme), which runs [TypeScript React Apollo](https://graphql-code-generator.com/docs/plugins/typescript-react-apollo) in [graphql-codegen](https://github.com/dotansimha/graphql-code-generator#readme) under the hood. It enhances the typed GraphQL use as below.
-
-```typescript jsx
-import { useNewsQuery } from './news.grpahql'
-
-const News: React.FC = () => {
- // Typed already️⚡️
- const { data: { news } } = useNewsQuery()
- if (news) {news.map(...)}
-}
-```
+## Notes
By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` point to the same files.
diff --git a/examples/with-typescript-styled-components/README.md b/examples/with-typescript-styled-components/README.md
index 31e5b18da5f6861..c27b91b98105d47 100644
--- a/examples/with-typescript-styled-components/README.md
+++ b/examples/with-typescript-styled-components/README.md
@@ -12,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-typescript-styled-components with-typescript-app
+npm init next-app --example with-typescript-styled-components with-typescript-app
# or
yarn create next-app --example with-typescript-styled-components with-typescript-app
```
@@ -45,7 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## Notes
This is an amalgamation of the 2 existing examples:
diff --git a/examples/with-typescript/README.md b/examples/with-typescript/README.md
index b42cf57fb4a9484..1d4c1f32abc5f7a 100644
--- a/examples/with-typescript/README.md
+++ b/examples/with-typescript/README.md
@@ -1,6 +1,6 @@
# TypeScript Next.js example
-This is a really simple project that show the usage of Next.js with TypeScript.
+This is a really simple project that shows the usage of Next.js with TypeScript.
## Deploy your own
@@ -12,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-typescript with-typescript-app
+npm init next-app --example with-typescript with-typescript-app
# or
yarn create next-app --example with-typescript with-typescript-app
```
@@ -45,7 +45,7 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
+## Notes
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.
diff --git a/examples/with-typestyle/README.md b/examples/with-typestyle/README.md
index 7127ec31fba886d..7094d75c4893784 100644
--- a/examples/with-typestyle/README.md
+++ b/examples/with-typestyle/README.md
@@ -1,5 +1,9 @@
# Example app with typestyle
+This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle).
+
+For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``. Refer to [with-typescript](https://github.com/zeit/next.js/tree/master/examples/with-typescript) to use this with typescript.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-typestyle with-typestyle-app
+npm init next-app --example with-typestyle with-typestyle-app
# or
yarn create next-app --example with-typestyle with-typestyle-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example features how you use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [typestyle](https://github.com/typestyle/typestyle).
-
-For this purpose we are extending the ` ` and injecting the server side rendered styles into the ``. Refer to [with-typescript](https://github.com/zeit/next.js/tree/master/examples/with-typescript) to use this with typescript.
diff --git a/examples/with-universal-configuration-build-time/README.md b/examples/with-universal-configuration-build-time/README.md
index c34b964ae0c0a43..6f3322d918d21e4 100644
--- a/examples/with-universal-configuration-build-time/README.md
+++ b/examples/with-universal-configuration-build-time/README.md
@@ -1,5 +1,9 @@
# With universal configuration
+This example shows how to use environment variables and customize one based on NODE_ENV for your application using `dotenv`, a `.env`-file and `next.config.js`.
+
+When you build your application the environment variable is transformed into a primitive (string or undefined) and can only be changed with a new build. This happens for both client-side and server-side. If the environment variable is used directly in your application it will only have an effect on the server side, not the client side.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-universal-configuration-build-time with-universal-configuration-build-time-app
+npm init next-app --example with-universal-configuration-build-time with-universal-configuration-build-time-app
# or
yarn create next-app --example with-universal-configuration-build-time with-universal-configuration-build-time-app
```
@@ -43,12 +47,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-This example shows how to use environment variables and customize one based on NODE_ENV for your application using `dotenv`, a `.env`-file and `next.config.js`.
-
-When you build your application the environment variable is transformed into a primitive (string or undefined) and can only be changed with a new build. This happens for both client-side and server-side. If the environment variable is used directly in your application it will only have an effect on the server side, not the client side.
-
## Please note
- It is a bad practice to commit env vars to a repository. Thats why you should normally [gitignore](https://git-scm.com/docs/gitignore) your `.env` file.
diff --git a/examples/with-universal-configuration-runtime/README.md b/examples/with-universal-configuration-runtime/README.md
index f74098d8d3faa3e..7f16b24eae9adcc 100644
--- a/examples/with-universal-configuration-runtime/README.md
+++ b/examples/with-universal-configuration-runtime/README.md
@@ -1,13 +1,17 @@
# With universal runtime configuration
+This example show how to set custom environment variables for your application at runtime using the `publicRuntimeConfig` key in `next.config.js`
+
+For documentation see: https://github.com/zeit/next.js#exposing-configuration-to-the-server--client-side
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-universal-configuration-runtime with-universal-configuration-runtime-app
+npm init next-app --example with-universal-configuration-runtime with-universal-configuration-runtime-app
# or
yarn create next-app --example with-universal-configuration-runtime with-universal-configuration-runtime-app
```
@@ -36,9 +40,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example show how to set custom environment variables for your application at runtime using the `publicRuntimeConfig` key in `next.config.js`
-
-For documentation see: https://github.com/zeit/next.js#exposing-configuration-to-the-server--client-side
diff --git a/examples/with-unstated/README.md b/examples/with-unstated/README.md
index f63dc6167cf380d..9362ce9a4b83b80 100644
--- a/examples/with-unstated/README.md
+++ b/examples/with-unstated/README.md
@@ -1,5 +1,9 @@
# Unstated example
+This example shows how to integrate Unstated in Next.js. For more info about Unstated you can visit [here](https://github.com/jamiebuilds/unstated). The example is basically same as [redux example](https://github.com/zeit/next.js/tree/canary/examples/with-redux).
+
+The "counter" shows you how to preserve state from server to client and share the state within different page, you can expect the same state for "counter" when switching between Index and About page, observe that "counter" behaves differently from the "clock" example.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +14,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-unstated with-unstated-app
+npm init next-app --example with-unstated with-unstated-app
# or
yarn create next-app --example with-unstated with-unstated-app
```
@@ -42,9 +46,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to integrate Unstated in Next.js. For more info about Unstated you can visit [here](https://github.com/jamiebuilds/unstated). The example is basically same as [redux example](https://github.com/zeit/next.js/tree/canary/examples/with-redux).
-
-The "counter" shows you how to preserve state from server to client and share the state within different page, you can expect the same state for "counter" when switching between Index and About page, observe that "counter" behaves differently from the "clock" example.
diff --git a/examples/with-url-object-routing/README.md b/examples/with-url-object-routing/README.md
index 25d53db59c07b8e..51473f0e4c28845 100644
--- a/examples/with-url-object-routing/README.md
+++ b/examples/with-url-object-routing/README.md
@@ -1,13 +1,17 @@
# URL object routing
+Next.js allows using [Node.js URL objects](https://nodejs.org/api/url.html#url_url_strings_and_url_objects) as `href` and `as` values for ` ` component and parameters of `Router#push` and `Router#replace`.
+
+This simplify the usage of parameterized URLs when you have many query values.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-url-object-routing with-url-object-routing-app
+npm init next-app --example with-url-object-routing with-url-object-routing-app
# or
yarn create next-app --example with-url-object-routing with-url-object-routing-app
```
@@ -36,9 +40,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-Next.js allows using [Node.js URL objects](https://nodejs.org/api/url.html#url_url_strings_and_url_objects) as `href` and `as` values for ` ` component and parameters of `Router#push` and `Router#replace`.
-
-This simplify the usage of parameterized URLs when you have many query values.
diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md
index 887d7dd71a4d668..16fe5b2e8481b36 100644
--- a/examples/with-videojs/README.md
+++ b/examples/with-videojs/README.md
@@ -1,5 +1,7 @@
# video.js example
+This example shows how to use Next.js along with [Video.js](http://videojs.com) including handling of default styles.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/zeit/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
-npx create-next-app --example with-videojs with-videojs-app
+npm init next-app --example with-videojs with-videojs-app
# or
yarn create next-app --example with-videojs with-videojs-app
```
@@ -39,7 +41,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use Next.js along with [Video.js](http://videojs.com) including handling of default styles.
diff --git a/examples/with-webassembly/readme.md b/examples/with-webassembly/README.md
similarity index 81%
rename from examples/with-webassembly/readme.md
rename to examples/with-webassembly/README.md
index acd44e86374cce7..95be48302ab5a54 100644
--- a/examples/with-webassembly/readme.md
+++ b/examples/with-webassembly/README.md
@@ -1,13 +1,15 @@
# WebAssembly example
+This example shows how to import WebAssembly files (`.wasm`) and use them inside of a React component that is server rendered. So the WebAssembly code is executed on the server too. In the case of this example we're showing Rust compiled to WebAssembly.
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-webassembly with-webassembly-app
+npm init next-app --example with-webassembly with-webassembly-app
# or
yarn create next-app --example with-webassembly with-webassembly-app
```
@@ -40,7 +42,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to import WebAssembly files (`.wasm`) and use them inside of a React component that is server rendered. So the WebAssembly code is executed on the server too. In the case of this example we're showing Rust compiled to WebAssembly.
diff --git a/examples/with-webpack-bundle-size-analyzer/README.md b/examples/with-webpack-bundle-size-analyzer/README.md
index 3f4cb6b81b63117..32d236d4f73cc42 100644
--- a/examples/with-webpack-bundle-size-analyzer/README.md
+++ b/examples/with-webpack-bundle-size-analyzer/README.md
@@ -1,13 +1,15 @@
# Webpack Bundle Size Analyzer
+This example shows how to analyze the output bundles using [webpack-bundle-size-analyzer](https://www.npmjs.com/package/webpack-bundle-size-analyzer)
+
## How to use
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-webpack-bundle-size-analyzer with-webpack-bundle-size-analyzer-app
+npm init next-app --example with-webpack-bundle-size-analyzer with-webpack-bundle-size-analyzer-app
# or
yarn create next-app --example with-webpack-bundle-size-analyzer with-webpack-bundle-size-analyzer-app
```
@@ -31,9 +33,7 @@ yarn
yarn dev
```
-## The idea behind the example
-
-This example shows how to analyze the output bundles using [webpack-bundle-size-analyzer](https://www.npmjs.com/package/webpack-bundle-size-analyzer)
+## Notes
To analyze your webpack output, invoke the following command:
diff --git a/examples/with-yarn-workspaces/README.md b/examples/with-yarn-workspaces/README.md
index 1bfd1d112728f2c..15e1d756fbb0cb9 100644
--- a/examples/with-yarn-workspaces/README.md
+++ b/examples/with-yarn-workspaces/README.md
@@ -1,5 +1,13 @@
# Yarn workspaces example
+Workspaces are a new way to setup your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.
+
+In this example we have three workspaces:
+
+- **web-app**: A Next.js app
+- **foo**: A normal node module
+- **bar**: A react component, that gets compiled by Next.js (see [packages/web-app/next.config.js](./packages/web-app/next.config.js) for more info)
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +18,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-yarn-workspaces with-yarn-workspaces-app
+npm init next-app --example with-yarn-workspaces with-yarn-workspaces-app
# or
yarn create next-app --example with-yarn-workspaces with-yarn-workspaces-app
```
@@ -40,16 +48,6 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
now
```
-## The idea behind the example
-
-Workspaces are a new way to setup your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.
-
-In this example we have three workspaces:
-
-- **web-app**: A Next.js app
-- **foo**: A normal node module
-- **bar**: A react component, that gets compiled by Next.js (see [packages/web-app/next.config.js](./packages/web-app/next.config.js) for more info)
-
## Useful Links
- [Documentation](https://yarnpkg.com/en/docs/workspaces)
diff --git a/examples/with-zeit-fetch/README.md b/examples/with-zeit-fetch/README.md
index 71e11b224b86211..96faf85f19a56c8 100644
--- a/examples/with-zeit-fetch/README.md
+++ b/examples/with-zeit-fetch/README.md
@@ -1,5 +1,7 @@
# @zeit/fetch example
+This example shows how to use [`@zeit/fetch`](https://npmjs.com/package/@zeit/fetch) in a Next.js application.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-zeit-fetch with-zeit-fetch-app
+npm init next-app --example with-zeit-fetch with-zeit-fetch-app
# or
yarn create next-app --example with-zeit-fetch with-zeit-fetch-app
```
@@ -42,7 +44,3 @@ Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.
```bash
now
```
-
-## The idea behind the example
-
-This example shows how to use [`@zeit/fetch`](https://npmjs.com/package/@zeit/fetch) in a Next.js application.
diff --git a/examples/with-zones/README.md b/examples/with-zones/README.md
index 7b820c1fd87c3c4..4eb263d57c88d50 100644
--- a/examples/with-zones/README.md
+++ b/examples/with-zones/README.md
@@ -1,5 +1,7 @@
# Using multiple zones
+With Next.js you can use multiple apps as a single app using it's [multi-zones feature](https://nextjs.org/docs#multi-zones). This is an example showing how to use it.
+
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
@@ -10,10 +12,10 @@ Deploy the example using [ZEIT Now](https://zeit.co/now):
### Using `create-next-app`
-Execute [`create-next-app`](https://github.com/zeit/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/zeit/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
-npx create-next-app --example with-zones with-zones-app
+npm init next-app --example with-zones with-zones-app
# or
yarn create next-app --example with-zones with-zones-app
```
@@ -27,9 +29,7 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2
cd with-zones
```
-## The idea behind this example
-
-With Next.js you can use multiple apps as a single app using it's [multi-zones feature](https://nextjs.org/docs#multi-zones). This is an example showing how to use it.
+## Notes
In this example, we have two apps: 'home' and 'blog'. We'll start both apps with [Now](https://zeit.co/now):