Import routes from NPM packages

[espoal]

Hello everybody,

a common pattern is to split a big app into several smaller modules, most often NPM packages, and import them in the app. This is especially useful for bigger teams.

How could I import multiple routes from multiple NPM packages?

Is filesystem-based routing something useful for smaller apps, but unfit for bigger development teams?

[arunoda]

Yes divide on conquer :)
Basically, you need to move your app's content into multiple component libraries.

Then use those libs inside your main app repo, which is a next.js app.
And this is same technique you would do for any other React app.

[espoal]

hey @arunoda thank you for your reply!
I am trying out next.js just because I saw you working on it, due to the deep respect I have for you.

Talking about another project you built , Flow-Router, I started using group routes a lot in my workflow.
When I write an NPM module I import a route group from the core app, then inside the module I attach routes to the group, thus when the module is imported the routes gets imported automagically.

It might seems like a small thing, but I think it's a big step-up. Think about this approach:

1. Functional Paradigm: The App is just a loader, an higher-order function which imports modules and organize them.

2. Separation of concerns: Each feature is in a module, importing a module enables the features and all the things you need.

3. True Modularity: Common interface are defined through static typing and functional composition, so that modules can be completely rewritten without breaking code.

People doesn't have to worry about other people job. This approach scales out VERY well, I've had one 10+ people team working on a very complex engineering app. It blown me away to see how easier it is when things are compartmentalized so well.

Talking about a more concrete example, let's say that:

1. I have a module, called next-awesome-api-consumer, which enables an api, and wants to expose a route, /awesome-api/config, to allow you to set the api auth credentials.

2. Then I have another module, next-awesome-cdn, which wants to suffix routes with &cdn=true , plus wants a custom route too, /awesome-cdn/config.

I want that both modules work just by importing them, without modifying my app.

I can cover 1, or 2, but not both. I mean I could make it work with a little bit of boilerplate, but I would have to think about it and I think that eventually I would copy group routes.

What do you think?

I propose we either implement group routes like in flow-router, or offer NPM modules a way to attach to the default routing mechanism.

Right now I'm trying with symbolic links, by creating symbolic links in the pages/ folder, but I think it's hacky.

[espoal]

ok after a bit of playing I understood that this is easier than what I thought.

https://github.com/zeit/next.js#custom-server-and-routing

Does this mean that I can use React Router? how does this play with the default routing scheme? it simply overrides it?

[arunoda]

@servermeta You can't use React Router. You can use any server side router to do the routing.

[espoal]

Upon further research this looks like doable. I recreated a route object, and i'm using it to programmatically create routes.

I will refine my approach and eventually publish it.