import Link from "next/link"; import queryString from "query-string"; /* Derived from: https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety */ import { z } from "zod"; const _emptySchema = z.object({}) as z.ZodObject>; type LinkProps = Parameters[0]; export type RouteInfo< Params extends z.ZodSchema, Search extends z.ZodSchema, > = { name: string; params: Params; search: Search; description?: string; }; export type GetInfo = { result: Result; }; export type PostInfo = { body: Body; result: Result; description?: string; }; export type PutInfo = { body: Body; result: Result; description?: string; }; type FetchOptions = Parameters[1]; type CoreRouteElements< Params extends z.ZodSchema, Search extends z.ZodSchema = typeof _emptySchema, > = { params: z.output; paramsSchema: Params; search: z.output; searchSchema: Search; }; type PutRouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, Body extends z.ZodSchema, Result extends z.ZodSchema, > = CoreRouteElements & { ( body: z.input, p?: z.input, search?: z.input, options?: FetchOptions, ): Promise>; body: z.output; bodySchema: Body; result: z.output; resultSchema: Result; }; type PostRouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, Body extends z.ZodSchema, Result extends z.ZodSchema, > = CoreRouteElements & { ( body: z.input, p?: z.input, search?: z.input, options?: FetchOptions, ): Promise>; body: z.output; bodySchema: Body; result: z.output; resultSchema: Result; }; type GetRouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, Result extends z.ZodSchema, > = CoreRouteElements & { ( p?: z.input, search?: z.input, options?: FetchOptions, ): Promise>; result: z.output; resultSchema: Result; }; type DeleteRouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, > = CoreRouteElements & (( p?: z.input, search?: z.input, options?: FetchOptions, ) => Promise); export type RouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, > = CoreRouteElements & { (p?: z.input, search?: z.input): string; routeName: string; Link: React.FC< Omit & z.input & { search?: z.input; } & { children?: React.ReactNode } >; ParamsLink: React.FC< Omit & { params?: z.input; search?: z.input; } & { children?: React.ReactNode } >; }; function createPathBuilder>( route: string, ): (params: T) => string { const pathArr = route.split("/").filter(Boolean); // Remove empty strings from splitting let catchAllSegment: ((params: T) => string) | null = null; if (pathArr.at(-1)?.startsWith("[[...")) { const lastSegment = pathArr.pop(); if (lastSegment) { const catchKey = lastSegment.replace("[[...", "").replace("]]", ""); catchAllSegment = (params: T) => { const catchAll = params[catchKey]; return Array.isArray(catchAll) && catchAll.length > 0 ? `/${catchAll.join("/")}` : ""; }; } } const elems: ((params: T) => string)[] = []; for (const elem of pathArr) { const catchAll = /\[\.\.\.(.*)\]/.exec(elem); const param = /\[(.*)\]/.exec(elem); if (catchAll?.[1]) { const key = catchAll[1]; elems.push((params: T) => { const value = params[key]; return Array.isArray(value) ? value.join("/") : ""; }); } else if (param?.[1]) { const key = param[1]; elems.push((params: T) => { const value = params[key]; return typeof value === "string" ? value : ""; }); } else if (!(elem.startsWith("(") && elem.endsWith(")"))) { elems.push(() => elem); } } return (params: T): string => { const segments = elems .map((e) => e(params)) .filter(Boolean) .join("/"); // Always ensure a leading slash const path = segments ? `/${segments}` : "/"; if (catchAllSegment) { return path + catchAllSegment(params); } return path; }; } function createRouteBuilder< Params extends z.ZodSchema, Search extends z.ZodSchema, >(route: string, info: RouteInfo) { const fn = createPathBuilder>(route); return (params?: z.input, search?: z.input) => { let checkedParams: z.input = (params ?? {}) as z.input; if (info.params) { const safeParams = info.params.safeParse(checkedParams); if (!safeParams?.success) { throw new Error( `Invalid params for route ${info.name}: ${safeParams.error.message}`, ); } checkedParams = safeParams.data as z.input; } const safeSearch = info.search ? info.search?.safeParse((search ?? {}) as z.input) : null; if (info.search && !safeSearch?.success) { throw new Error( `Invalid search params for route ${info.name}: ${safeSearch?.error.message}`, ); } const baseUrl = fn(checkedParams as z.output); const searchString = search && queryString.stringify(search as Record); return [baseUrl, searchString ? `?${searchString}` : ""].join(""); }; } export function makePostRoute< Params extends z.ZodSchema, Search extends z.ZodSchema, Body extends z.ZodSchema, Result extends z.ZodSchema, >( route: string, info: RouteInfo, postInfo: PostInfo, ): PostRouteBuilder { const urlBuilder = createRouteBuilder(route, info); const routeBuilder: PostRouteBuilder = ( body: z.input, p?: z.input, search?: z.input, options?: FetchOptions, ): Promise> => { const safeBody = postInfo.body.safeParse(body); if (!safeBody.success) { throw new Error( `Invalid body for route ${info.name}: ${safeBody.error.message}`, ); } return fetch(urlBuilder(p, search), { ...options, method: "POST", body: JSON.stringify(safeBody.data), headers: { ...(options?.headers ?? {}), "Content-Type": "application/json", }, }) .then((res) => { if (!res.ok) { throw new Error(`Failed to fetch ${info.name}: ${res.statusText}`); } return res.json() as Promise as Promise>; }) .then((data) => { const result = postInfo.result.safeParse(data); if (!result.success) { throw new Error( `Invalid response for route ${info.name}: ${result.error.message}`, ); } return result.data as z.output; }); }; routeBuilder.params = undefined as z.output; routeBuilder.paramsSchema = info.params; routeBuilder.search = undefined as z.output; routeBuilder.searchSchema = info.search; routeBuilder.body = undefined as z.output; routeBuilder.bodySchema = postInfo.body; routeBuilder.result = undefined as z.output; routeBuilder.resultSchema = postInfo.result; return routeBuilder; } export function makePutRoute< Params extends z.ZodSchema, Search extends z.ZodSchema, Body extends z.ZodSchema, Result extends z.ZodSchema, >( route: string, info: RouteInfo, putInfo: PutInfo, ): PutRouteBuilder { const urlBuilder = createRouteBuilder(route, info); const routeBuilder: PutRouteBuilder = ( body: z.input, p?: z.input, search?: z.input, options?: FetchOptions, ): Promise> => { const safeBody = putInfo.body.safeParse(body); if (!safeBody.success) { throw new Error( `Invalid body for route ${info.name}: ${safeBody.error.message}`, ); } return fetch(urlBuilder(p, search), { ...options, method: "PUT", body: JSON.stringify(safeBody.data), headers: { ...(options?.headers ?? {}), "Content-Type": "application/json", }, }) .then((res) => { if (!res.ok) { throw new Error(`Failed to fetch ${info.name}: ${res.statusText}`); } return res.json() as Promise as Promise>; }) .then((data) => { const result = putInfo.result.safeParse(data); if (!result.success) { throw new Error( `Invalid response for route ${info.name}: ${result.error.message}`, ); } return result.data as z.output; }); }; routeBuilder.params = undefined as z.output; routeBuilder.paramsSchema = info.params; routeBuilder.search = undefined as z.output; routeBuilder.searchSchema = info.search; routeBuilder.body = undefined as z.output; routeBuilder.bodySchema = putInfo.body; routeBuilder.result = undefined as z.output; routeBuilder.resultSchema = putInfo.result; return routeBuilder; } export function makeGetRoute< Params extends z.ZodSchema, Search extends z.ZodSchema, Result extends z.ZodSchema, >( route: string, info: RouteInfo, getInfo: GetInfo, ): GetRouteBuilder { const urlBuilder = createRouteBuilder(route, info); const routeBuilder: GetRouteBuilder = ( p?: z.input, search?: z.input, options?: FetchOptions, ): Promise> => { return fetch(urlBuilder(p, search), options) .then((res) => { if (!res.ok) { throw new Error(`Failed to fetch ${info.name}: ${res.statusText}`); } return res.json() as Promise as Promise>; }) .then((data) => { const result = getInfo.result.safeParse(data); if (!result.success) { throw new Error( `Invalid response for route ${info.name}: ${result.error.message}`, ); } return result.data as z.output; }); }; routeBuilder.params = undefined as z.output; routeBuilder.paramsSchema = info.params; routeBuilder.search = undefined as z.output; routeBuilder.searchSchema = info.search; routeBuilder.result = undefined as z.output; routeBuilder.resultSchema = getInfo.result; return routeBuilder; } export function makeDeleteRoute< Params extends z.ZodSchema, Search extends z.ZodSchema, >( route: string, info: RouteInfo, ): DeleteRouteBuilder { const urlBuilder = createRouteBuilder(route, info); const routeBuilder: DeleteRouteBuilder = ( p?: z.input, search?: z.input, options?: FetchOptions, ): Promise => { return fetch(urlBuilder(p, search), { ...options, method: "DELETE", headers: { ...(options?.headers ?? {}), "Content-Type": "application/json", }, }).then((res) => { if (!res.ok) { throw new Error(`Failed to fetch ${info.name}: ${res.statusText}`); } }); }; routeBuilder.params = undefined as z.output; routeBuilder.paramsSchema = info.params; routeBuilder.search = undefined as z.output; routeBuilder.searchSchema = info.search; return routeBuilder; } export function makeRoute< Params extends z.ZodSchema, Search extends z.ZodSchema = typeof _emptySchema, >( route: string, info: RouteInfo, ): RouteBuilder { const urlBuilder: RouteBuilder = createRouteBuilder( route, info, ) as RouteBuilder; urlBuilder.routeName = info.name; urlBuilder.ParamsLink = function RouteLink({ params: linkParams, search: linkSearch, children, ...props }: Omit & { params?: z.input; search?: z.input; } & { children?: React.ReactNode }) { return ( {children} ); }; urlBuilder.Link = function RouteLink({ search: linkSearch, children, ...props }: Omit & z.input & { search?: z.input; } & { children?: React.ReactNode }) { const params = info.params.parse(props) as Record; const extraProps = { ...props } as Record; for (const key of Object.keys(params)) { delete extraProps[key]; } const parsedParams = info.params.parse(props) as z.input; const typedLinkSearch = linkSearch as z.input | undefined; return ( )} href={urlBuilder(parsedParams, typedLinkSearch)} > {children} ); }; urlBuilder.params = undefined as z.output; urlBuilder.paramsSchema = info.params; urlBuilder.search = undefined as z.output; urlBuilder.searchSchema = info.search; return urlBuilder; }