Dynamic Routes with localization for Next.js
Based on Next-Routes with these changes:
- No support for unnamed routes
- Route can be added only by name, locale and pattern (and optionally page) or options object
Link
andRouter
generate URLs only by route definition (name + params)- URLs are prefixed with locale (ie. /en/about)
- Routes can have data object (if you generate routes dynamically you can pass custom data there)
- default RequestHandler set locale and nextRoute properties on request (you can get data with
req.nextRoute.data
)
How to use
Install:
npm install next-routes-with-locale --save
Create routes.js
inside your project:
const routes = moduleexports = locale: 'en' routes
This file is used both on the server and the client.
API:
routes.add(name, locale, pattern = /name, page = name, data)
routes.add(object)
Arguments:
name
- Route name (e.g.about
)locale
- Locale of the route (e.g.fr
)pattern
- Route pattern (e.g./about
; like express, see path-to-regexp)page
- Page inside./pages
to be rendered; can be ommited (it takes by default the route name as the page name)data
- Custom data object
The page component receives the matched URL parameters merged into query
Component static async { // query.slug } { // this.props.url.query.slug }
On the server
// server.jsconst next = const routes = const app = const handler = routes // With expressconst express = app // Without expressconst createServer = app
RequestHandler automatically sets req.locale to locale of matched route so you can use it in your app.
Optionally you can pass a custom handler, for example:
const handler = routes
Make sure to use server.js
in your package.json
scripts:
"scripts":
On the client
Import Link
and Router
from your routes.js
file to generate URLs based on route definition:
Link
example
// pages/index.jsimport Link from '../routes' <div> <div>Welcome to Nextjs!</div> <Link ='blog' => <a>Hello world</a> </Link> or <Link ='blog' ='cs' => <a>Hello world</a> </Link> </div>
API:
<Link href='name'>...</Link>
<Link href='name' locale='locale'>...</Link>
<Link href='name' params={params}> ... </Link>
<Link href='name' locale='locale' params={params}> ... </Link>
Props:
href
- Route name to match (the name, not the pattern)params
- Optional parameters
It generates the URLs prefixed with the locale for href
and as
and renders next/link
. Other props like prefetch
will work as well.
Router
example
// pages/blog.jsimport React from 'react'import Router from '../routes' Component { // With route name and params Router // With route name and params and explicit locale Router } { return <div> <div>thispropsurlqueryslug</div> <button =>Home</button> </div> }
API:
Router.pushRoute(route, params)
- automatically get current localeRouter.pushRoute(route, params, locale)
Router.pushRoute(route, params, locale, options)
Arguments:
route
- Route namelocale
- Route localeparams
- Optional parameters for named routesoptions
- 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 = moduleexports = Link: Router:
Related links
- zeit/next.js - Framework for server-rendered React applications
- path-to-regexp - Express-style path to regexp