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 `