Add/move examples (#470)

* Added redux and styled components (wip) examples.

* Updated examples readmes and package.json

* Fixed styled-components example

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 git@github.com: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 git@github.com: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 git@github.com: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 git@github.com: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 git@github.com: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 git@github.com: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 git@github.com: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
 
+## How to use
+
+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
+```
+
+or clone the repo:
+
+```bash
+git clone git@github.com: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
-
-## How to run it
-
-```sh
-npm install
-npm run dev
-```

examples/using-router/README.md

@@ -1,13 +1,36 @@
 # Example app utilizing next/router for routing
 
+## How to use
+
+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
+```
+
+or clone the repo:
+
+```bash
+git clone git@github.com: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
-
-## How to run it
-
-```sh
-npm install
-npm run dev
-```

examples/with-jest/README.md

@@ -1,26 +0,0 @@
-# Example app using Jest to run tests
-
-This example features:
-
-* A properly configured Next.js app for Jest
-* An example test written with Jest Snapshot Testing
-* An example test written with Enzyme
-
-## How to run it
-
-```sh
-npm install
-npm run dev
-```
-
-## Jest related info
-
-After you've added `jest-cli` and `jest-babel` into your app, make sure to add the following `.babelrc` file.
-
-```json
-{
-    "presets": ["next/babel"]
-}
-```
-
-It'll ask Jest to use the babel configurations used by Next.js.

examples/with-jest/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "my-app",
+  "name": "with-jest",
   "dependencies": {
     "next": "^2.0.0-beta"
   },

examples/with-prefetching/README.md

@@ -1,14 +1,37 @@
 # Example app with prefetching pages
 
+## How to use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz next.js-master/examples/with-prefetching
+cd next.js-master/examples/with-prefetching
+```
+
+or clone the repo:
+
+```bash
+git clone git@github.com:zeit/next.js.git --depth=1
+cd next.js/examples/with-prefetching
+```
+
+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 four simple pages
 * The "about" page uses the imperative (i.e.: "manual") prefetching API to prefetch on hover
 * It will prefetch all the pages in the background except the "contact" page
-
-## How to run it
-
-```sh
-npm install
-npm run dev
-```

examples/with-redux/README.md

@@ -0,0 +1,46 @@
+
+# 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/with-redux
+cd next.js-master/examples/with-redux
+```
+
+or clone the repo:
+
+```bash
+git clone git@github.com:zeit/next.js.git --depth=1
+cd next.js/examples/with-redux
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## The idea behind the example
+
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use redux that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
+In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
+
+![](http://i.imgur.com/JCxtWSj.gif)
+
+Our page is located at `pages/index.js` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the redux store and dispatching the required actions until we are ready to return the initial state to be rendered. The root component for the render method is the `react-redux Provider` that allows us to send the store down to children components so they can access to the state when required.
+
+To pass the initial state from the server to the client we pass it as a prop called `initialState` so then it's available when the client takes over.
+
+The trick here for supporting universal redux is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`
+
+The clock, under `components/Clock.js`, has access to the state using the `connect` function from `react-redux`. In this case Clock is a direct child from the page but it could be deep down the render tree.

examples/with-redux/components/Clock.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+export default connect(state => state)(({ lastUpdate, light }) => {
+  return (
+    <div className={light ? 'light' : ''}>
+      {format(new Date(lastUpdate))}
+      <style jsx>{`
+        div {
+          padding: 15px;
+          display: inline-block;
+          color: #82FA58;
+          font: 50px menlo, monaco, monospace;
+          background-color: #000;
+        }
+
+        .light {
+          background-color: #999;
+        }
+      `}</style>
+    </div>
+  )
+})
+
+const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
+
+const pad = n => n < 10 ? `0${n}` : n

examples/with-redux/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-redux",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "*",
+    "react-redux": "^5.0.1",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0"
+  },
+  "author": "",
+  "license": "ISC"
+}

examples/with-redux/pages/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { reducer, initStore, startClock } from '../store'
+import Clock from '../components/Clock'
+
+export default class Counter extends React.Component {
+  static getInitialProps ({ req }) {
+    const isServer = !!req
+    const store = initStore(reducer, null, isServer)
+    store.dispatch({ type: 'TICK', ts: Date.now() })
+    return { initialState: store.getState(), isServer }
+  }
+
+  constructor (props) {
+    super(props)
+    this.store = initStore(reducer, props.initialState, props.isServer)
+  }
+
+  componentDidMount () {
+    this.timer = this.store.dispatch(startClock())
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.timer)
+  }
+
+  render () {
+    return (
+      <Provider store={this.store}>
+        <Clock />
+      </Provider>
+    )
+  }
+}

examples/with-redux/store.js

@@ -0,0 +1,24 @@
+import { createStore, applyMiddleware } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+
+export const reducer = (state = { lastUpdate: 0, light: false }, action) => {
+  switch (action.type) {
+    case 'TICK': return { lastUpdate: action.ts, light: !!action.light }
+    default: return state
+  }
+}
+
+export const startClock = () => dispatch => {
+  setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
+}
+
+export const initStore = (reducer, initialState, isServer) => {
+  if (isServer && typeof window === 'undefined') {
+    return createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
+  } else {
+    if (!window.store) {
+      window.store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware))
+    }
+    return window.store
+  }
+}

examples/with-styled-components/README.md

@@ -0,0 +1,36 @@
+
+# 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/with-styles-components
+cd next.js-master/examples/with-styled-components
+```
+
+or clone the repo:
+
+```bash
+git clone git@github.com:zeit/next.js.git --depth=1
+cd next.js/examples/with-styled-components
+```
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+Run the dev server:
+
+```bash
+npm run dev
+```
+
+## The idea behind the example
+
+This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
+
+For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`.

examples/with-styled-components/package.json

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

examples/with-styled-components/pages/_document.js

@@ -0,0 +1,29 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+import styleSheet from 'styled-components/lib/models/StyleSheet'
+
+export default class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const renderPage = () => {
+      return ctx.renderPage()
+    }
+
+    const props = await Document.getInitialProps({ ...ctx, renderPage })
+    const style = styleSheet.rules().map(rule => rule.cssText).join('\n')
+    return { ...props, style }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          <title>My page</title>
+          <style dangerouslySetInnerHTML={{ __html: this.props.style }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}

examples/with-styled-components/pages/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Title = styled.h1`
+  color: red;
+  font-size: 50px;
+`
+
+export default () => <Title>My page</Title>