Generic Type for GetStaticPaths

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>
+}