From 7afcfe36c602f95c019a306b841dedb6a3832a97 Mon Sep 17 00:00:00 2001
From: David Brown <david@devanco.com>
Date: Sun, 5 Feb 2017 15:24:03 +0100
Subject: [PATCH 1/3] [example] with pretty url routing

---
 examples/with-pretty-url-routing/README.md    | 30 ++++++++++++++++
 examples/with-pretty-url-routing/package.json | 12 +++++++
 .../with-pretty-url-routing/pages/greeting.js | 34 +++++++++++++++++++
 .../with-pretty-url-routing/pages/index.js    | 13 +++++++
 examples/with-pretty-url-routing/routes.js    | 21 ++++++++++++
 examples/with-pretty-url-routing/server.js    | 20 +++++++++++
 6 files changed, 130 insertions(+)
 create mode 100644 examples/with-pretty-url-routing/README.md
 create mode 100644 examples/with-pretty-url-routing/package.json
 create mode 100644 examples/with-pretty-url-routing/pages/greeting.js
 create mode 100644 examples/with-pretty-url-routing/pages/index.js
 create mode 100644 examples/with-pretty-url-routing/routes.js
 create mode 100644 examples/with-pretty-url-routing/server.js

diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md
new file mode 100644
index 0000000000000..759f4186eb4f8
--- /dev/null
+++ b/examples/with-pretty-url-routing/README.md
@@ -0,0 +1,30 @@
+
+# Example app with pretty url routing
+
+## 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-pretty-url-routing
+cd with-pretty-url-routing
+```
+
+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 features:
+- route customisation and parameterization
+- reverse routing
diff --git a/examples/with-pretty-url-routing/package.json b/examples/with-pretty-url-routing/package.json
new file mode 100644
index 0000000000000..86dca6c5d02db
--- /dev/null
+++ b/examples/with-pretty-url-routing/package.json
@@ -0,0 +1,12 @@
+{
+  "scripts": {
+    "dev": "node server.js",
+    "build": "next build",
+    "start": "NODE_ENV=production node server.js"
+  },
+  "dependencies": {
+    "express": "^4.14.1",
+    "next": "^2.0.0-beta.23",
+    "next-url-prettifier": "^1.0.1"
+  }
+}
diff --git a/examples/with-pretty-url-routing/pages/greeting.js b/examples/with-pretty-url-routing/pages/greeting.js
new file mode 100644
index 0000000000000..592bc430adc34
--- /dev/null
+++ b/examples/with-pretty-url-routing/pages/greeting.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import Link from 'next-url-prettifier/lib/link'
+import {Router} from '../routes'
+
+export default class GreetingPage extends React.Component {
+  static getInitialProps ({query: {lang, name}}) {
+    return {lang, name}
+  }
+
+  renderSwitchLangageLink () {
+    const {lang, name} = this.props
+    const switchLang = lang === 'fr' ? 'en' : 'fr'
+    return (
+      <Link route={Router.linkPage('greeting', {name, lang: switchLang})}>
+        <a>{switchLang === 'fr' ? 'Français' : 'English'}</a>
+      </Link>
+    )
+  }
+
+  render () {
+    const {lang, name} = this.props
+    return (
+      <div>
+        <h1>{lang === 'fr' ? 'Bonjour' : 'Hello'} {name}</h1>
+        <div>{this.renderSwitchLangageLink()}</div>
+      </div>
+    )
+  }
+}
+
+GreetingPage.propTypes = {
+  lang: React.PropTypes.string,
+  name: React.PropTypes.string
+}
diff --git a/examples/with-pretty-url-routing/pages/index.js b/examples/with-pretty-url-routing/pages/index.js
new file mode 100644
index 0000000000000..fb7f26712953d
--- /dev/null
+++ b/examples/with-pretty-url-routing/pages/index.js
@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function IndexPage () {
+  return (
+    <div>
+      <h1>Homepage</h1>
+      <form method="GET" action="/greeting">
+        Name: <input name="name" />
+        <input type="submit" />
+      </form>
+    </div>
+  )
+}
diff --git a/examples/with-pretty-url-routing/routes.js b/examples/with-pretty-url-routing/routes.js
new file mode 100644
index 0000000000000..3a6d092afb765
--- /dev/null
+++ b/examples/with-pretty-url-routing/routes.js
@@ -0,0 +1,21 @@
+const UrlPrettifier = require('next-url-prettifier').default
+
+const routes = [
+  {
+    page: 'index',
+    prettyUrl: '/home'
+  },
+  {
+    page: 'greeting',
+    prettyUrl: ({lang = '', name = ''}) =>
+      (lang === 'fr' ? `/bonjour/${name}` : `/hello/${name}`),
+    prettyUrlPatterns: [
+      {pattern: '/hello/:name', defaultParams: {lang: 'en'}},
+      {pattern: '/bonjour/:name', defaultParams: {lang: 'fr'}}
+    ]
+  }
+]
+
+const urlPrettifier = new UrlPrettifier(routes)
+exports.default = routes
+exports.Router = urlPrettifier
diff --git a/examples/with-pretty-url-routing/server.js b/examples/with-pretty-url-routing/server.js
new file mode 100644
index 0000000000000..f535775b04b7d
--- /dev/null
+++ b/examples/with-pretty-url-routing/server.js
@@ -0,0 +1,20 @@
+const express = require('express')
+const next = require('next')
+const Router = require('./routes').Router
+
+const dev = process.env.NODE_ENV !== 'production'
+const port = parseInt(process.env.PORT, 10) || 3000
+const app = next({dev})
+const handle = app.getRequestHandler()
+
+app.prepare()
+.then(() => {
+  const server = express()
+
+  Router.forEachPattern((page, pattern, defaultParams) => server.get(pattern, (req, res) =>
+    app.render(req, res, `/${page}`, Object.assign({}, defaultParams, req.query, req.params))
+  ))
+
+  server.get('*', (req, res) => handle(req, res))
+  server.listen(port)
+})

From 85ee482e2811a0fcc000bd3f8e3d182d452cc73b Mon Sep 17 00:00:00 2001
From: David Brown <david@devanco.com>
Date: Sun, 5 Feb 2017 15:34:57 +0100
Subject: [PATCH 2/3] use single quotes even in React components

---
 examples/with-pretty-url-routing/pages/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/with-pretty-url-routing/pages/index.js b/examples/with-pretty-url-routing/pages/index.js
index fb7f26712953d..6a83cad29630f 100644
--- a/examples/with-pretty-url-routing/pages/index.js
+++ b/examples/with-pretty-url-routing/pages/index.js
@@ -4,9 +4,9 @@ export default function IndexPage () {
   return (
     <div>
       <h1>Homepage</h1>
-      <form method="GET" action="/greeting">
-        Name: <input name="name" />
-        <input type="submit" />
+      <form method='GET' action='/greeting'>
+        Name: <input name='name' />
+        <input type='submit' />
       </form>
     </div>
   )

From b942be8ff66a38bfa23521deb5893db21dc3887f Mon Sep 17 00:00:00 2001
From: David Brown <david@devanco.com>
Date: Mon, 6 Feb 2017 17:19:25 +0100
Subject: [PATCH 3/3] improve Link import

---
 examples/with-pretty-url-routing/package.json      | 2 +-
 examples/with-pretty-url-routing/pages/greeting.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/with-pretty-url-routing/package.json b/examples/with-pretty-url-routing/package.json
index 86dca6c5d02db..8a688e31cc992 100644
--- a/examples/with-pretty-url-routing/package.json
+++ b/examples/with-pretty-url-routing/package.json
@@ -7,6 +7,6 @@
   "dependencies": {
     "express": "^4.14.1",
     "next": "^2.0.0-beta.23",
-    "next-url-prettifier": "^1.0.1"
+    "next-url-prettifier": "^1.0.2"
   }
 }
diff --git a/examples/with-pretty-url-routing/pages/greeting.js b/examples/with-pretty-url-routing/pages/greeting.js
index 592bc430adc34..e4fe354fd3ab9 100644
--- a/examples/with-pretty-url-routing/pages/greeting.js
+++ b/examples/with-pretty-url-routing/pages/greeting.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'next-url-prettifier/lib/link'
+import {Link} from 'next-url-prettifier'
 import {Router} from '../routes'
 
 export default class GreetingPage extends React.Component {