modernjs-typed-routes

modernjs-typed-routes is a zero-config plugin for Modern.js. It reads your file-based routes/ folders, generates a single routes.gen.d.ts, and re-exports Link, Navigate and useNavigate as typed versions — so paths autocomplete and route params are required, per route.

Modern.js gives you file-based routing but no types for it: <Link to="/blgo/[id]"> compiles fine and fails in the browser. That gap is what the plugin closes.

What it looks like

import { Link, useNavigate } from 'modernjs-typed-routes';
 
<Link to="/about" />                                // ✅ autocompleted route union
<Link to="/blog/[id]" params={{ id: post.id }} />   // ✅ params required & typed
<Link to="/blgo/[id]" params={{ id: post.id }} />   // ❌ error: Did you mean '"/blog/[id]"'?
 
const { navigateTo } = useNavigate();
navigateTo('/blog/[id]');                           // ❌ error: `params` is required here

Setup is one plugin registered in modern.config.ts. The declaration file regenerates on every modern dev, so the types can't fall behind the routes.

Why it works this way

• The types are derived from Modern.js's own route parser, not from a re-implementation of its conventions. A re-implementation drifts the moment upstream adds a convention; this one can't — and it covers dynamic [id], optional [id$], splats, pathless layouts, flat segments and multi-entry apps for free.
• Types only, zero bundle cost. What's generated is a .d.ts; declaration merging does the rest.
• Params are objects, required per route — the path and its param names autocomplete together.
• It's a CI check, not just an editor nicety. modern typegen && tsc --noEmit turns a broken link into a failed pull request.

I built it in the open because it answers an upstream feature request that Modern.js hasn't picked up yet.

Full guides and API reference live at modernjs-typed-routes.gio-labs.com; install notes are in the README on GitHub.