1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

Example with next-routes (#1290)

* Example with next-routes

* optimize description

* rename to with-next-routes
This commit is contained in:
fridays 2017-03-01 18:42:47 +01:00 committed by Guillermo Rauch
parent fd8559c971
commit 7c8cd4bc69
7 changed files with 101 additions and 0 deletions

View file

@ -0,0 +1,29 @@
# Named routes example ([next-routes](https://github.com/fridays/next-routes))
## 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-next-routes
cd with-next-routes
```
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 uses [next-routes](https://github.com/fridays/next-routes) for dynamic routing, which lets you define parameterized, named routes with express-style parameters matching.
It works similar to the [parameterized-routing](https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) example and makes use of next.js [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing) possibilities.

View file

@ -0,0 +1,13 @@
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"dependencies": {
"next": "^2.0.0-beta",
"next-routes": "^1.0.17",
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}

View file

@ -0,0 +1 @@
export default props => <h1>About foo {props.url.query.foo}</h1>

View file

@ -0,0 +1,26 @@
import React from 'react'
const posts = [
{ slug: 'hello-world', title: 'Hello world' },
{ slug: 'another-blog-post', title: 'Another blog post' }
]
export default class extends React.Component {
static async getInitialProps ({ query, res }) {
const post = posts.find(post => post.slug === query.slug)
if (!post && res) {
res.statusCode = 404
}
return { post }
}
render () {
const { post } = this.props
if (!post) return <h1>Post not found</h1>
return <h1>{post.title}</h1>
}
}

View file

@ -0,0 +1,11 @@
import { Link, Router } from '../routes'
export default () => (
<ul>
<li><Link route='blog' params={{ slug: 'hello-world' }}><a>Blog: Hello world</a></Link></li>
<li><Link route='blog' params={{ slug: 'another-blog-post' }}><a>Blog: Another blog post</a></Link></li>
<li><Link route='blog' params={{ slug: 'non-existant' }}><a>Blog: Not found</a></Link></li>
<li><button onClick={() => Router.pushRoute('about', { foo: 'bar' })}>About foo bar</button></li>
<li><button onClick={() => Router.pushRoute('about', { foo: 'baz' })}>About foo baz</button></li>
</ul>
)

View file

@ -0,0 +1,5 @@
const nextRoutes = require('next-routes')
const routes = module.exports = nextRoutes()
routes.add('blog', '/blog/:slug')
routes.add('about', '/about-us/:foo(bar|baz)')

View file

@ -0,0 +1,16 @@
const { createServer } = require('http')
const next = require('next')
const routes = require('./routes')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handler = routes.getRequestHandler(app)
app.prepare()
.then(() => {
createServer(handler)
.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})