getStaticProps error with Typescript, Next js

Question

So I have this code:

export const getStaticProps: GetStaticProps<HomeProps> = async () => {
    const firstCategory = 0;
    const { data }: AxiosResponse<MenuItem[]> = await axios.post(
        process.env.NEXT_PUBLIC_DOMAIN + '/api/top-page/find',
        {
            firstCategory,
        }
    );
    return {
        props: {
            data,
            firstCategory,
        },
    };
};

interface HomeProps extends Record<string, unknown> {
    menu: MenuItem[];
    firstCategory: number;
}

But I had an error:

Type '() => Promise<{ props: { data: MenuItem[]; firstCategory: number; }; }>' is not assignable to type 'GetStaticProps<HomeProps, ParsedUrlQuery>'.
  Type 'Promise<{ props: { data: MenuItem[]; firstCategory: number; }; }>' is not assignable to type 'GetStaticPropsResult<HomeProps> | Promise<GetStaticPropsResult<HomeProps>>'.
    Type 'Promise<{ props: { data: MenuItem[]; firstCategory: number; }; }>' is not assignable to type 'Promise<GetStaticPropsResult<HomeProps>>'.
      Type '{ props: { data: MenuItem[]; firstCategory: number; }; }' is not assignable to type 'GetStaticPropsResult<HomeProps>'.
        Type '{ props: { data: MenuItem[]; firstCategory: number; }; }' is not assignable to type '{ props: HomeProps; revalidate?: number | boolean | undefined; }'.
          Types of property 'props' are incompatible.
            Property 'menu' is missing in type '{ data: MenuItem[]; firstCategory: number; }' but required in type 'HomeProps'.ts(2322)

And I really don't know what is the ParsedUrlQuery. I tried to import it(import { ParsedUrlQuery } from 'querystring';). But it doesn't help.

What should I do?

Nicholas Tower · Accepted Answer · 2021-10-11 17:29:18Z

2

HomeProps contains menu: MenuItem[], but then you're trying to return data: MenuItem[]. If the type is correct, then update the code to return this:

return {
  props: {
    menu: data,
    firstCategory,
  },
};

Or if the code is correct but the type is wrong, update the type:

interface HomeProps extends Record<string, unknown> {
    data: MenuItem[];
    firstCategory: number;
}

answered Oct 11, 2021 at 17:29

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bboddya · Accepted Answer · 2022-07-26 14:00:26Z

0

replace process.env.NEXT_PUBLIC_DOMAIN with the domain itself

const { data }: AxiosResponse<MenuItem[]> = await axios.post('https://your domain/api/top-page/find',
    {
        firstCategory,
    }
);

The problem is that the response does not come with the variable process.env.NEXT_PUBLIC_DOMAIN

answered Jul 26, 2022 at 14:00

bboddya

1

2 Comments

Goutham J.M Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Nikolai Kiselev Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

getStaticProps error with Typescript, Next js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related