diff --git a/README.md b/README.md index 6b9ce0b..be7e8f0 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,8 @@ If you want a type for all possible `pathname`s you can achieve this via `Route` ```ts import type { Route } from "nextjs-routes"; + +// '/' | '/foos/[foo]' | 'other-route' | ... type Pathname = Route["pathname"]; ``` @@ -192,9 +194,17 @@ type Pathname = Route["pathname"]; If you want to use the generated `Query` for a given `Route`, you can import it from `nextjs-routes`: ```ts +// Query | Query & { foo: string } | ... import type { RoutedQuery } from "nextjs-routes"; ``` +By default, `query` will be typed as the union of all possible query parameters defined by your application routes. If you'd like to narrow the type to fewer routes or a single page, you can supply the path as a type argument: + +```ts +// Query & { foo: string } +type FooRouteQuery = RoutedQuery<"/foos/[foo]">; +``` + ### GetServerSidePropsContext If you're using `getServerSideProps` consider using `GetServerSidePropsContext` from nextjs-routes. This is nearly identical to `GetServerSidePropsContext` from next, but further narrows types based on nextjs-route's route data. diff --git a/examples/app/@types/nextjs-routes.d.ts b/examples/app/@types/nextjs-routes.d.ts index 31e93c2..ade9588 100644 --- a/examples/app/@types/nextjs-routes.d.ts +++ b/examples/app/@types/nextjs-routes.d.ts @@ -175,3 +175,47 @@ declare module "next/router" { export function useRouter
(): NextRouter
;
}
+
+// prettier-ignore
+declare module "next/navigation" {
+ export * from "next/dist/client/components/navigation";
+ import type { RoutedQuery, RouteLiteral } from "nextjs-routes";
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read the current URL's pathname.
+ *
+ * @example
+ * ```ts
+ * "use client"
+ * import { usePathname } from 'next/navigation'
+ *
+ * export default function Page() {
+ * const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
+ * // ...
+ * }
+ * ```
+ *
+ * Read more: [Next.js Docs: `usePathname`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
+ */
+ export function usePathname(): RouteLiteral;
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read a route's dynamic params filled in by the current URL.
+ *
+ * @example
+ * ```ts
+ * "use client"
+ * import { useParams } from 'next/navigation'
+ *
+ * export default function Page() {
+ * // on /dashboard/[team] where pathname is /dashboard/nextjs
+ * const { team } = useParams() // team === "nextjs"
+ * }
+ * ```
+ *
+ * Read more: [Next.js Docs: `useParams`](https://nextjs.org/docs/app/api-reference/functions/use-params)
+ */
+ export function useParams (): NextRouter ;
}
+
+// prettier-ignore
+declare module "next/navigation" {
+ export * from "next/dist/client/components/navigation";
+ import type { RoutedQuery, RouteLiteral } from "nextjs-routes";
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read the current URL's pathname.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { usePathname } from 'next/navigation'
+ *
+ * export default function Page() {
+ * const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
+ * // ...
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`usePathname\`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
+ */
+ export function usePathname(): RouteLiteral;
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read a route's dynamic params filled in by the current URL.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { useParams } from 'next/navigation'
+ *
+ * export default function Page() {
+ * // on /dashboard/[team] where pathname is /dashboard/nextjs
+ * const { team } = useParams() // team === "nextjs"
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`useParams\`](https://nextjs.org/docs/app/api-reference/functions/use-params)
+ */
+ export function useParams (): NextRouter ;
}
+
+// prettier-ignore
+declare module "next/navigation" {
+ export * from "next/dist/client/components/navigation";
+ import type { RoutedQuery, RouteLiteral } from "nextjs-routes";
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read the current URL's pathname.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { usePathname } from 'next/navigation'
+ *
+ * export default function Page() {
+ * const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
+ * // ...
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`usePathname\`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
+ */
+ export function usePathname(): RouteLiteral;
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read a route's dynamic params filled in by the current URL.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { useParams } from 'next/navigation'
+ *
+ * export default function Page() {
+ * // on /dashboard/[team] where pathname is /dashboard/nextjs
+ * const { team } = useParams() // team === "nextjs"
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`useParams\`](https://nextjs.org/docs/app/api-reference/functions/use-params)
+ */
+ export function useParams (): NextRouter ;
}
+
+// prettier-ignore
+declare module "next/navigation" {
+ export * from "next/dist/client/components/navigation";
+ import type { RoutedQuery, RouteLiteral } from "nextjs-routes";
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read the current URL's pathname.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { usePathname } from 'next/navigation'
+ *
+ * export default function Page() {
+ * const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
+ * // ...
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`usePathname\`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
+ */
+ export function usePathname(): RouteLiteral;
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read a route's dynamic params filled in by the current URL.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { useParams } from 'next/navigation'
+ *
+ * export default function Page() {
+ * // on /dashboard/[team] where pathname is /dashboard/nextjs
+ * const { team } = useParams() // team === "nextjs"
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`useParams\`](https://nextjs.org/docs/app/api-reference/functions/use-params)
+ */
+ export function useParams (): NextRouter ;
}
`;
+
+ if (config.usingAppDirectory) {
+ output += `\
+
+// prettier-ignore
+declare module "next/navigation" {
+ export * from "next/dist/client/components/navigation";
+ import type { RoutedQuery, RouteLiteral } from "nextjs-routes";
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read the current URL's pathname.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { usePathname } from 'next/navigation'
+ *
+ * export default function Page() {
+ * const pathname = usePathname() // returns "/dashboard" on /dashboard?foo=bar
+ * // ...
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`usePathname\`](https://nextjs.org/docs/app/api-reference/functions/use-pathname)
+ */
+ export function usePathname(): RouteLiteral;
+
+/**
+ * A [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) hook
+ * that lets you read a route's dynamic params filled in by the current URL.
+ *
+ * @example
+ * \`\`\`ts
+ * "use client"
+ * import { useParams } from 'next/navigation'
+ *
+ * export default function Page() {
+ * // on /dashboard/[team] where pathname is /dashboard/nextjs
+ * const { team } = useParams() // team === "nextjs"
+ * }
+ * \`\`\`
+ *
+ * Read more: [Next.js Docs: \`useParams\`](https://nextjs.org/docs/app/api-reference/functions/use-params)
+ */
+ export function useParams