Nothing Prevents Misery

    @socialgouv/next-routes
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    Dynamic Routes for Next.js

    Easy to use universal dynamic routes for Next.js

    Fork of next-routes with anchor support

    • 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 next-routes-2 --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);
    
    // With express
    const express = require("express");
    app.prepare().then(() => {
      express()
        .use(handler)
        .listen(3000);
    });
    
    // Without express
    const { createServer } = require("http");
    app.prepare().then(() => {
      createServer(handler).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" }}>
          <a>Hello world</a>
        </Link>
        or
        <Link route="/blog/hello-world">
          <a>Hello world</a>
        </Link>
      </div>
    );

    API:

    • <Link route='name'>...</Link>
    • <Link route='name' hash='intro'>...</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
    • hash - Optional 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" });
        // With route name and params and hash
        Router.pushRoute("blog", { slug: "hello-world" }, { hash: "intro" });
        // With route URL
        Router.pushRoute("/blog/hello-world");
      }
      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 - Passed to Next.js. can have an optional hash.

    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

    Install

    npm i @socialgouv/next-routes

    DownloadsWeekly Downloads

    14

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    8

    Last publish

    Collaborators

    • revolunet
    • socialgroovybot