Universal Next.js Route

Static, dynamic and absolute routes generator for Next.js. Define routes once and re-use them everywhere without hassle.

Comes with Link and Router replacements.

Installation

$ npm install next-universal-route

or

$ yarn install next-universal-route

Demo & Examples

Features

• Declaration of DRY and concise routes
• Two-way usage, works on both client and server
• Absolute, static and dynamic paths (using path-to-regexp)
• Opt-in routing system (via middleware)
• Automatic generation of both href and as urls
• Next.js Router replacement
• Next.js Link replacement
• Pass extra params to every page (support for tabs)
• Custom params and query string formatting

 

API Docs

Route

Route.constructor(path: string, page?: string, urlFormatter?: Function): Route

Instantiates a Route object to be used throughout the application.

• To create the route with absolute path, it needs to start with http

  • page can/should be ommited as it won't be used
  • urlFormatter can be ommited as it won't work on absolute paths

• To create SPA friendly routes you have to pass relative paths.

  • path either be static or dynamic (using path-to-regexp)
  • page is required and it should correspond to page in pages/
    • it's possible to pass extra params using query strings syntax which can be accessed inside your page, but won't be shown to your user
  • urlFormatter is optional and it takes a function which will run on every given parameter when Route.generateUrl is called

Route.generateUrl(params?: object, queryStringParams?: object): NextRoute

Generates a NextRoute object which is used for client-side routing. It will generate both href and as via toHref and toAs methods.

• If using static routes you Route.generateUrl can be called without any arguments
• If generating dynamic routes you'll have to pass params and optionally queryStringParams
  • params is the object which corresponds to path-to-regexp params
  • queryStringparams is the object with query string key/values pairs

 

If not using Universal Next.js Route's Link

NextRoute.toAs(): string

Generates as prop to pass to Next.js's Link Component.

NextRoute.toHref(): string

Generates href prop to pass to Next.js's Link Component.

If not using Universal Next.js Route's Middleware Handler

Route.path: string

Returns path-to-regexp string for given route.

Route.page: string

Returns name of the page for given route.

Route.query: string

Returns an object which contains both params and query strings.

 

Router

Router.push(href: NextRoute, options?: object)

Wraps Next.js's Router.push.

Router.prefetch(href: NextRoute)

Wraps Next.js's Router.prefetch.

Router.replace(href: NextRoute, options?: object)

Wraps Next.js's Router.replace.

Router.update(href: Route, params: object)

Wraps Next.js's Router.push and updates only passed params.