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].tsx
and 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.