mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
[POC] Pretty url routing (#1001)
* [example] with pretty url routing * use single quotes even in React components * improve Link import
This commit is contained in:
parent
a57fa7ebb1
commit
db7c286740
30
examples/with-pretty-url-routing/README.md
Normal file
30
examples/with-pretty-url-routing/README.md
Normal file
|
@ -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
|
12
examples/with-pretty-url-routing/package.json
Normal file
12
examples/with-pretty-url-routing/package.json
Normal file
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
34
examples/with-pretty-url-routing/pages/greeting.js
Normal file
34
examples/with-pretty-url-routing/pages/greeting.js
Normal file
|
@ -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
|
||||||
|
}
|
13
examples/with-pretty-url-routing/pages/index.js
Normal file
13
examples/with-pretty-url-routing/pages/index.js
Normal file
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
21
examples/with-pretty-url-routing/routes.js
Normal file
21
examples/with-pretty-url-routing/routes.js
Normal file
|
@ -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
|
20
examples/with-pretty-url-routing/server.js
Normal file
20
examples/with-pretty-url-routing/server.js
Normal file
|
@ -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)
|
||||||
|
})
|
Loading…
Reference in a new issue