fix type errors?

examples/appdir/package.json

@@ -13,8 +13,8 @@
     "@next/mdx": "^14.2.4",
     "@types/mdx": "^2.0.13",
     "@types/node": "18.16.3",
-    "@types/react": "18.2.5",
-    "@types/react-dom": "18.2.3",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "autoprefixer": "10.4.14",
     "concurrently": "^8.0.1",
     "eslint": "8.39.0",
@@ -25,7 +25,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
     "webpack": "^5",
     "zod": "^3.20.2"
   }

examples/appdir/src/app/(test)/foo/[id]/layout.tsx

@@ -29,4 +29,7 @@ async function Layout({ children, routeParams, modal }: Props) {
   );
 }
 
-export default withLayoutParamValidation<"modal">(Layout, LayoutRoute);
+export default withLayoutParamValidation<LayoutType, "modal">(
+  Layout,
+  LayoutRoute,
+);

examples/appdir/src/app/[slug]/layout.tsx

@@ -24,4 +24,4 @@ async function Layout({ children, routeParams }: Props) {
   );
 }
 
-export default withLayoutParamValidation(Layout, LayoutRoute);
+export default withLayoutParamValidation<LayoutType>(Layout, LayoutRoute);

examples/appdir/src/app/jsonRoute/[foo]/page.tsx

@@ -5,13 +5,21 @@ import { Suspense } from "react";
 
 type PageProps = InferPagePropsType<RouteType>;
 
-const Page = async ({ routeParams }: PageProps) => {
+const Inner = async ({ routeParams }: PageProps) => {
   const params = await routeParams;
   console.log(params.foo === undefined);
 
   return (
-    <Suspense>
+    <>
       <div>{`data: ${JSON.stringify(params)}`}</div>
+    </>
+  );
+};
+
+const Page = (props: PageProps) => {
+  return (
+    <Suspense>
+      <Inner {...props} />
     </Suspense>
   );
 };

examples/appdir/test.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+declare global {
+  namespace JSX {
+    type ElementType = React.ReactNode | Promise<React.ReactNode>;
+    interface Element extends ElementType {}
+  }
+}

package.json

@@ -26,7 +26,7 @@
     "eslint": "8.39.0",
     "prettier": "latest",
     "turbo": "latest",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
     "vitest": "^0.32.0"
   },
   "engines": {

packages/next-typesafe-url/package.json

@@ -65,14 +65,14 @@
     "meow": "9.0.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.5",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
     "eslint": "8.45.0",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "7.1.0",
-    "typescript": "5.1.6",
+    "typescript": "5.1.3",
     "zod": "3.21.4"
   },
   "peerDependencies": {

packages/next-typesafe-url/src/app/hoc.tsx

@@ -1,6 +1,11 @@
 import type { ReactNode } from "react";
 import { parseServerSideParams } from "../utils";
-import type { DynamicRoute, DynamicLayout } from "../types";
+import type {
+  DynamicRoute,
+  DynamicLayout,
+  InferPagePropsType,
+  InferLayoutPropsType,
+} from "../types";
 
 // the props passed to a page component by Next.js
 // https://nextjs.org/docs/app/api-reference/file-conventions/page
@@ -10,11 +15,6 @@ type NextAppPageProps = {
   // [key: string]: unknown;
 };
 
-type SomeReactComponent = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- describing a generic component
-  ...args: any[]
-) => ReactNode | Promise<ReactNode>;
-
 /**
  * A HOC that validates the params passed to a page component.
  * The component you wrap with this should use `InferPagePropsType` for its props.
@@ -24,9 +24,11 @@ type SomeReactComponent = (
  *
  * @example export default withParamValidation(Page, Route);
  */
-export function withParamValidation(
-  Component: SomeReactComponent,
-  validator: DynamicRoute,
+export function withParamValidation<Validator extends DynamicRoute>(
+  Component: (
+    props: InferPagePropsType<Validator>,
+  ) => ReactNode | Promise<ReactNode>,
+  validator: Validator,
 ): (props: NextAppPageProps) => JSX.Element {
   // the new component that will be returned
   const ValidatedPageComponent = (props: NextAppPageProps) => {
@@ -104,9 +106,12 @@ type NextAppLayoutProps<AdditionalKeys extends string = never> = Pick<
  * @example export default withLayoutParamValidation(Layout, LayoutRoute);
  */
 export function withLayoutParamValidation<
+  Validator extends DynamicLayout,
   const AdditionalKeys extends string = never,
 >(
-  Component: SomeReactComponent,
+  Component: (
+    props: InferLayoutPropsType<Validator, AdditionalKeys>,
+  ) => ReactNode | Promise<ReactNode>,
   validator: DynamicLayout,
 ): (props: NextAppLayoutProps<AdditionalKeys>) => JSX.Element {
   // the new component that will be returned