Effect CommunityEC
Effect Community2y ago
1 reply
steida

Typed page params and usage in Next.js App Router

Typed page params for Next.js App Router.

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>;
}


Maybe it can be useful for someone.
Was this page helpful?