Quick Guide to Next.js with TypeScript — Part 2

In part 1 we covered setting up newNext.js app with TypeScript with a basicNext.js page and a component.

In part 2, we are going to render some data on page

Next.js is known for it’s ability to bring server-side-rendering to your app with almost zero effort. We are going to use getServerSideProps from Next.js to fetch users list from a public JSON API to render on the page.
Along with getServerSideProps there are several methods to fetch data with Next.js but we are going to be using getServerSideProps in this part.

Open your Home.tsx and update it with code below

As you can see we are importing interface from a non-existent directory named types/types.ts Go ahead and create types.ts under types directory and enter following code in it. These are our custom interfaces to fit our user model.

We have added data fetching logic in our home page now that sends users array down props through getServerSideProps . We are iterating over this array and rendering Next.js Link to a slug based page. We don’t have that page yet. So, let’s go ahead and create one.

Next.js has smart routing that picks up pages and data passing via query params works out of the box. Looking at our <Link href={`/user/${id}`}>{name}</Link our slug based page will need to be inside a directory named user like this pages/user/[slug].tsxand enter code below in it.

and you have successfully built a tiny but strictly typed Next.js app with Next.js pages and React components.




TypeScript, GraphQL, React, Next.js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Async Component in LWC

Day 5 — Going back to the basics

Illustration of guy looking at floating images

How to fix Error: useHref() may be used only in the context of a <Router> component

React: Day 10

React day 10

Use React to make Tic-Tac-Toe in 5 steps

Let’s Build a Fast, Slick and Customizable Rich Text Editor With Slate.js and React

My React(ion)

How to create chrome extension

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


TypeScript, GraphQL, React, Next.js

More from Medium

How to Use Environment Variables in Next.js

Pith instructions to Deploy a Next JS application to your own server

Data Fetching with Next JS-Demystified

Next.JS in React JS