How to make Next.js getStaticProps work with typescript

drywall_dan

I am using Next.js with typescript feature enabled Trying to use getStaticProps as described here https://nextjs.org/docs/basic-features/typescript With GetStaticProps type export const getStaticProps: GetStaticProps = () => { return { props: { host: process.env.DB_HOST.toString(), }, } } I am getting error like this Type '() => { props: { host: string; }; }' is not assignable to type 'GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery>'....

Originally asked by asmodianis on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Hi Ran in to your issue but none of the answers above helped me. I had a quick read in the documentation: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation and found out that you the correct type for your getStaticProps should be: import { GetStaticProps } from 'next' export const getStaticProps: GetStaticProps = async (context) => { // ... } Then in your component: import { InferGetStaticPropsType } from 'next' import { GetStaticProps } from 'next' type Post = { author: string content: string } export const getStaticProps: GetStaticProps = async (context) => { const res = await fetch('https://.../posts') const posts: Post[] = await res.json() return {...

Full answer by Bon Andre Opina: https://stackoverflow.stackexchange.com/a/69549672 (CC BY-SA 4.0).

Need it done for your business? UphillTech.