Declarative Routes for NextJS and React-Router: DRY Routing

Why settle for hard-coded link strings and URLs for fetch calls? Let's build a declarative routing system on top of NextJS's router (and the React-Router), to give us write once and never change routing.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
1:50 Example Application
3:13 Declarative Routing File System
4:11 Declarative Routing Indexing and Layout
5:39 Handling Query Strings
7:03 Builder Features
10:03 Search Routes
11:53 Outroduction

[WilliamShrek]

You are the tech consultant of my company. 🤣

[rogerscript]

As usual, every video from you is awesome, I become a better developer every week thank to your channel, I really appreciate your work.

[josiahayres]

I did not realise how much react routing sucked until I watched this video, I have to try this immediately. Calling out that you can incrementally adopt is what really sold me 🔥

[jazsouf]

Very elegant solution. Simple yet powerful.

[jackn]

top tier content. who even needs trpc or tanstack router anymore

[alexleung]

Nice. I'm surprised this doesn't exist already

[sebastianlpoliak]

WOooo amazing!! looking forward to check it

[elldy]

Really nice solution, I will give it a try! Thank you, great work here 👍

[matematicafacile]

Hi Jack, thank you a lot for the effort you put in the channel. It helps a lot of people grow and that so valuable. I have a question... is there a way to handle catch all routes too? Thanks again|

[tidbts]

I am looking to do the same thing for remix!
Awesome video as always!

[VincentFulco]

Awesome, looking forward to digging in...

[WilliamShrek]

Awsome!! I need this in my app. I am done writing links everywhere.

[joseandkris]

This is a really good idea. Taking this for my projects ❤

[dahermora]

This declarative routing really takes any project to the next level!
I have a question about the example using getPokemonSearchAPI. Shouldn’t we first validate the backend response using zod’s parse or safeParse to prevent any backend model changes from breaking our application?
Thank you!

[aveshlutchman]

Ok, this is dope.
The one thing that I would've preferred is if all the links were exported from one object.
So something like `Link.Home` and `Link.Search` while the APIs would be something like `API.Search` and `API.Edit`, that way everything feels a bit more centralized

[rajthapa]

Looks cool, will try it in my next todo app

[codewithguillaume]

Ver nice, this is a real new approach right?! I like it!

[airixxxx]

I've always done that by myself on my projects, it's one of the reasons I don't like Next directory based router. In the React standalone days, I would create all the routing from an constant object. If one route needed to change you only had to change that object, with Next you can't do that, you need to change the names and location of folders and in the code as well.

[lcarv]

I know it’s zoomed but your terminal looks like a pack of m&ms. Nice video btw 🎉

[MrJulzies]

This reminds me of the work done by ethan on next-typesafe-url ( cant paste links ) :( ! Super awesome stuff and works pretty well in my projects to solve the same problem :)