nextjs-dynamic-routes

Next.js Dynamic Routes (WIP)

A dynamic routing solution for the Next.js framework.

Why ?

Next.js introduced in it's V2 a programmatic routing API allowing you to serve your Next app from, for example, an express server:

// yourServer.js
server.get('/a', (req, res) => {
  return app.render(req, res, '/b', req.query)
})

// /index.js
<Link href="/b" as="/a"><a>Visit me!</a></Link>

But as the number of pages grows, it's getting a little hard to manage...

Introducing Dynamic Routes

npm install --save nextjs-dynamic-routes

First create a routes.js file and list all your Dynamic routes. You don't have to list your regular routes, as Next.js will handle them as usual.

import createDynamicRoutes from 'nextjs-dynamic-routes'

export default createDynamicRoutes({
  user: {
    pattern: '/user/:id',
    page: '/user'
  },
  film: {
    pattern: '/film/:id',
    page: '/film'
  }
})

Add the middleware to your express server:

expressServer.use(dynamicRoutes.createMiddleware(nextApp))

Then Nextjs Dynamic Routes will generate for you every Link components you will need! you just have to import them like this:

// pages/index.js
import { UserLink, FilmLink } from '../routes'

export default () => (
  <div>
    <h1>Users</h1>
    <nav>
      <UserLink id="1"><a>Luke Skywalker</a></UserLink>
      <UserLink id="2"><a>C-3PO</a></UserLink>
    </nav>

    <h1>Films</h1>
    <nav>
      <FilmLink id="1"><a>A New Hope</a></FilmLink>
      <FilmLink id="2"><a>The Empire Strikes Back</a></FilmLink>
    </nav>
  </div>
)

It works for static routes too

You can even import Link components that you didn't declare in your routes.js config file! It's using an es6 Proxy under the hood to auto-fill the href property based on the name of the Link component you imported.

for exemple if you do:

// pages/index.js
import { AboutLink } from '../routes'

what you will actually get is:

props => <Link href="/about" {...props} />

Pretty cool huh?