Tips for accurately defining prop types in next.js when utilizing typescript?

Question

Tips for accurately defining prop types in next.js when utilizing typescript?

Here is the content of my index.tsx file:

    import type { NextPage } from "next";
    
    type AppProps = {
      articles: {
        userId: number;
        id: number;
        title: string;
        body: string;
      };
    };
    
    const Home: NextPage = ({articles}:AppProps) => {
      return (
        <div>
          <h1>Welcome to {articles.title}</h1>
        </div>
      );
    };

    export const getStaticProps = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    const articles = await res.json();
    
      return {
        props: { articles },
      };
    };
 export default Home;

Although the code renders, I encountered an error in my Home component. The error message displayed is as follows:

Type '({ articles }: AppProps) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
  Type '({ articles }: AppProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '({ articles }: AppProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'articles' is missing in type '{}' but required in type 'AppProps'.

I am unsure what I might be doing incorrectly. Any assistance would be greatly appreciated.

typescript next.js

Answer 1

Answer №1

NextPage is built upon NextComponentType, which includes default values for initial page data (props) in a type parameter list:

// When no type arguments are passed, `props` defaults to type `{}`
const Home: NextPage = () => { /*...*/ }

When providing props to a NextPage component, you must also specify your type as an argument.

An error will occur in TypeScript if articles is used on type {}:

// The `AppProps` annotation assigns types to the function argument itself,
// but without type arguments in `NextPage`, `props` remains type `{}`
const Home: NextPage = ({ articles }: AppProps) => { /*...*/ }

To inform NextPage about the type of props, include AppProps as a type argument like this:

// Type annotation can be omitted from the function argument since `AppProps`
// will be inferred
const Home: NextPage<AppProps> = ({ articles }) => { /*...*/ }

Answer 2

NextPage is built upon NextComponentType, which includes default values for initial page data (props) in a type parameter list:

// When no type arguments are passed, `props` defaults to type `{}`
const Home: NextPage = () => { /*...*/ }

When providing props to a NextPage component, you must also specify your type as an argument.

An error will occur in TypeScript if articles is used on type {}:

// The `AppProps` annotation assigns types to the function argument itself,
// but without type arguments in `NextPage`, `props` remains type `{}`
const Home: NextPage = ({ articles }: AppProps) => { /*...*/ }

To inform NextPage about the type of props, include AppProps as a type argument like this:

// Type annotation can be omitted from the function argument since `AppProps`
// will be inferred
const Home: NextPage<AppProps> = ({ articles }) => { /*...*/ }

Answer 3

Answer №2

You may utilize either InferGetStaticPropsType or InferGetServerSidePropsType based on your requirements.

Here's an illustration:

    import type { InferGetStaticPropsType } from "next";
    
    type Post = {
      userId: number;
      id: number;
      title: string;
      body: string;
    };
    
    const HomePage = ({posts}: InferGetStaticPropsType<typeof getStaticProps>) => {
      return (
        <section>
          <h1>Greetings! {posts.title}</h1>
        </section>
      );
    };

    export const getStaticProps = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    const posts: Post[] = await response.json();
    
      return {
        props: { posts },
      };
    };
 export default HomePage;

Answer 4

You may utilize either InferGetStaticPropsType or InferGetServerSidePropsType based on your requirements.

Here's an illustration:

    import type { InferGetStaticPropsType } from "next";
    
    type Post = {
      userId: number;
      id: number;
      title: string;
      body: string;
    };
    
    const HomePage = ({posts}: InferGetStaticPropsType<typeof getStaticProps>) => {
      return (
        <section>
          <h1>Greetings! {posts.title}</h1>
        </section>
      );
    };

    export const getStaticProps = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    const posts: Post[] = await response.json();
    
      return {
        props: { posts },
      };
    };
 export default HomePage;

Tips for accurately defining prop types in next.js when utilizing typescript?

Answer №1

Answer №2

Similar questions

Uploading Files with Typescript Promises

Error encountered: Imagemagick throwing a typeerror due to the inability to parse properties of undefined while trying to read 'convert

What is the purpose of the .default() method being added to the class constructor in transpiled Typescript code

TypeB should utilize InterfaceA for best practice

Using Promise<void> instead of Promise<any> is the preferred approach

The successful operation of 'Ionic serve --lab' may involve the need to manually save the app.module

Is there a way to set the submitted variable to true when the form group is submitted, then revert it to false when the user makes changes to the form?

Unable to assign user roles in next-auth due to the absence of matching modifiers for user

What could be the reason for receiving the error "client.getVersion is not a function" while using Braintree (Braintree-Web)?

Is it better to define a function within useEffect or externally?

How can I upload multiple images in one request using Typescript?

Guide on how to update an array within typed angular reactive forms

Why do optional values of objects remain optional when being checked in an if statement in Typescript?

Testing the mirkoORM entities at a unit level

Vue: Defining typed props interface including optional properties

Error: Unable to locate the type definition file for the '@babel' package

Dealing with mistakes in an Angular service

Best .htaccess configuration for optimizing Next.js static site generation

When transitioning the Next application to Typescript, errors are displayed with JSX, but it functions correctly in the browser

Executing the callback function