diff --git a/examples/with-pretty-url-routing/README.md b/examples/with-pretty-url-routing/README.md new file mode 100644 index 00000000..759f4186 --- /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 00000000..8a688e31 --- /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.2" + } +} 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 00000000..e4fe354f --- /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' +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 ( + + {switchLang === 'fr' ? 'Français' : 'English'} + + ) + } + + render () { + const {lang, name} = this.props + return ( +
+

{lang === 'fr' ? 'Bonjour' : 'Hello'} {name}

+
{this.renderSwitchLangageLink()}
+
+ ) + } +} + +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 00000000..6a83cad2 --- /dev/null +++ b/examples/with-pretty-url-routing/pages/index.js @@ -0,0 +1,13 @@ +import React from 'react' + +export default function IndexPage () { + return ( +
+

Homepage

+
+ Name: + +
+
+ ) +} diff --git a/examples/with-pretty-url-routing/routes.js b/examples/with-pretty-url-routing/routes.js new file mode 100644 index 00000000..3a6d092a --- /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 00000000..f535775b --- /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) +})