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

Compilation of Zod record with predefined keys

Creating a global variable in Angular that can be accessed by multiple components is a useful technique

Mapping through multiple items in a loop using Javascript

Restricting a Blob to a particular data type

JavaScript's Array.map function failing to return a value

Using Next.JS useRouter to access a dynamic route will result in receiving an empty object as the return value

Configuring the client side to display a 404 response when accessing a page through Strapi CMS

What is the process for extracting the paths of component files from an Angular ngModule file?

Transferring information using TypeScript

Retrieving the component's values when utilizing the `<ng-content>` directive

Using TypeScript to extract types from properties with specific types

JavaScript enables logging on Android Emulator

Having trouble testing firebase messaging on my local server

How to extract words from a dynamic router.pathname in NextJS when only the filename is displayed instead of the full path?

Steps for displaying a new event on a fullCalendar

Is there a way to ensure that in React (Typescript), if a component receives one prop, it must also receive another prop?

Exploring Angular Unit Testing: A Beginner's Guide to Running a Simple Test

Creating mandatory reactive form fields in Angular 11's HTML code based on conditions

What could be causing the elements in my array to appear as undefined?

Is the callback not being triggered in the Stripe webhook? Or could I be overlooking something important?