The value of customKey is: {process.env.customKey}
-}
-
-export default Index
-```
-
-#### 运行时配置
-
-> ⚠️ 请注意,使用此选项时不可用 `target: 'serverless'`
-
-> ⚠️ 通常,您希望使用构建时配置来提供配置。原因是运行时配置增加了一个小的 rendering/initialization 开销。
-
-`next/config`模块使你应用运行时可以读取些存储在`next.config.js`的配置项。`serverRuntimeConfig`属性只在服务器端可用,`publicRuntimeConfig`属性在服务端和客户端可用。
-
-```js
-// next.config.js
-module.exports = {
- serverRuntimeConfig: {
- // Will only be available on the server side
- mySecret: 'secret',
- secondSecret: process.env.SECOND_SECRET, // Pass through env variables
- },
- publicRuntimeConfig: {
- // Will be available on both server and client
- staticFolder: '/static',
- },
-}
-```
-
-```js
-// pages/index.js
-import getConfig from 'next/config'
-// Only holds serverRuntimeConfig and publicRuntimeConfig from next.config.js nothing else.
-const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
-
-console.log(serverRuntimeConfig.mySecret) // Will only be available on the server side
-console.log(publicRuntimeConfig.staticFolder) // Will be available on both server and client
-
-function MyImage() {
- return (
-
-
-一个 zone 时一个单独的 Next.js 应用。如果你有很多 zone,你可以合并成一个应用。
-
-例如,你如下有两个 zone:
-
-- https://docs.my-app.com 服务于路由 `/docs/**`
-- https://ui.my-app.com 服务于所有页面
-
-有多 zone 应用技术支持,你可以将几个应用合并到一个,而且可以自定义 URL 路径,使你能同时单独开发各个应用。
-
-> 与 microservices 观念类似, 只是应用于前端应用.
-
-
-
-### 怎么定义一个 zone
-
-zone 没有单独的 API 文档。你需要做下面事即可:
-
-- 确保你的应用里只有需要的页面 (例如, https://ui.my-app.com 不包含 `/docs/**`)
-- 确保你的应用有个前缀[assetPrefix](https://github.com/zeit/next.js#cdn-support-with-asset-prefix)。(你也可以定义动态前缀[dynamically](https://github.com/zeit/next.js#dynamic-assetprefix))
-
-
-
-### 怎么合并他们
-
-你能使用 HTTP 代理合并 zone
-
-你能使用代理[micro proxy](https://github.com/zeit/micro-proxy)来作为你的本地代理服务。它允许你定义路由规则如下:
-
-```json
-{
- "rules": [
- {
- "pathname": "/docs**",
- "method": ["GET", "POST", "OPTIONS"],
- "dest": "https://docs.my-app.com"
- },
- { "pathname": "/**", "dest": "https://ui.my-app.com" }
- ]
-}
-```
-
-生产环境部署,如果你使用了[ZEIT now](https://zeit.co/now),可以它的使用[path alias](https://zeit.co/docs/features/path-aliases) 功能。否则,你可以设置你已使用的代理服务编写上面规则来路由 HTML 页面
-
-
-
-## 技巧
-
-- [设置 301 重定向](https://www.raygesualdo.com/posts/301-redirects-with-nextjs/)
-- [只处理服务器端模块](https://arunoda.me/blog/ssr-and-server-only-modules)
-- [构建项目 React-Material-UI-Next-Express-Mongoose-Mongodb](https://github.com/builderbook/builderbook)
-- [构建一个 SaaS 产品 React-Material-UI-Next-MobX-Express-Mongoose-MongoDB-TypeScript](https://github.com/async-labs/saas)
-
-
-
-## 问答
-
-
- 这个产品可以用于生产环境吗?
- https://zeit.co 都是一直用 Next.js 写的。
-
-它的开发体验和终端用户体验都很好,所以我们决定开源出来给大家共享。
-
-
-
-
- 体积多大?
-
-客户端大小根据应用需求不一样大小也不一样。
-
-一个最简单 Next 应该用 gzip 压缩后大约 65kb
-
-
-
-
- 这个像 `create-react-app`?
-
-是或不是.
-
-是,因为它让你的 SSR 开发更简单。
-
-不是,因为它规定了一定的目录结构,使我们能做以下更高级的事:
-
-- 服务端渲染
-- 自动代码分割
-
-此外,Next.js 还提供两个内置特性:
-
-- 路由与懒加载组件: `` (通过引入 `next/link`)
-- 修改``的组件: `` (通过引入 `next/head`)
-
-如果你想写共用组件,可以嵌入 Next.js 应用和 React 应用中,推荐使用`create-react-app`。你可以更改`import`保持代码清晰。
-
-
-
-
- 怎么解决 CSS 嵌入 JS 问题?
-
-Next.js 自带[styled-jsx](https://github.com/zeit/styled-jsx)库支持 CSS 嵌入 JS。而且你可以选择其他嵌入方法到你的项目中,可参考文档[as mentioned before](#css-in-js)。
-
-
-
-
- 哪些语法会被转换?怎么转换它们?
-
-我们遵循 V8 引擎的,如今 V8 引擎广泛支持 ES6 语法以及`async`和`await`语法,所以我们支持转换它们。但是 V8 引擎不支持修饰器语法,所以我们也不支持转换这语法。
-
-可以参照[这些](https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L79) 以及 [这些](https://github.com/zeit/next.js/issues/26)
-
-
-
-
- 为什么使用新路由?
-
-Next.js 的特别之处如下所示:
-
-- 路由不需要被提前知道
-- 路由总是被懒加载
-- 顶层组件可以定义生命周期`getInitialProps`来阻止路由加载(当服务端渲染或路由懒加载时)
-
-因此,我们可以介绍一个非常简单的路由方法,它由下面两部分组成:
-
-- 每个顶层组件都将会收到一个`url`对象,来检查 url 或修改历史记录
-- ``组件用于包装如(``)标签的元素容器,来执行客户端转换。
-
-我们使用了些有趣的场景来测试路由的灵活性,例如,可查看[nextgram](https://github.com/zeit/nextgram)。
-
-
-
-
-我怎么定义自定义路由?
-
-我们通过请求处理来[添加](#custom-server-and-routing)任意 URL 与任意组件之前的映射关系。
-
-在客户端,我们``组件有个属性`as`,可以装饰改变获取到的 URL。
-
-
-
-
-怎么获取数据?
-
-这由你决定。`getInitialProps`是一个异步函数`async`(也就是函数将会返回个`Promise`)。你可以在任意位置获取数据。
-
-
-
-
- 我可以使用 GraphQL 吗?
-
-是的! 这里有个例子[Apollo](./examples/with-apollo).
-
-
-
-
-我可以使用 Redux 吗?
-
-是的! 这里有个[例子](./examples/with-redux)
-
-
-
-
-我可以在 Next 应用中使用我喜欢的 Javascript 库或工具包吗?
-
-从我们第一次发版就已经提供**很多**例子,你可以查看这些[例子](./examples)。
-
-
-
-
-什么启发我们做这个?
-
-我们实现的大部分目标都是通过 Guillermo Rauch 的[Web 应用的 7 原则](http://rauchg.com/2014/7-principles-of-rich-web-applications/)来启发出的。
-
-PHP 的易用性也是个很好的灵感来源,我们觉得 Next.js 可以替代很多需要用 PHP 输出 HTML 的场景。
-
-与 PHP 不同的是,我们得利于 ES6 模块系统,每个文件会输出一个**组件或方法**,以便可以轻松的导入用于懒加载和测试
-
-我们研究 React 的服务器渲染时并没有花费很大的步骤,因为我们发现一个类似于 Next.js 的产品,React 作者 Jordan Walke 写的[react-page](https://github.com/facebookarchive/react-page) (现在已经废弃)
-
-
-
-
-
-## 贡献
-
-可查看 [contributing.md](./contributing.md)
-
-
-
-## 作者
-
-- Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda)) – [ZEIT](https://zeit.co)
-- Tim Neutkens ([@timneutkens](https://twitter.com/timneutkens)) – [ZEIT](https://zeit.co)
-- Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) – [ZEIT](https://zeit.co)
-- Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen)) – [ZEIT](https://zeit.co)
-- Guillermo Rauch ([@rauchg](https://twitter.com/rauchg)) – [ZEIT](https://zeit.co)
-- Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable)) – Knight-Mozilla / Coral Project
diff --git a/contributing.md b/contributing.md
index 6ca78b5a2e679..8d1d05d6fe13a 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/docs/advanced-features/static-html-export.md b/docs/advanced-features/static-html-export.md
index b987c38f296b2..4b2f09da7c1cf 100644
--- a/docs/advanced-features/static-html-export.md
+++ b/docs/advanced-features/static-html-export.md
@@ -15,7 +15,7 @@ description: Export your Next.js app to static HTML, and run it standalone witho
The exported app supports almost every feature of Next.js, including dynamic routes, prefetching, preloading and dynamic imports.
-The way `next export` works is by prerendering all pages to HTML; it does so based on a mapping called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md).
+The way `next export` works is by prerendering all pages to HTML; it does so based on a mapping called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) which offers a way to pre-define paths you will render as html.
> If your pages don't have `getInitialProps` you may not need `next export` at all; `next build` is already enough thanks to [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md).
diff --git a/docs/api-reference/next.config.js/custom-webpack-config.md b/docs/api-reference/next.config.js/custom-webpack-config.md
index e3dd4af69c5f6..df75f9998e846 100644
--- a/docs/api-reference/next.config.js/custom-webpack-config.md
+++ b/docs/api-reference/next.config.js/custom-webpack-config.md
@@ -6,9 +6,9 @@ description: Extend the default webpack config added by Next.js.
Some commonly asked for features are available as plugins:
-- [@zeit/next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)
- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
+- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
- [@zeit/next-preact](https://github.com/zeit/next-plugins/tree/master/packages/next-preact)
- [@next/mdx](https://github.com/zeit/next.js/tree/canary/packages/next-mdx)
- [@next/bundle-analyzer](https://github.com/zeit/next.js/tree/canary/packages/next-bundle-analyzer)
diff --git a/errors/empty-object-getInitialProps.md b/errors/empty-object-getInitialProps.md
index da856d432162d..9bba215d0a6e6 100644
--- a/errors/empty-object-getInitialProps.md
+++ b/errors/empty-object-getInitialProps.md
@@ -10,4 +10,4 @@ Look for any page's using `getInitialProps` that return an empty object `{}`. Yo
### Useful Links
-- [Automatic Static Optimization Documentation](https://nextjs.org/docs/#automatic-static-optimization)
+- [Automatic Static Optimization Documentation](https://nextjs.org/docs/advanced-features/automatic-static-optimization)
diff --git a/examples/active-class-name/README.md b/examples/active-class-name/README.md
index a822eae9ad6f3..f18cff6a5c74c 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 369cfb40665c4..a3599e527efc9 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 be4c74f9095ea..816c6febe4311 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 5aa3fd6c327c7..b828d6d6c5373 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/amp/pages/index.js b/examples/amp/pages/index.js
index b9af23a3cf63c..f7952214e0f1f 100644
--- a/examples/amp/pages/index.js
+++ b/examples/amp/pages/index.js
@@ -18,6 +18,22 @@ export default () => {
The Cat (AMP-first Page)
Meowwwwwwww
+
+
+
Cat ipsum dolor sit amet,
eat grass, throw it back up but refuse to leave cardboard box or groom
diff --git a/examples/analyze-bundles/README.md b/examples/analyze-bundles/README.md
index eda6eea533b13..445051ff5c1fc 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 325f085eacb9e..b1d07a06b974a 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 66f1bcdd36025..ec0442b823311 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 61f80c35d19a1..7fb0d0b449cd6 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 83ac10eeb72d1..c11e0ff5f3a8a 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 f1422c294e900..61902da4db293 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 f7885a7c71163..8a67988109a77 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 f120b72e91a6c..ef4dfe8be1c38 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 483c37fc8956a..dcf18ca4e64dc 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 747032cafc6c5..7ed82b4597b38 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 16de925cd7e16..5de0a8b380ae5 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 7e9d3b7667a34..52436a27df0e2 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 5c2067d9d5b07..a41794570df6f 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 0ad50f6e2ac1a..090bff8f1b2a7 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 e6807325b602b..a59590ba63e55 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 4f049db126ab2..5f69a48c9ce1c 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 13a693d3869ed..7bb2f74ff6e86 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 8d65ad9b4f2ce..544a2bfb64657 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 d77a5d5e21a90..8c509a3581233 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 41a4c71dfaf8c..49bb96cf75816 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 ab2544164e9ed..333011f9847c6 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 6f10728bb2704..b77a6c48d8c5d 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 29452a0d8be0c..8c9e8bf7c9f50 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 3ee3ac9782c02..ec0a093d03bb2 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 1103444fc183f..9d791190e9007 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 0c37d04eae145..b75b9c10c9822 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 cec9e33ba3637..4f4893e09ed30 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 c1145f1e274da..72f04f1595458 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 c195fea160d47..f6a38a2b05483 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 6ae480355365b..d4c50f741a7d0 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 `