InferGetStaticPropsType always returns { [key: string]: any; }

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

17.2

What browser are you using?

Chrome latest

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

See below:

import { GetStaticProps, InferGetStaticPropsType, NextPage } from 'next'
import { pick } from 'contentlayer/client'

import { allArticles } from '.contentlayer/data'

const Home: NextPage = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div>hello world</div>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  const posts = allArticles.map((post) =>
    pick(post, ['slug', 'title', 'summary', 'date'])
  )

  return { props: { posts: posts } }
}

export default Home

Expected Behavior

Inside the getStaticProps function, I am able to correctly use the type of posts

const posts: ConvertPick<{
    slug: string;
    title: string;
    summary: string;
    date: string;
}>[]

But inside of the main function, that doesn’t work.

To Reproduce

// tsconfig.json
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

// package.json excerpt
"dependencies": {
    "contentlayer": "0.0.33",
    "next": "12.0.7",
    "next-contentlayer": "0.0.33",
    "next-images": "^1.8.4",
    "next-plausible": "^3.1.4",
    "next-themes": "0.0.15",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/node": "16.11.12",
    "@types/react": "17.0.37",
    "@typescript-eslint/eslint-plugin": "5.6.0",
    "@typescript-eslint/parser": "5.6.0",
    "eslint": "8.4.1",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-mdx": "^1.16.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-simple-import-sort": "7.0.0",
    "typescript": "4.5.3"
  }

[balazsorban44]

This is because you added GetStaticProps on line 12, without the generic passed to it. The default of prop for that type is { [key: string]: any; }.

See the docs: https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getstaticprops

You want to let the return value be inferrable. If you need to type the params, you can use GetStaticPropsContext

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.