Skip to content

Commit c5d69f0

Browse files
impronunciablerauchg
impronunciable
authored and
rauchg
committed
Add/move examples (vercel#470)
* Added redux and styled components (wip) examples. * Updated examples readmes and package.json * Fixed styled-components example
1 parent 4a13160 commit c5d69f0

File tree

25 files changed

+627
-43
lines changed

25 files changed

+627
-43
lines changed

‎examples/basic-css/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
# Basic CSS example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/basic-css
10+
cd next.js-master/examples/basic-css
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/basic-css
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
## The idea behind the example
33+
34+
Next.js ships with [styled-jsx](https://github.com/zeit/styled-jsx) allowing you
35+
to write scope styled components with full css support. This is important for
36+
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.

‎examples/basic-css/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "basic-css",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "*"
11+
},
12+
"author": "",
13+
"license": "ISC"
14+
}

‎examples/custom-server-express/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
2+
# Custom Express Server example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/custom-server-express
10+
cd next.js-master/examples/custom-server-express
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/custom-server-express
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm start
30+
```
31+
32+
## The idea behind the example
33+
34+
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.
35+
36+
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.
37+
38+
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`.

‎examples/custom-server/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
# Custom server example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/custom-server
10+
cd next.js-master/examples/custom-server
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/custom-server
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm start
30+
```
31+
32+
## The idea behind the example
33+
34+
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.
35+
36+
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`.

‎examples/head-elements/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
# Head elements example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/head-elements
10+
cd next.js-master/examples/head-elements
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/head-elements
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
## The idea behind the example
33+
34+
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 `<head>` of your page.
35+
36+
This example shows in `pages/index.js` how to add a title and a couple of meta tags.

‎examples/head-elements/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "head-elements",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "*"
11+
},
12+
"author": "",
13+
"license": "ISC"
14+
}

‎examples/hello-world/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
# Hello World example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/hello-world
10+
cd next.js-master/examples/hello-world
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/hello-world
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
## The idea behind the example
33+
34+
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.

‎examples/hello-world/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "hello-world",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "*"
11+
},
12+
"author": "",
13+
"license": "ISC"
14+
}

‎examples/nested-components/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
# Redux example
3+
4+
## How to use
5+
6+
Download the example:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/nested-components
10+
cd next.js-master/examples/nested-components
11+
```
12+
13+
or clone the repo:
14+
15+
```bash
16+
git clone git@github.com:zeit/next.js.git --depth=1
17+
cd next.js/examples/nested-components
18+
```
19+
20+
Install the dependencies:
21+
22+
```bash
23+
npm install
24+
```
25+
26+
Run the dev server:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
## The idea behind the example
33+
34+
Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.js` that uses `components/paragraph.js` and `components/post.js` that can be styled and managed separately.

‎examples/nested-components/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "nested-components",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"next": "*"
11+
},
12+
"author": "",
13+
"license": "ISC"
14+
}

0 commit comments

Comments
 (0)