traintocode

NextJS and Typescript

Next.js automatically detects TypeScript in your project and configures itself accordingly.

TypeScript can strongly type pages, components, and API routes in Next.js. For instance, typing getStaticProps and getServerSideProps ensures that the data fetching functions adhere to Next.js's expected return types and parameters.

Notice how getStaticProps on the right is typed to GetStaticProps<Props>, ensuring the correct page props structure is returned to Next.js.

Exercise

Complete the Props type to add typing to the props.posts array according to the return statement of the Posts page component, removing the TypeScript errors.

Ask me to clarify the challenge or for a hint:

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮