@repo/routes-kit-next

@repo/routes-kit-next is the Next.js integration for @repo/route-kit. It exports useRouteParams, a client-side hook that parses next/navigation's useParams() against a Route's Zod params schema. It supports strict (throws on parse failure) and partial parsing modes, and automatically coerces numeric URL segments. Its server-page counterpart, parseRouteParamsOrNotFound, parses a page's params promise the same way and calls notFound() when a segment does not parse.

Dependencies

graph TD
  routes_kit_next["@repo/routes-kit-next"] --> route_kit["@repo/route-kit"]
  routes_kit_next -.-> typescript_config["@repo/typescript-config"]
  routes_kit_next -.-> vitest_config["@repo/vitest-config"]

Usage

import { useRouteParams } from "@repo/routes-kit-next";
import { clientRoute } from "~/routes";

function ClientPage() {
  const { id } = useRouteParams(clientRoute);
  // id is fully typed from the route's Zod schema
}
Copy

In a server page, a malformed URL becomes a 404 instead of an error:

import { parseRouteParamsOrNotFound } from "@repo/routes-kit-next";
import { clientRoute } from "~/routes";

type ClientPageProps = { params: Promise<Record<string, string | string[] | undefined>> };

export default async function ClientPage({ params }: ClientPageProps) {
  const { id } = await parseRouteParamsOrNotFound(clientRoute, params);
}
Copy

Scripts