[POC] Pretty url routing (vercel#1001)

BDav24 · timneutkens · commit db7c28674039 · 2017-03-15T15:24:54.000+01:00
* [example] with pretty url routing

* use single quotes even in React components

* improve Link import
diff --git a/examples/with-pretty-url-routing/README.md 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
@@ -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.2"
+  }
+}
diff --git a/examples/with-pretty-url-routing/pages/greeting.js b/examples/with-pretty-url-routing/pages/greeting.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import {Link} from 'next-url-prettifier'
+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
@@ -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
@@ -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
@@ -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)
+})
