add parameterized routing example

Author: nkzawa

examples/parameterized-routing/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "accepts": "1.3.3",
+    "next": "*",
+    "path-match": "1.2.4"
+  }
+}

examples/parameterized-routing/pages/blog.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+export default class extends Component {
+  static getInitialProps ({ query: { id } }) {
+    return { id }
+  }
+
+  render () {
+    return <div>
+      <h1>My {this.props.id} blog post</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+    </div>
+  }
+}

examples/parameterized-routing/pages/index.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default () => (
+  <ul>
+    <li><Link href='/blog?id=first' as='/blog/first'><a>My first blog post</a></Link></li>
+    <li><Link href='/blog?id=second' as='/blog/second'><a>My second blog post</a></Link></li>
+    <li><Link href='/blog?id=last' as='/blog/last'><a>My last blog post</a></Link></li>
+  </ul>
+)

examples/parameterized-routing/server.js

@@ -0,0 +1,35 @@
+const { createServer } = require('http')
+const { parse } = require('url')
+const next = require('next')
+const accepts = require('accepts')
+const pathMatch = require('path-match')
+
+const app = next({ dev: true })
+const handle = app.getRequestHandler()
+const route = pathMatch()
+const match = route('/blog/:id')
+
+app.prepare()
+.then(() => {
+  createServer((req, res) => {
+    const accept = accepts(req)
+    const type = accept.type(['json', 'html'])
+    if (type === 'json') {
+      handle(req, res)
+      return
+    }
+
+    const { pathname } = parse(req.url)
+    const params = match(pathname)
+    if (params === false) {
+      handle(req, res)
+      return
+    }
+
+    app.render(req, res, '/blog', params)
+  })
+  .listen(3000, (err) => {
+    if (err) throw err
+    console.log('> Ready on http://localhost:3000')
+  })
+})