Example with next-routes (#1290)

* Example with next-routes

* optimize description

* rename to with-next-routes

Author: fridays

examples/with-next-routes/README.md

@@ -0,0 +1,29 @@
+# Named routes example ([next-routes](https://github.com/fridays/next-routes))
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-next-routes
+cd with-next-routes
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example uses [next-routes](https://github.com/fridays/next-routes) for dynamic routing, which lets you define parameterized, named routes with express-style parameters matching.
+
+It works similar to the [parameterized-routing](https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) example and makes use of next.js [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) possibilities.

examples/with-next-routes/package.json

@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "next-routes": "^1.0.17",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  }
+}

examples/with-next-routes/pages/about.js

@@ -0,0 +1 @@
+export default props => <h1>About foo {props.url.query.foo}</h1>

examples/with-next-routes/pages/blog.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const posts = [
+  { slug: 'hello-world', title: 'Hello world' },
+  { slug: 'another-blog-post', title: 'Another blog post' }
+]
+
+export default class extends React.Component {
+  static async getInitialProps ({ query, res }) {
+    const post = posts.find(post => post.slug === query.slug)
+
+    if (!post && res) {
+      res.statusCode = 404
+    }
+
+    return { post }
+  }
+
+  render () {
+    const { post } = this.props
+
+    if (!post) return <h1>Post not found</h1>
+
+    return <h1>{post.title}</h1>
+  }
+}

examples/with-next-routes/pages/index.js

@@ -0,0 +1,11 @@
+import { Link, Router } from '../routes'
+
+export default () => (
+  <ul>
+    <li><Link route='blog' params={{ slug: 'hello-world' }}><a>Blog: Hello world</a></Link></li>
+    <li><Link route='blog' params={{ slug: 'another-blog-post' }}><a>Blog: Another blog post</a></Link></li>
+    <li><Link route='blog' params={{ slug: 'non-existant' }}><a>Blog: Not found</a></Link></li>
+    <li><button onClick={() => Router.pushRoute('about', { foo: 'bar' })}>About foo bar</button></li>
+    <li><button onClick={() => Router.pushRoute('about', { foo: 'baz' })}>About foo baz</button></li>
+  </ul>
+)

examples/with-next-routes/routes.js

@@ -0,0 +1,5 @@
+const nextRoutes = require('next-routes')
+const routes = module.exports = nextRoutes()
+
+routes.add('blog', '/blog/:slug')
+routes.add('about', '/about-us/:foo(bar|baz)')

examples/with-next-routes/server.js

@@ -0,0 +1,16 @@
+const { createServer } = require('http')
+const next = require('next')
+const routes = require('./routes')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handler = routes.getRequestHandler(app)
+
+app.prepare()
+.then(() => {
+  createServer(handler)
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})