npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nexum-ag/next-router

v2.0.0-alpha.0

Published

A routing library for Next.js

Downloads

8

Readme

next-router

A routing library for Next.js

NPM

Installation

npm install @nexum-ag/next-router

Introduction

This library is inspired by and works very similar than next-routes. It works with a custom server or with Next.js 9 file system routing.

Differences:
  • Built with TypeScript
  • Route configuration is provided as Object
  • Url Hashes support
  • withNextRouter HOC for custom app component (make current route available)
  • useRouter hook
  • Link and Router available as Singleton thru import { Link, Router } from '@nexum-ag/next-router';
  • Router events with route information
TODO:

How to

Define the routes

Create a file like routes.config.(ts|js) and paste the following:

import { Routes, init } from '@nexum-ag/next-router';

const routes: Routes = {
  'user': {
    pattern: '/user',
    page: '/user',
  },
  'home': {
    pattern: '/',
    page: '/index',
  }
};

init(routes);

We look at one route defininion:

'user': { // This is the route name
  pattern: '/user', // This is the url pattern to call the page
  page: '/user', // This is the next page (pages/user.js or pages/user/index.js)
},

The pattern can be anything that path-to-regexp understands. So a route with an optional parameter would be /user/:name? for example. path-to-regexp by the way is the same library that express is using for the routing.

Usage

Import the routes config file once in your application. (e.g. Custom App component)

You can use next-router Link component instead of the next/link.

import 'routes.config'; // import this only once and before using Link
import { Link } from '@nexum-ag/next-router';

// /user pattern
<Link route="user">
  <a>Got to User page</a>
</Link>

// /user/:name pattern
<Link route="user" params={{ name: 'stefan' }}>
  <a>Got to User detail page</a>
</Link>

withNextRouter HOC

If you use this HOC the query params and route information will be available in getInitialProps and useRouter hook.

// _app.tsx

import React from 'react';
import App from 'next/app';
import '../routes.config';
import { withNextRouter } from '@nexum-ag/next-router';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

export default withNextRouter(MyApp);
// next page example

Page.getInitialProps = async ({ query }) => {
  // query contains the matched route params + get params
  return { query };
}
// useRouter hook example

import React from 'react';
import { useRouter } from '@nexum-ag/next-router';

const Component = props => {
  const { route, params, query } = useRouter();

  return (
    <>
      <h1>Route: {route}</h1>

      <p>params:</p>
      {JSON.stringify(params)}

      <p>query:</p>
      {JSON.stringify(query)}
    </>
  );
}

Custom Router/Link

You can pass a custom Router class, Link component or getRouterMatchFunction to the init function if you need to. They will be used instead of the built ins with import { Link, Router } from '@nexum-ag/next-router';.

import { Routes, init } from '@nexum-ag/next-router';

const routes: Routes = {
  ...
};

init(routes, YourRouterClass, YourLinkFactory, yourGetRouterMatchFunction);

Custom Server

If you use a custom server you can create more complex routes and are not limited by what you can do with Next.js default routing.

Disable file-system routing

// next.config.js

module.exports = {
 useFileSystemPublicRoutes: false,
}
// server.js

const express = require('express');
const next = require('next');

require('./routes.config');
const Router = require('@nexum-ag/next-router').Router;

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const render = (req, res, page, params, query, route) => app.render(req, res, page, params);

app.prepare().then(() => {
 const server = express();
 
 server.use(Router.getRequestHandler(render));
 
 server.all('*', (req, res) => {
   return handle(req, res);
 })
 
 server.listen(port, err => {
   if (err) throw err
   console.log(`> Ready on http://localhost:${port}`);
 })
});

Router Events

You can use the same events you know from the original next/router. But instead of the url you get an object with the route information. (from type CurrentRoute)

import { Router } from '@nexum-ag/next-router';

const handleRouteChange = route => {
 console.log('App is changing to route: ', route);
};

Router.events.on('routeChangeStart', handleRouteChange);

License

next-router is MIT licensed.