CODEWITHSUNDEEP
reactjstypescriptnext.js
Vong Panha Huot
Vong Panha Huot

Reputation: 705

Typed NextJs link / route

<Link href="/about">
     <a>About Us</a>
</Link>

Is there a way to enforce type safety for NextJs link?

At the moment, it is hard to refactor the Link. (As it is just a string)

I came across this repo, but the solution is not so elegant. https://github.com/jagaapple/next-typed-routes

Is there something similar to Fluro from Flutter?

Upvotes: 3

Views: 757

Answers (1)

Tate Thurston
Tate Thurston

Reputation: 4660

I had the same problem so I wrote nextjs-routes to solve it. It drops in to existing Nextjs projects without any application code changes.

nextjs-routes generates types for the pathname and query for every page in your pages directory. The generated types are written to nextjs-routes.d.ts which is automatically referenced by your Nextjs project's tsconfig.json. nextjs-routes.d.ts redefines the types for next/link and next/router and applies the generated route types.

Upvotes: 3

Related Questions