:arrow_up_small: Alternative library to manage dynamic routes in Next.js
Yes, another library to handle dynamic routes in Next.js
<Link />
on top of itname, pattern, page
path-to-regexp
dependencyInspired by next-routes and next-minimal-routes.
Install routex in your Next.js project:
npm i routex.js
Using yarn:
yarn add routex.js
Okay, so now we have installed routex. First of all we'll need to declare
our application routes. So let's create a routes.js
file:
module.exports = [
{
name: 'index',
pattern: '/',
},
{
name: 'post',
pattern: '/post/:slug',
page: 'post',
},
{
name: 'tags',
pattern: '/tags{-:id}?', // optional id param
page: 'tags',
},
];
If you need more info on how to create the route patterns check the
path-to-regexp
documentation: pillarjs/path-to-regexp.
getRequestHandler()
Once routes are declared, we want to handle it whenever a user loads any existing url
in our application. So here we need to create our routex requestHandlerMiddleware
in our server.js
file,
passing the next.js instance (nextApp
) and our route definitions (routes
) like this:
const express = require('express');
const next = require('next');
const nextApp = next({ dev: process.env.NODE_ENV !== 'production' });
const routes = require('./routes');
const { getRequestHandler } = require('routex.js');
const routexHandlerMiddleware = getRequestHandler(nextApp, routes);
nextApp.prepare().then(() => {
express()
.use(routexHandlerMiddleware);
.listen(3000);
});
link()
Hooray! our server now handles dynamic routes. But now we need a way to create link
components to point to that dynamic routes. So let's create a file CustomLink.js
to use
in our components.
import NextLink from 'next/link';
import { createRouteLinks } from 'routex.js';
import routes from './routes';
const { link } = createRouteLinks(routes);
export default function CustomLink({ children, route, params }) {
return (
<NextLink {...link({ route, params: { ...params } })}>
<a>{children}</a>
</NextLink>
);
}
The createRouteLinks
function transforms and closures all your routes and returns
a new link
function. This link
is the one that will provide to the <NextLink />
component
the as
and href
props. And it needs this two parameters:
route
: a route name, the one that you have in the route definiton.params
: all dynamic paramsAnd this is how you'll use your <CustomLink />
component:
import CustomLink from './CustomLink';
export default () => (
<>
This is an example page component:
<CustomLink
route="post"
params={{
slug: 'next-js-post',
}}
>
Next.js post link
</Link>
</>
);
The output that will return your <CustomLink />
will be exactly the same that if
you create a link using the current Next.js Link, like I'll show you in this example:
import NextLink from 'next/link';
export default () => (
<NextLink as="/post/next-js-post" href="/post?slug=next-js-post">
<a>Next.js post link</a>
</NextLink>
);
Currently, there is no imperative way to change your app route using routex.js
,
like the next-routes' Router.pushRoute(route, params, options)
, because I didn't need it at all in my current applications.
But I'm open to add it if someone finds it interesting. Since then, I'll try to keep this library as simple as possible.
For more information have a look into the example app directory.
Check this code example here: examples/with-route-localization
Check out this blog post to know some of the reasons why I've decided to create another routing library: alexhoma.com/projects/routexjs-yet-another-router-for-nextjs
If you want to suggest a change, feature or any question, feel free to open an issue or a pull request. But check the contributing file before you go.