Typed page params and usage in Next.js App Router
Typed page params for Next.js App Router.
Usage:
Maybe it can be useful for someone.
import {
StructFields,
ToStruct,
parseEither,
struct,
} from "@effect/schema/Schema";
import { Either } from "effect";
import { Simplify } from "effect/Types";
import { notFound } from "next/navigation";
export const usePageParams = <Fields extends StructFields>(
params: unknown,
fields: Fields,
): Simplify<ToStruct<Fields>> =>
parseEither(struct(fields))(params).pipe(Either.getOrElse(notFound));import {
StructFields,
ToStruct,
parseEither,
struct,
} from "@effect/schema/Schema";
import { Either } from "effect";
import { Simplify } from "effect/Types";
import { notFound } from "next/navigation";
export const usePageParams = <Fields extends StructFields>(
params: unknown,
fields: Fields,
): Simplify<ToStruct<Fields>> =>
parseEither(struct(fields))(params).pipe(Either.getOrElse(notFound));Usage:
export default function Page({ params }: { params: unknown }) {
const { date } = usePageParams(params, { date: DateFromUrlString });
return <div>{date.toISOString()}</div>;
}export default function Page({ params }: { params: unknown }) {
const { date } = usePageParams(params, { date: DateFromUrlString });
return <div>{date.toISOString()}</div>;
}Maybe it can be useful for someone.
