getStaticProps not working well with TypeScript

[deadcoder0904]

So I have this code:

type NextGetStaticPropsCtx = {
	params?: {
		slug: string
	}
	preview?: boolean
	previewDate?: any
}

export const getStaticProps: GetStaticProps = async (context: NextGetStaticPropsCtx) => {
	const {
		params: { slug },
	} = context
    ...
}

But I get 2 errors (red-squiggly lines):

1st one on getStaticProps 👇

Type '(context: NextGetStaticPropsCtx) => Promise<{ props: { mdxSource: any; frontMatter: { [key: string]: any; }; }; }>' is not assignable to type 'GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery>'.
Types of parameters 'context' and 'context' are incompatible.
Type 'GetStaticPropsContext' is not assignable to type 'NextGetStaticPropsCtx'.
Types of property 'params' are incompatible.
Type 'ParsedUrlQuery | undefined' is not assignable to type '{ slug: string; } | undefined'.
Property 'slug' is missing in type 'ParsedUrlQuery' but required in type '{ slug: string; }'.ts(2322)

2nd one on slug 👇

Property 'slug' does not exist on type '{ slug: string; } | undefined'.ts(2339)

How do I solve it?

[deadcoder0904]

Not sure if this is the correct way to do it but I found https://github.com/vercel/next.js/blob/master/examples/blog-starter-typescript/pages/posts/%5Bslug%5D.tsx#L58-L62 just now & did the following & it does not throw any errors now:

type Params = {
	params: {
		slug: string
	}
}

export const getStaticProps = async ({ params }: Params) => {
	const { slug } = params
    ...
}

[janluke]

At this point, I think the answer I wrote below is the most correct one. People seem to agree based on the number of likes. Consider accepting that instead of this.

[devniel]

You can also use get GetStaticPropsResult type.

export function getStaticProps(context: GetStaticPropsContext): GetStaticPropsResult<Params> {
  // return { props : {} } as GetStaticPropsResult<Params>;
 return { props: {} };
}

[poncianodiego]

I get:

Type '(context: GetStaticPropsContext ) => Promise ' has no properties in common with type 'GetStaticPropsContext '.

[janluke]

I'm new to next.js and TypeScript (in fact, I ended up here after following the tutorial) but I did as following:

import { ParsedUrlQuery } from 'querystring';

type Props = {
   post: PostData
}

interface Params extends ParsedUrlQuery {
   id: string,
}

export const getStaticProps: GetStaticProps<Props, Params> = async (context) => {
   const params = context.params!       // ! is a non-null assertion 
   const post = await getPost(params.id)
   return {
      props: { post }
   }
}

Each field of context is declared as optional, so you need to check for null or use a type assertion like I did for params.

EDIT:

• added import of ParsedUrlQuery
• changed 1st line of getStaticProps: use the "non-null assertion operator" ! instead of as Param to cast params, as suggested in the first comment (which is slightly different, check it out).

[Kobold]

This is the right answer. Thanks!

[ghost]

thanks, it is one more example, which work on me:

type Props = {
datwa: Object;
}

export const getStaticProps: GetStaticProps = async (context) => {
return {
props: { datwa: context }
}
}

[Lastor-Chen]

The solution has some problem in props definition. That can't check other shouldn't exist content.

Refer this answer, it's better in props definition.
#16522 (comment)

[RobertaMelo]

Thaaaaaaaaaaaank you!

[yourcodesnotworking]

Finally, realized that nextjs documentation is incomplete and wrong. That's why so many people search around took so many time.

[GorvGoyl]

This worked without any linting error:

export const getStaticProps: GetStaticProps = async (context) => {
  const { slug } = context.params;
  const postContent = await getPostdata(slug);
//...
};

[Pravasith]

export const getStaticProps: GetStaticProps = async ({ params }) => {

let fetchedData: Props | {} = {}

if(params){
    const { slug } = params
    //...fetch data stuff...
}



// Pass post data to the page via props
return {
    props : {
        fetchedData
    }
}
}

[GorvGoyl]

I also have strict mode enabled and yet linter is not showing any error. yo can checkout the working repo and let me know if I missed something obvious here https://github.com/GorvGoyl/Personal-Site-Gourav.io/tree/mdx-remote

[janluke]

The if is of course an alternative to the cast (the cast is valid if you are 100% sure that params won't be undefined).

The unstructuring works because params is of type ParserUrlQuery (when not undefined), which is defined as NodeJS.Dict<string | string[]>. This means params["something"] will always be statically valid; the same is not true for params.something. The "problem" with your code is that slug will be of type string | string[] | undefined, not string.

[janluke]

So my suggestion, is to use the code my answer (possibly using a if (params) instead of a cast, but I think params will always be defined in that context), which I think it's pretty good. It's a little verbose, but very clear and explicit about what your Props and Params are. A VS Code snippet would make things very quick.

[RobertaMelo]

Yesss, this work for me too! Thank you

[ernestcdc]

This is how I managed to make it work with strict: true enabled:

interface Params extends ParsedUrlQuery {
  id: string,
}

export const getStaticProps: GetStaticProps = async (context) => {
  const params = context.params as Params
  const postData = await getPostData(params.id)

  return {
    props: {
      postData
    }
  }
}

[valdeniomarinho]

Thank you so much!!!!!!

[philsmithies]

Yes ! Thanks

[GHesericsu]

Also don't forget to import ParsedUrlQuery to use the above solutions like I did.

import { ParsedUrlQuery } from 'querystring';

[david-zacharias]

Based on the very helful answser this my version also working with strict: true

import { ParsedUrlQuery } from 'querystring'
import { GetStaticPaths, GetStaticProps } from 'next'

// getPost(slug: string): Post | undefined
// getAllPostSlugs(): string[]

interface Params extends ParsedUrlQuery {
  slug: string
}

type Props = {
  post: NonNullable<ReturnType<typeof getPost>>
}

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const paths = getAllPostSlugs().map(slug => ({ params: { slug } }))

  return {
    paths,
    fallback: false
  }
}
export const getStaticProps: GetStaticProps<Props, Params> = async ({ params }) => {
  const post = getPost(String(params?.slug))

  return post ? { props: { post } } : { notFound: true }
}

const Post: NextPage<Props> = ({ post }) => ...

Updated based on Feedback from @rokinsky

[rokinsky]

const Post: NextPage<Props> = ({ post }) => ...

Would be much better

[GHesericsu]

This is mine that works for me.

import { GetStaticProps, GetStaticPaths } from 'next';
import { ParsedUrlQuery } from 'querystring';

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await fetchEventSlugs();
  const paths = response.map((event: { slug: string }) => (
    {
      params: {
        slug: event.slug,
      },
    }
  ));
  return {
    paths,
    fallback: false,
  };
};

type Props = {
  event: {
    slug: string
  }
};

interface Params extends ParsedUrlQuery {
  slug: string,
}

export const getStaticProps: GetStaticProps<Props, Params> = async (context) => {
  const { slug } = context.params as Params;
  const response = await fetchEventDetails(slug);

  return {
    props: {
      event: response,
    },
  };
};

[lawrence-witt]

[lawrence-witt]

Deleted as I've just realised prop-inference no longer works with that method.

[janluke]

Are you sure that non-null assertions are forbidden in strict mode? In fact, I didn't try that myself, while I'm sure as Param works in strict mode.

[lawrence-witt]

as Param (type-casting) does work but non-null should throw a warning.

[janluke]

I don't get any error/warning here: https://www.typescriptlang.org/play?strict=true#code/GYVwdgxgLglg9mABMAFADwPwC5FhAWwCMBTAJwEpEBvAKEUQBtipEBPRAXkTQEIBuOolLMQpJOwBUiAEwCAvjRqoAjAAZyQA

[lawrence-witt]

Ok my bad, it's actually eslint via the recommended @typescript-eslint rules which throws the warning, not TypeScript itself.

[lawrence-witt]

A marginally better type for getStaticProps can be constructed in this scenario. I originally deleted this suggestion as it does not throw an error for prop values in the returned object which do not match the prop interface, however after some more testing it appears that the original GetStaticProps does not do this either.

I really tried to construct one which does but was having a hard time getting the props to be inferred correctly so unless someone can show me the light, this looks like the best that can be done for now. Since a ParsedUrlQuery interface should be required in this scenario (you only want to make params required when passed them by getStaticPaths), I think it also makes sense to place the params first and without default in the type signature so that this is reflected:

import { GetStaticPropsResult, GetStaticPropsContext } from "next";
import { ParsedUrlQuery } from "querystring";

type PickRequired<T extends { [key: string]: any }, Keys extends keyof T> =
  Omit<T, Keys> & { [K in Keys]-?: T[K] };

interface GetStaticPropsWithPath<
  Q extends ParsedUrlQuery,
  P extends { [key: string]: any } = { [key: string]: any },
> {
  (context: PickRequired<GetStaticPropsContext<Q>, "params">): Promise<
    GetStaticPropsResult<P>
  >;
}

PickRequired is in my global.d.ts file as it is quite a useful utility type, alongside PickPartial which is identical except [K in Keys]-? reads [K in Keys]?.

The getStaticProps function can now be typed with the params property set as required, with no need to use type casting or non-null assertion:

interface PageParams extends ParsedUrlQuery {
  slug: string;
}

interface PageProps {
  title: string;
  slug: string;
}

export const getStaticProps: GetStaticPropsWithPath<PageParams, PageProps> =
  async (context) => {
    return {
      props: {
        title: "My Page",
        slug: context.params.slug, // params is now available by default
        wrong: 32, // this will not throw an error, just like the original GetStaticProps
      },
    };
  };

---

However, if you would like to enforce props returned by getStaticProps, then the same logic can be used to type the context and return type directly:

export const getStaticProps = async (
  context: PickRequired<GetStaticPropsContext<PageParams>, "params">,
): Promise<GetStaticPropsResult<PageProps>> => {
  return {
    props: {
      title: "My Page Title",
      slug: context.params.slug, // params is now available by default
      wrong: 42, // this will now throw an error
    },
  };
};

[janluke]

The only real benefit of this is making happy eslint by tricking it, because semantically this is equivalent to a non-null assertion.

[lawrence-witt]

This was frustrating me so I spent a while experimenting and decided on a satisfactory type for this scenario. I think declaring new types within the bounds of the type system is generally more useful/meaningful than negating existing ones, and yes, it does make the linter happier. The more cumbersome approach also has the added benefit of enforcing the returned prop object with no extraneous props allowed.

[janluke]

But, technically, you are working around TypeScript as well: your GetStaticPropsWithPath type is not compatible with GetStaticProps, which is the type expected by Next.js, because your function type takes a narrower type in input (and function types are contravariant wrt arguments). So your solution is in all respects equivalent to a non-null type assertion. You are casting, just without using the usual notation.

I've not dug into it but I think the reason it works is because TS cannot statically check that your getStaticProps is of type GetStaticProps, the type expected by Next.js. But by using another type you are technically moving outside of Next.js "contract" and of the typing system. In pratice, this is not a problem, in the same sense that casting is not a problem, because we know that params will be defined.

Let's say my hypothesis is right and tomorrow Next.js starts to check the type of getStaticProps (I've never looked into Next.js, so I've no idea if this can even happen). Then your solution would give an error, while casting wouldn't. In this sense, you're moving outside the boundaries of the typing system even more of who is using casting.

I may be wrong though.

[lawrence-witt]

It doesn't need to be compatible with GetStaticProps, it is describing a different situation to that type. That's really the key to this issue - why are we making params required in the first place, what are we trying to say about the way this function is being called? Asserting that params is one way or the other is muddying the original type which has params optional for a reason - it does not know whether getStaticProps is being called after getStaticPaths. This type describes a situation where we know it definitely will.

This really isn't casting - casting is used when the developer "knows better" than the type system as it stands, but we are not letting it stand, we're extending it with a more descriptive type. Most places that I see casting in the wild are resolved by following this exact same process.

Casting and NN assertion is a problem from a code legibility point of view, not a compilation point of view. From a glance, it is not obvious why we should be asserting this type, whereas GetStaticPropsWithPath describes the reason precisely. NN assertions in particular can be quite hard to spot. I'm using all the Next.js types here and the function signature is almost identical, I don't think its fair to say this moves outside the contract. I've done much more to get around incomplete type files in the past.

Furthermore, Next.js does not care what the type of getStaticProps is, and there is no way for it to enforce its type as things currently stand (i.e. calling declaring it in the top level scope of a page component file). Typescript compiles these files before Next.js gets to see them, there is nothing left from the type system when they are ready to use. Imagining some hypothetical situation where Next releases a plugin or build tool to enforce these types (not something I've ever heard of personally) is not a good reason to use less descriptive types in the here and now.

[janluke]

Let me clarify what I meant.

GetStaticProps is exposed by Next as the type of the user-defined function getStaticProps. It is a contract. The different situation you talk about should be described by Next. Now, we can't extend Next's contract. But we can stand and say we know better. We can do it with casting or by defining a formally incompatible type. Doing it is absolutely fine, but don't delude yourself we are doing something fundamentally different or "more inside the typing system" than casting. Casting is totally legit in this case. There's no benefit from a typing perspective in the alternative solution. In both cases, we are "forcing" something that is different from the "official" types: we are effectively "asserting" something. That was my point.

It's just to to reinforce my point that I made you notice that you can use your formally incompatible type only because of a blind spot in the type checking. I know that Next currently, and probably in the future, won't check the type (which is actually a problem on itself).

Now, you say your solution is more descriptive and readable but I guarantee you that it's subjective. Personally:

• GetStaticPropsWithPath sounds unclear, if not misleading, to me; I don't think it clearly describes the situation or why it is being used;
• I'm writing let params = ctx.params anyway for a personal preference; adding ! is not a big deal and what it does is extremely clear to me.

In conclusion, both solutions are fine and it's a matter of preference.

I want to thank you for your solution and suggest to consider proposing your type to Next.js devs.
Regards.

[Kobold]

@janluke's answer is wholesome and I think the right approach. Here's a version written out a bit further:

import type { GetStaticPaths, GetStaticProps } from 'next';
import type { ParsedUrlQuery } from 'querystring';

interface PageProps {
  pageData: string;
}

export default function Page({ pageData }: PageProps): JSX.Element {
  return <div>{pageData}</div>;
}

interface StaticPathParams extends ParsedUrlQuery {
  slug: string;
}

export const getStaticProps: GetStaticProps<PageProps, StaticPathParams> = async (context) => {
  // The params being optional is super annoying.
  const slug = context.params?.slug;
  const pageData = await getPageData(slug);
  return {
    props: {
      pageData,
    },
  };
};

export const getStaticPaths: GetStaticPaths<StaticPathParams> = async () => {
  return {
    paths: [...generate paths here...].map((slug) => ({
      params: { slug },
    })),
    fallback: false,
  };
};

A couple of reasons for this approach:

1. No casts.
2. It actually links into Next's type declarations, so if Next changes something important this will flag the error.
3. It types the data across the flow of calls, from getStaticPaths -> getStaticProps -> actual props passed into the page component. The shared types across each step will keep those steps from getting get out of sync.

[lucaoskaique]

I'm still getting error from getStaticProps

Type '(context: GetStaticPropsContext) => Promise<{ props: ImagePost | undefined; }>' is not assignable
to type 'GetStaticProps<PageProps, StaticPathParams>'.
Type 'Promise<{ props: ImagePost | undefined; }>' is not assignable to type 'GetStaticPropsResult | Promise<GetStaticPropsResult>'.
Type 'Promise<{ props: ImagePost | undefined; }>' is not assignable to type 'Promise<GetStaticPropsResult>'.
Type '{ props: ImagePost | undefined; }' is not assignable to type 'GetStaticPropsResult'.
Type '{ props: ImagePost | undefined; }' is not assignable to type '{ props: PageProps; revalidate?: number | boolean | undefined; }'.
Types of property 'props' are incompatible.
Type 'ImagePost | undefined' is not assignable to type 'PageProps'.
Type 'undefined' is not assignable to type 'PageProps'.ts(2322)

`

export interface ImagePost {
    title: string;
    slug: string;
    date: string;
    path: string;
}

export const imagesPost: ImagePost[] = [
    {
        title: 'Colours-1',
        slug: 'my-first',
        date: new Date().toString(),
        path: '/images/Colours/Colours-1.jpg'
    },
    {
        title: 'Colours-2',
        slug: 'my-second',
        date: new Date().toString(),
        path: '/images/Colours/Colours-2.jpg'
    },
    {
        title: 'Colours-3',
        slug: 'my-third',
        date: new Date().toString(),
        path: '/images/Colours/Colours-3.jpg'
    },
]

import { GetStaticPaths, GetStaticProps } from "next";
import Head from "next/head";
import Image from "next/image";
import { ImagePost, imagesPost } from "../../lib/data";
import { ParsedUrlQuery } from "querystring";

export default function ImagePage({ title, slug, date, path }: ImagePost) {
  return (
    <div>
      <Head>
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Image
          src={path}
          height={400}
          width={400}
          alt="Picture of Album Colors"
        />
        <h1>{path}</h1>
        <h1>{date}</h1>
        <h1>{slug}</h1>
      </main>
    </div>
  );
}

interface PageProps {
  pageData: string;
}

interface StaticPathParams extends ParsedUrlQuery {
  slug: string;
}

export const getStaticProps: GetStaticProps<PageProps, StaticPathParams> = async (
  context
) => {
  console.log("hi!", context);
  const params = context.params as StaticPathParams;
  console.log("hi!", params);
  return {
    props: imagesPost.find((item) => item.slug === params.slug),    
  };
};

export const getStaticPaths: GetStaticPaths<StaticPathParams> = async () => {
  return {
    paths: imagesPost.map((item: { slug: string }) => ({
      params: {
        slug: item.slug,
      },
    })),
    fallback: false,
  };
  //   console.log(JSON.stringify(foo, null, ' '));
  //   return foo;
};

`

[cevaris]

return {
    props: imagesPost.find((item) => item.slug === params.slug),    
  };

best guess is this line here is returning a ImagePost or undefined type.

but you require an ImagePost in the props.

export default function ImagePage({ title, slug, date, path }: ImagePost) {

So you can either update getStaticProps to always return a ImagePost, or update ImagePage to handle undefined.

[skworden]

Strict mode
TS 4.4.3
Next 11.1.2

I didn't need to extend or manually assign types.

import { GetStaticPaths, GetStaticProps } from 'next';

type Params = { slug: string }
type Props = {  page?: { id: string }; }

export const getStaticProps: GetStaticProps<Props, Params> = async ({ params }) => {
  if (!params || !params.slug ) return { notFound: true };
  return { props: { page: { } } };
};

export const getStaticPaths: GetStaticPaths<Params> = () => {
 return ({ paths: [ ], fallback: false });
};

[andrekrosby92]

Simple way if you want to use function declarations:

import type { GetStaticPropsContext } from 'next'

export async function getStaticProps(context: GetStaticPropsContext<{ slug: string }>) {
  const res = await someQueryFunction(API_URL, { slug: context.params?.slug })

  return {
    props: { res },
  }
}

[Webbrother]

It looks like next.js typings are incorrect.
What is the usecase when page pages/my-page/[id].txs will have undefined value of params?

[Toinouze]

Typings could be better, I agree.

[o-az]

Note: please don't use my answer, it's may be wrong and definitely not tested. I'm leaving it here so I can find it when I revisit this for the 5th time in a year. That being said, feel free to use it:

import * as React from 'react';
import type {
  NextPage,
  GetStaticPaths,
  GetStaticPathsContext,
  GetStaticPathsResult,
  GetStaticProps,
  GetStaticPropsResult,
  GetStaticPropsContext,
  InferGetStaticPropsType,
} from 'next';
import { ParsedUrlQuery } from 'querystring';

type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

const getPosts = async (id: string): Promise<Post[]> => {
  const posts = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`);
  return await posts.json();
};

interface Params extends ParsedUrlQuery {
  id: string;
}

export const getStaticProps: GetStaticProps = async (
  context: GetStaticPropsContext
): Promise<GetStaticPropsResult<{ posts: Post[] }>> => {
  const { params } = context as { params: Params };
  const { id } = params;

  const posts = await getPosts(id);
  if (!posts) return { notFound: true };

  return { props: { posts }, revalidate: 1 };
};

export const getStaticPaths: GetStaticPaths = async (
  // You don't need context unless you want to use locale and defaultLocale
  context: GetStaticPathsContext
): Promise<GetStaticPathsResult> => {
  const ids = ['1', '2', '3'];
  const paths = ids.map(id => ({ params: { id } }));

  return { paths, fallback: false };
};

type PostProps = InferGetStaticPropsType<typeof getStaticProps>;

const Post: NextPage = ({ posts }: PostProps) => {
  return (
    <main>
      {posts.map((post: Post) => (
        <div key={post.id}>
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        </div>
      ))}
    </main>
  );
};

export default Post;

[tomsoderlund]

This was tricky, but this was what I got to work in Next.js 12.1.6. I don’t understand why previous examples above get away without using Promise<...> in the return values.

import React from 'react'
import type { GetStaticPropsContext, GetStaticPropsResult, GetStaticPathsContext, GetStaticPathsResult } from 'next'
import { ParsedUrlQuery } from 'querystring'

interface MyPageParams extends ParsedUrlQuery {
  slug: string
}

interface MyPageProps {
  title: string
  slug?: string | null
}

function MyPage ({ title, slug }: MyPageProps): React.ReactElement {
  return (
    ...
  )
}
export default MyPage

export async function getStaticProps (context: GetStaticPropsContext<MyPageParams>): Promise<GetStaticPropsResult<MyPageProps>> {
  const slug = context.params?.slug ?? null
  return {
    props: {
      title: 'My page',
      slug
    },
    revalidate: 30 * 60 // 30 minutes
  }
}

export async function getStaticPaths (context: GetStaticPathsContext): Promise<GetStaticPathsResult<MyPageParams>> {
  const locales = context.locales ?? ['en']
  return {
    paths: [
      // { params: { slug: 'value' } }
    ],
    fallback: true // false -> 404, true: Next.js tries to generate page
  }
}

[badalsaibo]

Because most of the answers are using arrow functions instead of normal function declarations. I prefer there were more examples including function declaration approach too!

[Amyx000]

Simply use optional chaining and it works.

export const getStaticProps : GetStaticProps = async ( context ) =>  {

 console.log ( context.params?.slug )

}

[AnmolPandita-sudo]

Please help i am getting the error on getStaticProps