In this section we'll add pagination
to this Reviews page,
because at the moment we only
display the latest 6 reviews,
and there's no way for our users to see
all the other articles we have in the CMS.
In the process we'll learn some
new Next.js features as well.
Note that I have the dev server
running here in the terminal.
Now, let's open the code for the ReviewsPage,
and think about how we can add pagination.
For a start we'll need a bit of user interface
showing the page number,
and links to the next and previous pages.
Let's add a simple "div" before the list,
with a "span" showing the current page number,
like "1" for example.
Before that we can put a Link
to the previous page,
and I'll leave the "href" empty for the moment;
we'll think about which URL to use in a minute.
As for the text I'll use a "less than" character,
which looks a bit like a left arrow.
Let's put another link after the page number,
this time with a "greater than" symbol,
to indicate the next page.
It could do with a little bit of styling.
We can use flexbox to add some
"gap" between the elements,
and then put some padding at the bottom.
Ok. It's pretty basic, but it's a start.
Now, what should happen when we click next?
We need to decide which "href"
to put on this Link.
We still want to show the "/reviews" page,
so the path can be the same as the current route,
but then we could add the "page" number
as a parameter in the query string,
passing "page=2" for example.
This is a common way to implement pagination.
If we click the next arrow,
you can see that the URL in the browser changed
and now includes the "page=2" parameter.
The question at this point is:
how can we read that parameter
value in our page component?
We know that each component receives some "props".
Let's log these "props" when it's rendered,
instead of printing all the reviews.
If we save, and check the logs in the terminal,
the page in the browser reloaded automatically,
and you can see that "props" contains
a "searchParams" object,
with the "page" value we passed in the URL.
Note that there's also another
property called "params",
but "page" is inside "searchParams" instead.
"searchParams" are the values in the query string,
that are those passed after the
question mark in the URL.
While "params" is for values
that are part of the path,
like the "slug" we use in the ReviewPage.
Here we extract the "slug"
from the "params" object.
So "params" really means path parameters,
while those in the query string
are called "searchParams",
and that's what weÂ want to use in this case.
Now, note that the "page" value is a string,
not a number like you might expect.
That's because the URL is a string,
so any values passed as part
of it are also strings.
If we want a number we'll
need to parse that string
and let's assign it to a "page" variable.
We also need to be careful that the
"page" parameter is optional.
We can still link to the "/reviews" route
without passing any "page" parameter.
So only if it is set
we can call "parseInt" to convert
the string into a number.
Otherwise we can default to "1",
to show the first page.
Let me log this variable,
and check what we get.
It's printing "2",
which shows it parsed the parameter correctly.
We can now display the "page"
value in the pagination bar.
And if we save, of course it shows
"Page 2" in the browser.
At this point we can also calculate
the next page number,
and use it in the Link "href":
the next will be "page + 1".
And we want to do something similar
for the previous link,
although this will be "page - 1".
Let's go and test this.
If we click Next, that increases the number.
And if we click Previous, of
course we move backwards.
So that's working fine.
But there's nothing stopping us
from clicking Previous again,
and going into negative numbers.
Also, since it's a URL parameter,
somebody could pass an invalid value like "xyz",
which results in "Page NaN",
because parsing an invalid number in
JavaScript returns "Not a Number".
Let's make this code a bit more robust,
by writing a separate function
to parse the page parameter.
We'll take the string value as input,
and first of all we need to check if it's set.
If that's the case we can try parsing
it as an integer number.
But then we need to check if the result is finite,
which will return false if "page" is Not a Number.
And we also want to make sure it's greater than 0,
because page numbers start at 1 obviously.
This way we only return the value passed
in the URL if it's a valid number.
In all other cases we can return "1" instead.
Now we can use this function to
parse the parameter value,
replacing our previous code
that was a bit too simple.
Ok, this should work better.
You can see that it's showing "Page 1" for "xyz",
so any invalid value will simply be ignored.
Likewise, if we follow the NavBar link,
there is no "page" parameter in the URL
and therefore we show the first page.
But if we click the Next link,
this still works fine,
and of course we can go backwards as well.
Now, on Page 1 we can still click Previous,
and this goes to a URL with "page=0",
so it's not quite perfect yet.
Ideally we should disable the Previous link
if we're already on the first page.
But we'll worry about that later.
This pagination bar is good enough for the moment.
The main functionality we're still missing
is fetching the right reviews
for each different page.
We'll see how to do that in the next video.