%% generate tags start %%
#software-engineering
%% generate tags end %%
#software-engineering/remix
%% run start
```ts
const {LinkPreview} = customJS
return LinkPreview.getLinkPreviewFromUrl("https://github.com/yesmeck/remix-routes")
```
%%
<div class="nifty-link-card-container">
<a class="nifty-link-card" href="https://github.com/yesmeck/remix-routes" target="_blank">
<div class="nifty-link-card-text">
<div class="nifty-link-card-title line-clamp-2">GitHub - yesmeck/remix-routes: Typesafe routing for your Remix apps.</div>
<div class="nifty-link-card-description">
Typesafe routing for your Remix apps. Contribute to yesmeck/remix-routes development by creating an account on GitHub.
</div>
<div class="nifty-link-href">
<img class="nifty-link-icon" src="https://github.com/fluidicon.png">
https://github.com/yesmeck/remix-routes
</div>
</div>
<div class="nifty-link-image-container">
<div class="nifty-link-image" style="background-image: url('https://opengraph.githubassets.com/d8ecd6d58c68ffe8714809bedd3da9313d09f9574f79e781cea16c82c06ba667/yesmeck/remix-routes')">
</div>
</div>
</a>
</div>
%% run end %%
## What is it?
a util to help remix dev.
## How to use it?
1. simply install it and run `npx remix-routes`. This will generate the static routes params type in `./node_modules`
2. you can defined typed search params using `zod` and `remix-params-helper`
3. you can also type check the url params
4. on client side, you get the type for routes which can be used in `useLoaderData` and `useRouteLoaderData`
```tsx
import { z } from "zod";
import { getSearchParams } from "remix-params-helper";
const SearchParamsSchema = z.object({
view: z.enum(["list", "grid"]),
sort: z.enum(["price", "size"]).optional(),
page: z.number().int().optional(),
})
export type SearchParams = z.infer<typeof SearchParamsSchema>;
export const loader = async (request) => {
const result = getSearchParams(request, SearchParamsSchema)
if (!result.success) {
return json(result.errors, { status: 400 })
}
const { view, sort, page } = result.data;
}
```
```tsx
import type { ActionFunction } from 'remix';
import { $params } from 'remix-routes'; // <-- Import $params helper.
export const action: ActionFunction = async ({ params }) => {
const { id } = $params("/posts/:id/update", params) // <-- It's type safe, try renaming `id` param.
// ...
}
```
## Alternatives and comparisons