Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fridays/next-routes
Universal dynamic routes for Next.js
https://github.com/fridays/next-routes
nextjs node react router routes routing server-rendering ssr universal
Last synced: 5 days ago
JSON representation
Universal dynamic routes for Next.js
- Host: GitHub
- URL: https://github.com/fridays/next-routes
- Owner: fridays
- License: mit
- Created: 2017-01-30T12:44:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-06T05:50:49.000Z (5 months ago)
- Last Synced: 2024-10-29T15:34:13.566Z (2 months ago)
- Topics: nextjs, node, react, router, routes, routing, server-rendering, ssr, universal
- Language: JavaScript
- Homepage:
- Size: 689 KB
- Stars: 2,472
- Watchers: 18
- Forks: 230
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-nextjs - Next Routes - Universal named routes for Next.js. (Extensions)
- fucking-awesome-nextjs - Next Routes - Universal named routes for Next.js. (Extensions)
README
# Dynamic Routes for Next.js
[](https://www.npmjs.com/package/next-routes) [](https://coveralls.io/github/fridays/next-routes) [](https://travis-ci.org/fridays/next-routes)
> **_Deprecation Notice: This package was a popular choice in the early years of Next.js and is no longer maintained. Please check the Next.js docs for its current ways of routing._**
Easy to use universal dynamic routes for [Next.js](https://github.com/zeit/next.js)
- Express-style route and parameters matching
- Request handler middleware for express & co
- `Link` and `Router` that generate URLs by route definition
## How to use
Install:
```bash
npm install next-routes --save
```
Create `routes.js` inside your project:
```javascript
const routes = require('next-routes')
// Name Page Pattern
module.exports = routes() // ---- ---- -----
.add('about') // about about /about
.add('blog', '/blog/:slug') // blog blog /blog/:slug
.add('user', '/user/:id', 'profile') // user profile /user/:id
.add('/:noname/:lang(en|es)/:wow+', 'complex') // (none) complex /:noname/:lang(en|es)/:wow+
.add({name: 'beta', pattern: '/v3', page: 'v3'}) // beta v3 /v3
```
This file is used both on the server and the client.
API:
- `routes.add([name], pattern = /name, page = name)`
- `routes.add(object)`
Arguments:
- `name` - Route name
- `pattern` - Route pattern (like express, see [path-to-regexp](https://github.com/pillarjs/path-to-regexp))
- `page` - Page inside `./pages` to be rendered
The page component receives the matched URL parameters merged into `query`
```javascript
export default class Blog extends React.Component {
static async getInitialProps({query}) {
// query.slug
}
render() {
// this.props.url.query.slug
}
}
```
## On the server
```javascript
// server.js
const next = require('next')
const routes = require('./routes')
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)
// With express
const express = require('express')
app.prepare().then(() => {
express().use(handler).listen(3000)
})
// Without express
const {createServer} = require('http')
app.prepare().then(() => {
createServer(handler).listen(3000)
})
```
Optionally you can pass a custom handler, for example:
```javascript
const handler = routes.getRequestHandler(app, ({req, res, route, query}) => {
app.render(req, res, route.page, query)
})
```
Make sure to use `server.js` in your `package.json` scripts:
```json
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
```
## On the client
Import `Link` and `Router` from your `routes.js` file to generate URLs based on route definition:
### `Link` example
```jsx
// pages/index.js
import {Link} from '../routes'
export default () => (
)
```
API:
- `...`
- ` ... `
- ` ... `
Props:
- `route` - Route name or URL to match (alias: `to`)
- `params` - Optional parameters for named routes
It generates the URLs for `href` and `as` and renders `next/link`. Other props like `prefetch` will work as well.
### `Router` example
```jsx
// pages/blog.js
import React from 'react'
import {Router} from '../routes'
export default class Blog extends React.Component {
handleClick() {
// With route name and params
Router.pushRoute('blog', {slug: 'hello-world'})
// With route URL
Router.pushRoute('/blog/hello-world')
}
render() {
return (
{this.props.url.query.slug}
Home
)
}
}
```
API:
- `Router.pushRoute(route)`
- `Router.pushRoute(route, params)`
- `Router.pushRoute(route, params, options)`
Arguments:
- `route` - Route name or URL to match
- `params` - Optional parameters for named routes
- `options` - Passed to Next.js
The same works with `.replaceRoute()` and `.prefetchRoute()`
It generates the URLs and calls `next/router`
---
Optionally you can provide custom `Link` and `Router` objects, for example:
```javascript
const routes = module.exports = require('next-routes')({
Link: require('./my/link')
Router: require('./my/router')
})
```
---
##### Related links
- [zeit/next.js](https://github.com/zeit/next.js) - Framework for server-rendered React applications
- [path-to-regexp](https://github.com/pillarjs/path-to-regexp) - Express-style path to regexp