Typing Next.JS components using TypeScript

FunctionComponent

In this article, we’ll talk about typing Next.JS components. We’ll be using this Next.JS application that connects to Reddit API and displays a list of top posts in a given subreddit. Right now, the main component Posts.tsx doesn’t have any type-safety, so we’re going to fix that.

Note: the project already contains TypeScript configured, so if you don’t know how to do that, please read the official guide here, it’s as easy as installing a few dependencies and dropping in some configuration files.

• 

• 

If we write our components as functions, we can use FunctionComponent type from React library. This type takes a generic type argument that describes the shape of the props. Our Posts component takes a subreddit name and a list of posts, so props object is going to look like this:

One thing that makes Next.JS components different is a static getInitialProps function. If we try to assign it to our regular React component, we’ll get a type error: To fix this problem, we need to use a special component type from Next.JS package called NextFunctionComponent. This type extends standard React’s FunctionComponent type with Next.JS-specific static lifecycle methods (well, only one method, really). So now our code will look like this:

Do you have any tips for students?

• Having contacts is the key , you have to develop your network, be friendly and polite;
• Be authentic : we never know who we can fall, sometimes affinities are created and we eventually find ourselves working with the person. My graphics jobs were obtained through contacts who were already working internally. Do
  not minimize the development of your contacts during your studies.
• Be 100% yourself! As much in your designs as in your portfolio, or during interviews. Most employers hire you if they feel that you will bring a good attitude and good energy to the team.
• Everything can be learned! Indesign (the layout software) was my weak point, and yet, I was engaged in editing! Do not be afraid to apply to places outside of your comfort zone , if the employer hires you, it is because he knew how to see your potential and he will take the time to teach you.
• True fact : The most pleasant jobs are not the ones that pay the most (even if publishing is a dream for many, unfortunately the salary is not as good as a job in web or animation that will bring more ).
• Enjoy ! I am still young (25 years old), so I take the opportunity to try different things and aspects of the job! Do the same!

I participate in beautiful projects that are close to my values. I am extremely grateful to be in such a great team!

© Black and white portrait photo credits: Lola Meunier