Fix getNextStaticProps and getNextServerSideProps to allow custom props (#545)

* fix: fixing typings for props so custom props do not result in a TypeScript error

* chore: adding changeset

* fix: lint

Author: wjohnsto

.changeset/polite-mails-rescue.md

@@ -0,0 +1,5 @@
+---
+'@faustjs/next': patch
+---
+
+Typeings for `getNextStaticProps` and `getNextServerSideProps` now allow and protect custom props.

docs/next/guides/ssr-ssg.mdx

@@ -127,3 +127,70 @@ export default function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 ```
+
+## Configuring Custom Page Props And ISR
+
+### Custom Page Props
+
+If you need to send custom props to your page you can do so in the configuration options for both `getNextServerSideProps` and `getNextStaticProps`. Below is some example code demonstrating how to do this.
+
+```tsx {2,5-9,14,26-28}
+import { GetStaticPropsContext } from 'next';
+import { getNextStaticProps } from '@faustjs/next';
+import { client } from 'client';
+
+interface MyPageProps {
+  title: string;
+}
+
+export default function MyPage({ title }: MyPageProps) {
+  const { usePosts } = client;
+
+  return (
+    <>
+      <h2>{title}</h2>
+      {usePosts()?.nodes.map((post) => (
+        <li key={post.id}>{post.title()}</li>
+      ))}
+    </>
+  );
+}
+
+export async function getStaticProps(context: GetStaticPropsContext) {
+  return getNextStaticProps(context, {
+    Page: MyPage,
+    client,
+    props: {
+      title: 'Recent Posts',
+    },
+  });
+}
+```
+
+You might want to use this to send props down based on calls to APIs you make outside of Faust.js.
+
+### Setting Up Incremental Static Regeneration (ISR)
+
+Next.js enables ISR with [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) using a `revalidate` property. By default in Next.js ISR is disabled. Faust.js enables ISR, and by default it sets it to 15 minutes. What this means is your page will be cached for 15 minutes before being regenerated. [Read more on the Next.js site about ISR](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration).
+
+With Faust.js you can configure ISR at both the page level and the global level. At the page level you can pass it along in the configuration options for `getNextStaticProps` as follows:
+
+```ts {4}
+return getNextStaticProps(context, {
+  Page: MyPage,
+  client,
+  revalidate: 60, // 60 seconds
+});
+```
+
+To configure ISR at a global level you can add the following code to your `faust.config`:
+
+```ts title=src/faust.config.js
+import { config as nextConfig } from '@faustjs/next';
+
+nextConfig({
+  revalidate: 60, // 60 seconds
+});
+```
+
+The code above will set the default ISR revalidate time for every page, and can be overridden on each page.

packages/next/src/getProps.tsx

@@ -30,19 +30,18 @@ export const AUTH_CLIENT_CACHE_PROP = '__AUTH_CLIENT_CACHE_PROP';
 
 export interface GetNextServerSidePropsConfig<Props = Record<string, unknown>> {
   client: ReturnType<typeof getClient>;
-  Page?: FunctionComponent | ComponentClass;
+  Page?:
+    | FunctionComponent<Props>
+    | ComponentClass<Props>
+    | ((props: Props) => JSX.Element);
   props?: Props;
   notFound?: boolean;
   redirect?: Redirect;
 }
 
-export interface GetNextStaticPropsConfig<Props = Record<string, unknown>> {
-  client: ReturnType<typeof getClient>;
-  Page?: FunctionComponent | ComponentClass;
-  props?: Props;
+export interface GetNextStaticPropsConfig<Props = Record<string, unknown>>
+  extends GetNextServerSidePropsConfig<Props> {
   revalidate?: number | boolean;
-  notFound?: boolean;
-  redirect?: Redirect;
 }
 
 export interface PageProps<Props> {
@@ -65,7 +64,7 @@ export async function getProps<
     client,
     Page,
     props,
-  }: GetNextServerSidePropsConfig | GetNextStaticPropsConfig,
+  }: GetNextServerSidePropsConfig<Props> | GetNextStaticPropsConfig<Props>,
 ): Promise<PageProps<Props>> {
   let cacheSnapshot: string | undefined;
   let authSnapshot: string | undefined;
@@ -82,7 +81,7 @@ export async function getProps<
             value={{ query: { ...context.params } } as any}>
             <HeadlessContext.Provider value={{ client }}>
               {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-              <Page {...props} />
+              <Page {...(props as Props)} />
             </HeadlessContext.Provider>
           </RouterContext.Provider>,
         );
@@ -210,7 +209,7 @@ export async function is404<
  */
 export async function getNextServerSideProps<Props>(
   context: GetServerSidePropsContext,
-  cfg: GetNextServerSidePropsConfig,
+  cfg: GetNextServerSidePropsConfig<Props>,
 ): Promise<GetServerSidePropsResult<Props>> {
   const { notFound, redirect } = cfg;
 
@@ -238,7 +237,7 @@ export async function getNextServerSideProps<Props>(
  */
 export async function getNextStaticProps<Props>(
   context: GetStaticPropsContext,
-  cfg: GetNextStaticPropsConfig,
+  cfg: GetNextStaticPropsConfig<Props>,
 ): Promise<GetStaticPropsResult<Props>> {
   const { notFound, redirect, revalidate } = cfg;
   const nextConfig = config();