monke-routes
TypeScript icon, indicating that this package has built-in type declarations

4.5.2 • Public • Published

Dynamic Routes for Next.js & next-i18next

npm version Coverage Status Build Status

Fork of fridays/next-routes

Easy to use universal dynamic routes for 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:

npm install advanced-next-routes --save

Create routes.js inside your project:

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)
  • page - Page inside ./pages to be rendered

The page component receives the matched URL parameters merged into query

export default class Blog extends React.Component {
  static async getInitialProps ({query}) {
    // query.slug
  }
  render () {
    // this.props.url.query.slug
  }
}

On the server

// server.js
const next = require('next')
const routes = require('./routes')
const app = next({dev: process.env.NODE_ENV !== 'production'})
const handler = routes.getRequestHandler(app)
import nextI18next from './i18n'
import nextI18NextMiddleware from 'next-i18next/middleware'
 
// With express
const express = require('express')
app.prepare().then(() => {
  const e = express()
  e.use(nextI18NextMiddleware(nextI18next))
  e.use(handler)
  e.listen(3000)
 
})
 

Optionally you can pass a custom handler, for example:

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:

"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

// pages/index.js
import {Link} from '../routes'
 
export default () => (
  <div>
    <div>Welcome to Next.js!</div>
    <Link route='blog' params={{slug: 'hello-world'}} lng='en' hash='someId'>
      <a>Hello world</a>
    </Link>
    or
    <Link route='/en/blog/hello-world/#someId'>
      <a>Hello world</a>
    </Link>
  </div>
)

API:

  • <Link route='name'>...</Link>
  • <Link route='name' params={params}> ... </Link>
  • <Link route='/path/to/match'> ... </Link>

Props:

  • route - Route name or URL to match (alias: to)
  • params - Optional parameters for named routes
  • lng - Optional parameter for locale
  • hash - Optional parameter for hash

It generates the URLs for href and as and renders next/link. Other props like prefetch will work as well.

Router example

// 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'}, {lng: 'en', hash: 'someId'})
    // With route URL
    Router.pushRoute('/en/blog/hello-world/#someId')
  }
  render () {
    return (
      <div>
        <div>{this.props.url.query.slug}</div>
        <button onClick={this.handleClick}>Home</button>
      </div>
    )
  }
}

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 - all options except lng & hash 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:

const routes = module.exports = require('next-routes')({
  Link: require('./my/link')
  Router: require('./my/router')
})

Related links

Package Sidebar

Install

npm i monke-routes

Weekly Downloads

1

Version

4.5.2

License

MIT

Unpacked Size

22 kB

Total Files

8

Last publish

Collaborators

  • zan