Adding an example for universal custom routing#913
Adding an example for universal custom routing#913gcpantazis wants to merge 1 commit intovercel:masterfrom
Conversation
arunoda
left a comment
arunoda
left a comment
There was a problem hiding this comment.
This is pretty superb. This is why we ship a meta api for routing.
Then we see projects like this.
|
|
||
| function matchInternal (route) { | ||
| const match = customRoutes.find((element) => { | ||
| return route.match(element.test) |
There was a problem hiding this comment.
How about if we written this like this:
element.test(route)| @@ -0,0 +1,9 @@ | |||
| module.exports = { | |||
| customRoutes: [{ | |||
There was a problem hiding this comment.
I like using next.config.js as the place for this. But in this file, we might import a lot of server only modules.
So, when we import this on both environments, that'll be an issue.
So, let's use a different file called routes.json or routes.js
| test: /^\/$/, | ||
| routeTo: '/foo' | ||
| }, { | ||
| test: /^\/about(\/?)$/, |
There was a problem hiding this comment.
Use path-to-regexp for express like route URLs.
| import {customRoutes} from '../next.config' | ||
|
|
||
| function matchInternal (route) { | ||
| const match = customRoutes.find((element) => { |
There was a problem hiding this comment.
should this match boolean be memorized for performance?
|
This is quite inspiring 🙂 It would also be great to see
|
|
@gcpantazis Great example! Thanks for sharing it! JFYI: I have recently bumped into another approach with routing: https://github.com/matthewmueller/next-route |
|
@frol That's a good one too. |
|
@gcpantazis could you update this one also? |
|
@timneutkens aye, will do on Monday. I implemented much of what @arunoda suggested in our downstream project, so I'll port that up here as well. 👍 |
|
Awesome, thank you very much ❤️ |
|
I'm going to close this for inactivity. Cleaning up old PRs. i'd love to take this in one day though ❤️ |
|
This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread. |
5 participants
Howdy! I was looking through the examples for a custom
server.js, and they all worked well enough on the server-side. I did notice that they stop working on the client-side unless you use thehrefandasattributes in conjunction on yourLinkcomponents, effectively duplicating your routing logic wherever you have aLink.I can't find it at the moment, but in another issue @rauchg (or perhaps another of the maintainers) +1'd the concept of making a custom component to handle the route matching, referencing some shared configuration, which works like a charm for us. I didn't see a complete example of universal route matching in
./examples, so I thought I'd add one.Hopefully this isn't duplicative from another example! Thanks so much to the team — this project has been an amazing leg up for us! Hoping to get some of our production code moved over to Next soon!