How to fetch data from api in next js
Next.js Tutorial #10 - Fetching Data (getStaticProps)
Timecodes:
all right then gang so
now hopefully you've got a feel for the
basics of creating
a next application how to make pages and
routes how to link between them
how to use styles how to create a layout
component and now
also how to use static assets the next
step for us
is to make the website a bit more
dynamic and to bring data
into the mix for example it would be
nice to fetch some data from an
api endpoint which we can then show in
one of our page components
in our case that's going to be some
ninja data now
normally this data would come from a
ready-made api
endpoint that we might create or
directly from a database like firebase
i want to keep it simple and i'm going
to be using json placeholder
now jason placeholder gives us some
dummy api
endpoints to fetch data from really good
for testing
and we can choose different resources so
there's posts comments albums photos
to-do's and users
and this is how many items we get back
from each endpoint
we're gonna use this one right here
forward slash users so watch if i click
on this right here this is the end point
and we can see
this is the json data we get back so
loads of different objects where each
one
is a user it represents a user in our
case it's going to represent
a ninja now ideally we don't want to
just
request this in the browser in the
address bar we want to request
this data from our code instead so how
do we do
that well in normal react applications
we might do this from a hook like use
effect and that would make the request
in the browser
but in our case we don't want to do that
because remember the components are all
pre-rendered
by the time they reach the browser so
ideally we want to fetch the data before
they're rendered
so the rendered components have data in
the template
and to do this we can use a special
function provided to us
by next so i'm going to show you that
now
first of all where are we going to fetch
the data well we're going to do it
inside this
ninjas index component right here so
when
we go to forward slash ninjas this is
where we're going to fetch the data from
and show the datum
so the special function that we need to
create provided to us by next
goes up here and this function is called
get
static props and we need to export this
so i'm going to say export
and then const get static
props like so and that is equal to a
function
and inside the function is where we
fetch the data and this
is an async function let's spell const
correctly like so so this function right
here
runs at build time as our app is built
and our components rendered
at this point we can add a fetch request
inside it to fetch any data we need
for our component template now this
function
never runs in the browser only at build
time so don't write any code here that
you expect to run
in the browser let's now create a fetch
request
inside this function so i'm going to say
const
response is equal to a weight and we can
use a weight because this is an
asynchronous function and then we're
going to use a fetch request
the end point is going to be this thing
right here to fetch the users so let's
copy that
and place it inside here so that's the
fetch request
that returns a response object now to
get the data from that we have to use
the json method to pass that json
into something we can work with so we'll
say const data
is equal to a weight because this is
also asynchronous this method
this json method and now this is going
to be
an array of objects like this thing
right here
okay so we have that data but then how
do we actually use it
inside the component well we return a
value
from this function and this return is
going to be an object and inside that we
have
a props property and we give this a
value
now this value is going to be an object
and inside here we can pass in different
properties and values that we want to
make accessible
inside our component as a prop so in our
case i'm going to create one called
ninjas you can call it what you want i'm
calling it ninjas and i'm setting that
equal to data which is this array of
users
so now what happens is this data is now
available to us inside this component
and it's attached to the props that we
take in right here
so i could just destructure from that
the ninjas property
and that is all of this data so remember
this
runs before the component is rendered
fetches the data it waits for that data
once we have it it pumps into the
component so that it can be rendered
with that data inside it
okay so now what we need to do is map
through those
ninjas and output them in the template
which is what i'm going to do
so curly braces because we're using
dynamic
javascript right here so ninjas.map to
map through them
and then we're taking each individual
ninja
as we cycle through those and fire a
function for each one whereby
we return some kind of template so let's
get rid of the curly braces right here
and instead return parentheses because
we're just returning template inside
these parentheses
and the first thing we'll do is a div
and the root element inside this
needs to have a key this is all standard
react stuff so if you don't understand
any of this
then definitely check out my react
series first of all
now each ninja right here has an id
property on it
we can see this thing right here so that
is going to be the key
so ninja dot id and then inside that all
i'm going to do
is output an anchor tag without an href
we'll add in the link later but this
anchor tag
is going to have a class name so we can
style it later on
and in fact we'll leave that off because
we've not made the styles for it and
we'll do that shortly
but what i'm going to do is output an h3
inside this
that outputs the ninja dot name
property and again that name property is
on
the data right here so we're just
listing the
ninja names here that's all we're doing
so hopefully now if i save this
then okay we get an error and this says
cannot read property map of undefined
so let's see what's going on over here
okay that all looks okay so i'm just
going to refresh over here to make sure
that we just needed to refresh that's
fine now
okay we just needed to refresh all right
then so
that looks like it's all working cool so
that's how we fetch data we use this
function right here get static props
it's an asynchronous function we can
fetch data inside it we return an object
with a props property
and that is an object where we can
attach different properties for data we
want to pump in to our component
pretty simple okay so let me finally
just add in
a few styles to this ninjas css module
so i'm just going to paste these in like
so and what i'm going to do is apply
this class
single to this thing right here this
anchor tag so let's say class name
is equal to something and first of all
we need to import those styles so let's
do that
i'm going to say import styles from and
then we need to come up two layers
and then into the styles folder
and then we want the ninjas
dot module css file
okay so now down here we can apply
styles
dot single like so and all that class
does
is give each one a bit of padding a
background of white display
some margin and a border left and then
when you hover over it
that border left turns blue so if i save
this and preview
that looks a lot nicer okay so next up
we're going to look at dynamic routes to
make
ninja details pages when we click on
these things
right here
Related queries:
how to fetch data from api in next js 13
how to fetch an api in javascript
fetch api javascript get example
how to fetch data from api in js
how to fetch json data from api in javascript
