Add/move examples (vercel#470)

* Added redux and styled components (wip) examples.

* Updated examples readmes and package.json

* Fixed styled-components example

Author: impronunciable

examples/basic-css/README.md

@@ -0,0 +1,36 @@
+
+# Basic CSS example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/basic-css
+cd next.js-master/examples/basic-css
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/basic-css
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## 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.

examples/basic-css/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "basic-css",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "*"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/custom-server-express/README.md

@@ -0,0 +1,38 @@
+
+# Custom Express Server example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/custom-server-express
+cd next.js-master/examples/custom-server-express
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/custom-server-express
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm start
+```
+
+## 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`.

examples/custom-server/README.md

@@ -0,0 +1,36 @@
+
+# Custom server example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/custom-server
+cd next.js-master/examples/custom-server
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/custom-server
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm start
+```
+
+## 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`.

examples/head-elements/README.md

@@ -0,0 +1,36 @@
+
+# Head elements example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/head-elements
+cd next.js-master/examples/head-elements
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/head-elements
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## 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 `<head>` of your page.
+
+This example shows in `pages/index.js` how to add a title and a couple of meta tags.

examples/head-elements/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "head-elements",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "*"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/hello-world/README.md

@@ -0,0 +1,34 @@
+
+# Hello World example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/hello-world
+cd next.js-master/examples/hello-world
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/hello-world
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## 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.

examples/hello-world/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "*"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/nested-components/README.md

@@ -0,0 +1,34 @@
+
+# Redux example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/nested-components
+cd next.js-master/examples/nested-components
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/nested-components
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## The idea behind the example
+
+Taking advantage of the composable nature of React components we can modularize our apps in self-contained, meaningful components. This example has a page under `pages/index.js` that uses `components/paragraph.js` and `components/post.js` that can be styled and managed separately.

examples/nested-components/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "nested-components",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "*"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/parameterized-routing/README.md

@@ -0,0 +1,34 @@
+
+# Parametrized routes example
+
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/parametrized-routing
+cd next.js-master/examples/parametrized-routing
+```
+
+or clone the repo:
+
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/parametrized-routing
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm start
+```
+
+## The idea behind the example
+
+Next.js allows [Custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) so you can, as we show in this example, parametrize your routes. What we are doing in `server.js` is matching any route with the pattern `/blog/:id` and then passing the id as a parameter to the `pages/blog.js` page.

examples/shared-modules/README.md

@@ -1,13 +1,36 @@
 # Example app using shared modules
 
-This example features:
+## How to use
 
-* An app with two pages which has a common Counter component
-* That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/shared-modules
+cd next.js-master/examples/shared-modules
+```
 
-## How to run it
+or clone the repo:
 
-```sh
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/shared-modules
+```
+
+Install the dependencies:
+
+```bash
 npm install
+```
+
+Run the dev server:
+
+```bash
 npm run dev
 ```
+
+## The idea behind the example
+
+This example features:
+
+* An app with two pages which has a common Counter component
+* That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime

examples/using-router/README.md

@@ -1,13 +1,36 @@
 # Example app utilizing next/router for routing
 
-This example features:
+## How to use
 
-* An app linking pages using `next/router` instead of `<Link>` component.
-* Access the pathname using `next/router` and render it in a component
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/using-router
+cd next.js-master/examples/using-router
+```
 
-## How to run it
+or clone the repo:
 
-```sh
+```bash
+git clone [email protected]:zeit/next.js.git --depth=1
+cd next.js/examples/using-router
+```
+
+Install the dependencies:
+
+```bash
 npm install
+```
+
+Run the dev server:
+
+```bash
 npm run dev
 ```
+
+## The idea behind the example
+
+This example features:
+
+* An app linking pages using `next/router` instead of `<Link>` component.
+* Access the pathname using `next/router` and render it in a component