All Projects → Zegocover → next-route-resolver

Zegocover / next-route-resolver

Licence: MIT license
Declarative route definition for Next.js

Programming Languages

javascript
184084 projects - #8 most used programming language
HCL
1544 projects

Projects that are alternatives of or similar to next-route-resolver

nepomuk
A public transit router for GTFS feeds (currently only static) written in modern c++
Stars: ✭ 22 (-62.07%)
Mutual labels:  routing
route pattern generator
A Dart static code generator that produces matchers and builders from route uri patterns.
Stars: ✭ 31 (-46.55%)
Mutual labels:  routing
pocketinternet
A Pocket Internet for teaching how the Internet really works.
Stars: ✭ 28 (-51.72%)
Mutual labels:  routing
yates
YATES (Yet Another Traffic Engineering System)
Stars: ✭ 46 (-20.69%)
Mutual labels:  routing
dcompass
A high-performance programmable DNS component aiming at robustness, speed, and flexibility
Stars: ✭ 260 (+348.28%)
Mutual labels:  routing
angular-httpclient
Angular 15 Example HttpClient
Stars: ✭ 21 (-63.79%)
Mutual labels:  routing
vue-error-page
[NO LONGER MAINTAINED] Provides a wrapper for router-view that allows you to show error pages without changing the URL.
Stars: ✭ 52 (-10.34%)
Mutual labels:  routing
spopt
Spatial Optimization
Stars: ✭ 186 (+220.69%)
Mutual labels:  routing
Mignis
Mignis is a semantic based tool for firewall configuration.
Stars: ✭ 43 (-25.86%)
Mutual labels:  routing
router
An Fully Automatic RESTful PHP Router
Stars: ✭ 51 (-12.07%)
Mutual labels:  routing
cloudflare-worker-router
A super lightweight router (1.3K) with middleware support and ZERO dependencies for CloudFlare Workers.
Stars: ✭ 144 (+148.28%)
Mutual labels:  routing
scion-microfrontend-platform
SCION Microfrontend Platform is a TypeScript-based open-source library that helps to implement a microfrontend architecture using iframes.
Stars: ✭ 51 (-12.07%)
Mutual labels:  routing
sample-envoy-proxy
custom implementation of service discovery with envoy and inter-service communication for spring-boot applications
Stars: ✭ 29 (-50%)
Mutual labels:  routing
pinecone
Peer-to-peer overlay routing for the Matrix ecosystem
Stars: ✭ 361 (+522.41%)
Mutual labels:  routing
cumulus
Cumulus is a high-level Dart framework that makes developing application logic on top of Firebase quick and simple.
Stars: ✭ 14 (-75.86%)
Mutual labels:  routing
Pedalino
Smart wireless MIDI foot controller for guitarists and more.
Stars: ✭ 105 (+81.03%)
Mutual labels:  routing
router-example
Use React Router DOM to create a Single Page Application (SPA).
Stars: ✭ 50 (-13.79%)
Mutual labels:  routing
vpc-peering-operator
A Kubernetes Operator to manage the lifecycle of AWS VPC Peering Connections
Stars: ✭ 23 (-60.34%)
Mutual labels:  routing
pim6sd
PIM for IPv6 sparse mode daemon
Stars: ✭ 15 (-74.14%)
Mutual labels:  routing
mobx-router5
Router5 integration with mobx
Stars: ✭ 22 (-62.07%)
Mutual labels:  routing

next-route-resolver

Declarative route definition for Next.js

Allows you to define the routes for your Next.js website, to decouple them from the pages folder convention. The API is partly inspired by Django's URL configuration.

Motivation

  1. The default Next.js convention of mapping folder structures to URLs didn't fit our mental model of how websites should be structured.
  2. The facility for "masking" routes to bypass the pages convention is functional, but is lacking in the necessary abstractions to make it ergonomic.
  3. Existing solutions such as next-routes partially solve the problem, but use a chainable API that can be hard to compose and enable more advanced functionality.

Drawbacks

  1. Requires defining your own server (eg using Express.js) rather using the scripts Next.js gives you out of the box.
  2. Centralised routing needs to be in the core bundle, which could present a filesize issue for larger websites.

Installation

npm install next-route-resolver

or

yarn add next-route-resolver

Basic usage

Define some routes

import { compileRoutes } from "next-route-resolver";

const routes = compileRoutes([
  {
    path: "/",
    name: "homepage",
    page: "Homepage",
  },
  {
    path: "/posts/",
    name: "blog-index",
    page: "BlogIndex",
  },
  {
    path: "/posts/:slug/",
    name: "blog-post",
    page: "BlogPost",
  },
]);

Resolving URLs to a page and query

The returned object from the resolve function can be used to tell Next.js what page to render. You'll most likely use this as part of a request handler in your server code.

import { resolve } from "next-route-resolver";

import routes from "./routes";

resolve(routes, "/posts/my-first-blog-post/");
// { page: "./BlogPost", query: { slug: "my-first-blog-post"}}

Creating Link configuration

You'll also want to be able to create links to pages within your app. We've provided a function that will return necessary parameters for use with the Link component as well as the imperative API.

import { reverse } from "next-route-resolver";

import routes from "./routes";

reverse(routes, "blog-post", { slug: "my-first-blog-post" });
// { as: "/posts/my-first-blog-post/", href: { pathname: "/BlogPost", query: { slug: "my-first-blog-post" }}}

Includes

If your routes are getting too long and unweirdly, you can split them up.

import { compileRoutes, include } from "next-route-resolver";

const blogRoutes = [
  {
    path: "/posts/",
    name: "blog-index",
    page: "BlogIndex",
  },
  {
    path: "/posts/:slug/",
    name: "blog-post",
    page: "BlogPost",
  },
];

const routes = compileRoutes([
  include({ routes: blogRoutes }),
  {
    path: "/",
    name: "homepage",
    page: "Homepage",
  },
]);

You can also add a prefix to paths to make included routes more portable.

import { compileRoutes, include } from "next-route-resolver";

const blogRoutes = [
  {
    path: "/",
    name: "blog-index",
    page: "BlogIndex",
  },
  {
    path: "/:slug/",
    name: "blog-post",
    page: "BlogPost",
  },
];

const routes = compileRoutes([
  include({ routes: blogRoutes, prefix: "/posts/" }),
  {
    path: "/",
    name: "homepage",
    page: "Homepage",
  },
]);

Contextual includes

Let's say you want to make regional variants of your website. Perhaps under path prefixes such as /us/ and /es/. It's likely that you'll have some pages that are unique to each country, and some that are shared (but translated).

You could configure your routes as follows:

import { compileRoutes, include } from "next-route-resolver";

const usRoutes = [
  {
    path: "/contact-us/",
    name: "contact-us",
    page: "Contact",
  },
  {
    path: "/",
    name: "homepage",
    page: "HomepageUs",
  },
];

const esRoutes = [
  {
    path: "/contacto/",
    name: "contact-us",
    page: "Contact",
  },
  {
    path: "/",
    name: "homepage",
    page: "HomepageEs",
  },
];

const routes = compileRoutes([
  include({ routes: usRoutes, prefix: "/us/", params: { country: "us" } }),
  include({ routes: esRoutes, prefix: "/es/", params: { country: "es" } }),
]);

Now resolving and reversing are aware of the country parameter.

resolve(routes, "/us/");
// { page: "./HomepageUs", query: { country: "us"}}

reverse(routes, "homepage", { country: "us" });
// { as: "/us/", href: { pathname: "/HomepageUs", query: { country: "us" }}}

resolve(routes, "/es/contacto/");
// { page: "./Contact", query: { country: "es"}}

reverse(routes, "contact-us", { country: "es" });
// { as: "/es/contacto/", href: { pathname: "/Contact", query: { country: "es" }}}

Nesting parameters

Perhaps with the previous example, you want the US website to be the default rather than be scoped under a /us/ path. This is possible, because any parameters defined with include will override the same name parameters from higher up. So you could define your routes like this:

import { compileRoutes, include } from "next-route-resolver";

const usRoutes = [
  {
    path: "/contact-us/",
    name: "contact-us",
    page: "Contact",
  },
  {
    path: "/",
    name: "homepage",
    page: "HomepageUs",
  },
];

const esRoutes = [
  {
    path: "/contacto/",
    name: "contact-us",
    page: "Contact",
  },
  {
    path: "/",
    name: "homepage",
    page: "HomepageEs",
  },
];

const routes = compileRoutes(
  include({
    routes: [
      include({ routes: usRoutes }),
      include({ routes: esRoutes, prefix: "/es/", params: { country: "es" } }),
    ],
    params: { country: "us" },
  }),
);

You'd now be able to resolve and reverse like this:

resolve(routes, "/");
// { page: "./HomepageUs", query: { country: "us"}}

reverse(routes, "homepage", { country: "us" });
// { as: "/", href: { pathname: "/HomepageUs", query: { country: "us" }}}

resolve(routes, "/es/contacto/");
// { page: "./Contact", query: { country: "es"}}

reverse(routes, "contact-us", { country: "es" });
// { as: "/es/contacto/", href: { pathname: "/Contact", query: { country: "es" }}}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].