├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── example
└── express
│ ├── .babelrc
│ ├── .gitignore
│ ├── README.md
│ ├── donna.json
│ ├── package-lock.json
│ ├── package.json
│ ├── pages
│ ├── .gitignore
│ ├── character-and-film.js
│ ├── character.js
│ ├── film.js
│ └── index.js
│ ├── routes.js
│ ├── server.js
│ └── yarn.lock
├── package-lock.json
├── package.json
├── src
├── Router.js
└── utils
│ ├── array.js
│ ├── object.js
│ ├── queryString.js
│ └── routing.js
├── tests
├── Router.test.js
└── utils
│ └── routing.test.js
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["es2015", { "modules": false }],
4 | "stage-2",
5 | "react"
6 | ],
7 | "env": {
8 | "test": {
9 | "presets": [
10 | ["es2015"],
11 | "stage-2",
12 | "react"
13 | ]
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | .next
5 | dist
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Gabriel Vergnaud
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js Dynamic Routes
2 |
3 | ## /!\ Deprecated, please don't use
4 |
5 | Dynamic routes are now natively supported on Nextjs v9 and higher. This package will stay around on npm, but it is now unmaintained and there will be no new releases.
6 |
7 | ----------
8 |
9 | A dynamic routing solution for the awesome [Next.js](https://github.com/zeit/next.js)
10 | framework.
11 |
12 | ## Why ?
13 |
14 | Next.js introduced in it's V2 a programmatic routing API allowing you to serve your
15 | Next app from, for example, an express server:
16 |
17 | ```js
18 | // yourServer.js
19 | server.get('/user/:id', (req, res) => {
20 | return app.render(req, res, '/user', req.params)
21 | })
22 | ```
23 | ```jsx
24 | // ./pages/index.js
25 | Visit me!
26 | ```
27 |
28 | But as the number of pages grows, it's getting a little hard to manage...
29 |
30 | ## Introducing Dynamic Routes
31 |
32 | ```
33 | npm install --save nextjs-dynamic-routes
34 | ```
35 |
36 | ### Setup your routes
37 | Create a `routes.js` file and list all your **Dynamic** routes.
38 | You don't have to list your regular routes, as Next.js will handle them as usual (but you can!).
39 |
40 | ```js
41 | const Router = require('nextjs-dynamic-routes')
42 |
43 | const router = new Router()
44 |
45 | router.add({ name: 'character', pattern: '/characters/:id' })
46 |
47 | router.add({ name: 'film', pattern: '/films/:id' })
48 |
49 | // if the name of your route is different from your component file name:
50 | router.add({
51 | name: 'characterAndFilm',
52 | pattern: '/character-and-film/:characterId/:filmId',
53 | page: '/character-and-film'
54 | })
55 |
56 | module.exports = router
57 |
58 | ```
59 |
60 | ### Setup your request handler
61 | ```js
62 | const express = require('express')
63 | const next = require('next')
64 | const Router = require('./routes')
65 |
66 | const app = next({ dev: process.env.NODE_ENV !== 'production' })
67 | const server = express()
68 | const handle = Router.getRequestHandler(app)
69 |
70 | app.prepare()
71 | .then(() => {
72 | server.get('*', (req, res) => handle(req, res))
73 | server.listen(3000)
74 | })
75 | ```
76 |
77 | ### Use your routes
78 | Then Nextjs Dynamic Routes exports a `Link` component. It's just like `next/link`,
79 | but it adds a `route` prop that let you refer to a route by its name.
80 |
81 | ```jsx
82 | // pages/index.js
83 | import React from 'react'
84 | import { Link } from '../routes'
85 |
86 | export default () => (
87 |
98 | )
99 | ```
100 |
101 | ```jsx
102 | // pages/character.js
103 | import React from 'react'
104 |
105 | export default class Character extends React.Component {
106 | static async getInitialProps({ query }) {
107 | return fetch(`//swapi.co/api/films/${query.id}`).then(x => x.json())
108 | }
109 |
110 | render() {
111 | return {this.props.name}
112 | }
113 | }
114 | ```
115 |
116 | ## Prefetching data
117 | Next.js has this great feature allowing you to prefetch data for your next routes
118 | in the background.
119 |
120 | You can benefit from that by simply putting a `prefetch` property on any Link :
121 |
122 | ```jsx
123 | The Empire Strikes Back
124 | ```
125 |
126 | ## Imperative API
127 |
128 | ### Router.pushRoute(name, params [, options])
129 | ```jsx
130 | import Router from '../routes'
131 |
132 | Router.pushRoute('film', { id: 2 })}>
133 | Go to film 2
134 |
135 | ```
136 |
137 | ### Router.replaceRoute(name, params [, options])
138 | ```jsx
139 | import Router from '../routes'
140 |
141 | Router.replaceRoute('film', { id: 2 })}>
142 | Go to film 2
143 |
144 | ```
145 |
146 | ### Router.prefetchRoute(name, params)
147 | ```jsx
148 | import Router from '../routes'
149 |
150 | Router.prefetchRoute('film', { id: 2 })}>
151 | Prefetch film 2
152 |
153 | ```
154 |
155 | ### Router.getRoutePath(name, params)
156 | ```js
157 | import Router from '../routes'
158 |
159 | console.log(Router.getRoutePath('characterAndFilm', { characterId: 2, filmId: 5 }))
160 | // => '/character-and-film/2/5'
161 | ```
162 |
163 | ## Query params
164 | The Link component has a `queryParams` prop which you can fill with an object of regular query parameters.
165 |
166 | ```jsx
167 | The Empire Strikes Back
169 |
170 | ```
171 | This will result in the following url: `/films/2?utm_campaign=website`.
172 |
173 | You can use `queryParams` with the imperative API as well
174 |
175 | ```js
176 | // It doesn't work only for pushRoute, but for all the other methods as well.
177 | Router.pushRoute('film', {
178 | id: 2,
179 | queryParams: {
180 | utm_campaign: 'website'
181 | }
182 | })
183 | ```
184 |
--------------------------------------------------------------------------------
/example/express/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["next/babel"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/express/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | .next
5 |
--------------------------------------------------------------------------------
/example/express/README.md:
--------------------------------------------------------------------------------
1 | # Express example
2 |
3 | `npm install && npm start`
4 |
--------------------------------------------------------------------------------
/example/express/donna.json:
--------------------------------------------------------------------------------
1 | {
2 | "do": [
3 | [
4 | "open",
5 | "Atom",
6 | "/"
7 | ],
8 | [
9 | "browse",
10 | "localhost:3000"
11 | ],
12 | [
13 | "run",
14 | "npm run dev"
15 | ]
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/example/express/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs-dynamic-routes-example",
3 | "version": "0.1.0",
4 | "description": "example of usage for nextjs-dynamic-routes",
5 | "main": "server.js",
6 | "repository": {},
7 | "author": "Gabriel Vergnaud",
8 | "license": "MIT",
9 | "scripts": {
10 | "dev": "node server.js",
11 | "build": "next build",
12 | "start": "NODE_ENV=production node server.js",
13 | "postinstall": "npm run build"
14 | },
15 | "dependencies": {
16 | "express": "^4.16.4",
17 | "isomorphic-fetch": "^2.2.1",
18 | "next": "^7.0.2",
19 | "nextjs-dynamic-routes": "^2.1.9",
20 | "react": "^16.5.2",
21 | "react-dom": "^16.5.2"
22 | },
23 | "engines": {
24 | "node": ">=7.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/example/express/pages/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | .next
5 |
--------------------------------------------------------------------------------
/example/express/pages/character-and-film.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import fetch from 'isomorphic-fetch'
3 | import { Link } from '../routes'
4 |
5 | export default class CharacterAndFilmPage extends Component {
6 | static async getInitialProps({ query }) {
7 | return {
8 | character: await fetch(`//swapi.co/api/people/${query.characterId}`).then(x => x.json()),
9 | film: await fetch(`//swapi.co/api/films/${query.filmId}`).then(x => x.json()),
10 | }
11 | }
12 |
13 | render() {
14 | const { film: { title }, character: { name } } = this.props
15 | return (
16 |
17 |
Back to home
18 |
Character and film
19 |
Film: {title}
20 |
Characters : {name}
21 |
17 |
Back to home
18 |
Charactername : {name}
19 |
Films :
20 |
21 | {films
22 | .map(idFromUrl)
23 | .map((id, i) =>
24 | {id}
27 |
16 |
Back to home
17 |
{title}
18 |
{opening_crawl}
19 |
Characters :
20 |
21 | {characters
22 | .map(idFromUrl)
23 | .map((id, i) =>
24 | {id}
27 |
6 |
Character
7 |
11 |
12 |
Films
13 |
17 |
18 |
Character and Film
19 |
26 |