Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: stabalise README format and create-next-app usage #4009

Merged
merged 6 commits into from
Apr 3, 2018
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion examples/active-class-name/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example active-class-name active-class-name-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/basic-css/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example basic-css basic-css-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/custom-server)
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/custom-charset)

# Custom server example

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-charset custom-charset-app
# or
yarn create next-app --example custom-charset custom-charset-app
```

### Download manually

Download the example [or clone the repo](https://github.com/zeit/next.js):
Expand All @@ -18,6 +28,9 @@ 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))
Expand All @@ -28,7 +41,7 @@ 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.
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.
32 changes: 27 additions & 5 deletions examples/custom-server-actionhero/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,36 @@ This configuration works with both Next and ActionHero hot reloading of code.

A more detailed example showcasing how to use fetch and web sockets to interact with your API can be found here: https://github.com/actionhero/next-in-actionhero

## To install:
(assuming you have [node](http://nodejs.org/) and NPM installed)
## How to use

`npm install`
### Using `create-next-app`

## To Run:
`npm start`
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-actionhero custom-server-actionhero-app
# or
yarn create next-app --example custom-server-actionhero custom-server-actionhero-app
```

### Download manually

Download the example [or clone the repo](https://github.com/zeit/next.js):

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-actionhero
cd custom-server-actionhero
```

Install it and run:

```bash
npm install
npm run start
# or
yarn
yarn start
```

## How does this work?

Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-express/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-express custom-server-express-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-fastify/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-fastify custom-server-fastify-app
Expand All @@ -28,6 +28,9 @@ Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Fastify
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-hapi/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-hapi custom-server-hapi-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-koa/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-koa custom-server-koa-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-micro/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-micro custom-server-micro-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server-nodemon/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-nodemon custom-server-nodemon-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
48 changes: 48 additions & 0 deletions examples/custom-server-polka/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/custom-server-polka)

# Custom [Polka](https://github.com/lukeed/polka) Server example

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-polka custom-server-polka-app
# or
yarn create next-app --example custom-server-polka custom-server-polka-app
```

### Download manually

Download the example [or clone the repo](https://github.com/zeit/next.js):

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/custom-server-polka
cd custom-server-polka
```

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
```

## 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`.
5 changes: 4 additions & 1 deletion examples/custom-server-typescript/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server-typescript custom-server-typescript-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/custom-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example custom-server custom-server-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/data-fetch/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example data-fetch data-fetch-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
5 changes: 4 additions & 1 deletion examples/form-handler/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

### Using `create-next-app`

Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example form-handler form-handler-app
Expand All @@ -28,6 +28,9 @@ 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))
Expand Down
Loading