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

Socket API || React Native and Node JS || Step by Step Guide

The Execution of Node.js Process

Angular Virtual Scrolling — ngVirtualScrolling

A JavaScript demo project for RingCentral token management

To Master React, Stop Thinking About Component Lifecycles and Start Thinking in Terms of Renders

Hotel Rotilio

Create WhatsApp clone with Next.js Part 16 Firebase config

React Native — Let’s begin

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
BleatinGoat

BleatinGoat

TypeScript, GraphQL, React, Next.js

More from Medium

Using TailwindCSS In The World Of React

Absolute paths in React using craco (feat. TypeScript and ts-jest)

An endless straight road on a desert area

React Modal Component Implementation

User Authentication with Google Next-Auth