-
-
Save magicspon/c1647cf91909808be0a1eed5448bb56d to your computer and use it in GitHub Desktop.
Next.js createPage helper with loader pattern
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { AnyZodObject, z } from 'zod' | |
import { Metadata, ResolvingMetadata } from 'next' | |
type InferParams<Params> = Params extends readonly string[] | |
? { | |
[K in Params[number]]: string | |
} | |
: Params extends AnyZodObject | |
? z.infer<Params> | |
: unknown | |
type LoaderFn< | |
Params extends readonly string[] | AnyZodObject, | |
SearchParams extends readonly string[] | AnyZodObject, | |
> = (args: { | |
params: InferParams<Params> | |
searchParams: InferParams<SearchParams> | |
}) => Promise<any> | |
type InferLoaderData<Loader> = Loader extends (args: any) => Promise<infer T> | |
? T | |
: unknown | |
export interface CreatePageProps< | |
Params extends readonly string[] | AnyZodObject, | |
SearchParams extends readonly string[] | AnyZodObject, | |
Loader extends LoaderFn<Params, SearchParams> = LoaderFn< | |
Params, | |
SearchParams | |
>, | |
> { | |
params?: Params | |
searchParams?: SearchParams | |
loader?: Loader | |
metadata?: | |
| Metadata | |
| (( | |
args: { | |
params: InferParams<Params> | |
searchParams: InferParams<SearchParams> | |
data: InferLoaderData<Loader> | |
}, | |
parent: ResolvingMetadata, | |
) => Promise<Metadata>) | |
component: React.ComponentType<{ | |
params: InferParams<Params> | |
searchParams?: InferParams<SearchParams> | |
data: InferLoaderData<Loader> | |
}> | |
} | |
function parseParams<Schema extends readonly string[] | AnyZodObject>( | |
params: Record<string, string>, | |
schema?: Schema, | |
) { | |
if (schema && 'parse' in schema) { | |
return schema.parse(params) as InferParams<Schema> | |
} | |
return params as InferParams<Schema> | |
} | |
export const createPage = < | |
const Params extends readonly string[] | AnyZodObject, | |
const SearchParams extends readonly string[] | AnyZodObject, | |
Loader extends LoaderFn<Params, SearchParams> = LoaderFn< | |
Params, | |
SearchParams | |
>, | |
>( | |
props: CreatePageProps<Params, SearchParams, Loader>, | |
) => { | |
const { | |
params: paramsSchema, | |
searchParams: searchParamsSchema, | |
component: PageComponent, | |
loader, | |
metadata, | |
} = props | |
// We don't really care about the types here since it's internal | |
async function Page(props: any) { | |
const params = parseParams(props.params, paramsSchema) | |
const searchParams = parseParams(props.searchParams, searchParamsSchema) | |
let pageProps: any = { | |
params, | |
searchParams, | |
} | |
if (typeof loader === 'function') { | |
const data = await loader(pageProps) | |
pageProps = { | |
...pageProps, | |
data, | |
} | |
} | |
return <PageComponent {...pageProps} /> | |
} | |
if (typeof metadata === 'function') { | |
return { | |
generateMetadata: async ( | |
{ | |
params, | |
searchParams, | |
}: { | |
params: InferParams<Params> | |
searchParams: InferParams<SearchParams> | |
}, | |
parent: ResolvingMetadata, | |
) => { | |
const data = | |
typeof loader === 'function' | |
? await loader({ | |
params, | |
searchParams, | |
}) | |
: undefined | |
return metadata( | |
{ | |
params, | |
searchParams, | |
data, | |
}, | |
parent, | |
) | |
}, | |
Page, | |
} | |
} | |
return { | |
metadata, | |
Page, | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
fixed typo