Astro Typesafe Routes

Enhance your Astro development experience with rigorous type safety for every route in your application. This integration automatically generates TypeScript definitions from your project's route structure.

Documentation • npm • GitHub

---

Features

• 🛟 Typesafe: Ensures all URLs matches a route in your Astro project.
• 🔗 Typed Link Component: Replace your anchor links with the typesafe Link component.
• 🔎 Typesafe Search Params: Support for typesafe and JSON serialized search params when using a SSR adapter.
• 🛠️ Automatic Type Generation: Simple installation as an Astro integration.
• 🧩 Custom Component Support: Add type safety to custom links with the types Route and RouteOptions.

Requirements

Compatible with Astro version 4 and 5, with a minimum of 4.14.0.

Installation

1. Add integration:

npx astro add astro-typesafe-routes

2. Start the Astro development server if it's not already running to run type generation:

npm run dev

Manual Installation

1. Install package:

npm install astro-typesafe-routes

2. Add integration to astro.config.mjs:

import { defineConfig } from 'astro/config';
import astroTypesafeRoutes from "astro-typesafe-routes"

export default defineConfig({
  integrations: [
    astroTypesafeRoutes()
  ]
});

3. Start the Astro development server if it's not already running to run code generation:

npm run dev

Usage

Import the Link component and enjoy typesafe urls.

---
import Link from "astro-typesafe-routes/link";
---

<Link to="/blog/[id]" params={{ id: "4" }}>Blog post</Link>

Advanced Usage

For more in-depth information and detailed usage instructions, please refer to the documentation.