Generic Type for GetStaticPaths (#11430)

* Generic Type for GetStaticPaths

* Add generic typing for params to GSSP and GSP too

* Added basic tests

Co-authored-by: Luis Alvarez <[email protected]>

packages/next/types/index.d.ts

@@ -66,27 +66,31 @@ export {
 }
 
 export type GetStaticProps<
-  P extends { [key: string]: any } = { [key: string]: any }
+  P extends { [key: string]: any } = { [key: string]: any },
+  Q extends ParsedUrlQuery = ParsedUrlQuery
 > = (ctx: {
-  params?: ParsedUrlQuery
+  params?: Q
   preview?: boolean
   previewData?: any
 }) => Promise<{
   props: P
   revalidate?: number | boolean
 }>
 
-export type GetStaticPaths = () => Promise<{
-  paths: Array<string | { params: ParsedUrlQuery }>
+export type GetStaticPaths<
+  P extends ParsedUrlQuery = ParsedUrlQuery
+> = () => Promise<{
+  paths: Array<string | { params: P }>
   fallback: boolean
 }>
 
 export type GetServerSideProps<
-  P extends { [key: string]: any } = { [key: string]: any }
+  P extends { [key: string]: any } = { [key: string]: any },
+  Q extends ParsedUrlQuery = ParsedUrlQuery
 > = (context: {
   req: IncomingMessage
   res: ServerResponse
-  params?: ParsedUrlQuery
+  params?: Q
   query: ParsedUrlQuery
   preview?: boolean
   previewData?: any

test/integration/typescript/pages/ssg/[slug].tsx

@@ -0,0 +1,29 @@
+import { GetStaticPaths, GetStaticProps } from 'next'
+
+type Params = {
+  slug: string
+}
+
+type Props = {
+  data: string
+}
+
+export const getStaticPaths: GetStaticPaths<Params> = async () => {
+  return {
+    paths: [{ params: { slug: 'test' } }],
+    fallback: false,
+  }
+}
+
+export const getStaticProps: GetStaticProps<Props, Params> = async ({
+  params,
+}) => {
+  return {
+    props: { data: params!.slug },
+    revalidate: false,
+  }
+}
+
+export default function Page({ data }: Props) {
+  return <h1>{data}</h1>
+}

test/integration/typescript/pages/ssr/[slug].tsx

@@ -0,0 +1,21 @@
+import { GetServerSideProps } from 'next'
+
+type Params = {
+  slug: string
+}
+
+type Props = {
+  data: string
+}
+
+export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
+  params,
+}) => {
+  return {
+    props: { data: params!.slug },
+  }
+}
+
+export default function Page({ data }: Props) {
+  return <h1>{data}</h1>
+}