Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

properly typing props in a Next.js page

I have a fairly straight forward SSR-generated Next.js page. My typing is not correct somewhere along the path here, and the linter is complaining.

export interface ProposalTag {
  id: number;
  name: string;
  hex: string;
  color: string;
}
export async function getProposalTags(): Promise<ProposalTag[]> {
  // query for response

  const tags = response?.data?.proposal_tags.map((tag: ProposalTag) => {
    return {
      id: tag.id,
      name: tag.name,
      hex: tag.hex,
      color: tag.color,
    };
  });

  return tags;
}



export const getServerSideProps: GetServerSideProps = async context => {
  const proposalTags: ProposalTag[] = await getProposalTags();

  return {
    props: {
      proposalTags,
    },
  };
};

const Proposal: NextPage = ({ proposalTags }) => { /* code */ }

In this particular case, the linter is complaining with the following:

Property 'proposalTags' does not exist on type '{}'

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I’m not entirely sure what I can do to please the typescript interpreter/linter here

>Solution :

NextPage is a generic type with optional generic parameters, and the first one is the prop types for the component:

const Proposal: NextPage<{
    proposalTags: ProposalTag[];
}> = ({ proposalTags }) => { /* code */ }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading