hello YouTube my name is Bruno and today we are going to talk about server-side
rendering using Next.js one of the first questions that you may have kiss
why do we even need server-side rendering isn't create react up good
enough well it is if you don't care about SEO search engine optimization but
if you start to care about dead or if you start to care about the fact that
your user will see a wide screen or a blank screen for the first three to four
seconds when your application reloads well you probably want to consider
server-side rendering because your user we left immediately something to see on
the screen that's called a fast first meaningful
paint or first content full point if you want to know more about those subjects
this blog post from Google is quite good so you can read them through and
understand quite clearly what those subjects are okay in order for us to
start let's come to our console and we have create-next-app and this is really
similar to create react up the only difference is that we will create a
server-side rendering application so for me the name of that project will be
YouTube-2020-feb -nextjs, now it will start to install react, react-dom
and next itself it will take roughly three to four minutes in my network so I
will just fast forward this for you now that it finished we can see that next.js
has printed some helpful messages for example it teaches us how to run our
application in dev mode how to build and run our application in production mode
for example. With that in mind, we will go inside our application folder and
open that with our editor and you will see that next created three folders for
us one which is the public folder and this is the folder where we are for
example our favicon okay and then we have two more folders one called
component and another one called pages so we can come here and just
delete them okay and you are probably asking why are we deleting them well
because I want to show you completely from scratch
how you can create routing in an XJS and for that let's create by calling source
to one of our folders and now we will create another folder called pages ok
and this name is a configuration from next.js every single file you put inside
pages will become a route ok so this is a filesystem by its route contrary to
for example react router where you have the switches and things like that in
here it will go by the file system so for example if we create a file called
index dot JSP file export function index ok and we do return h1 index page ok
in next.js we have just one simple rule here which is the component we export
needs to be a default component and so you have two options or you put it here
ok or you do export default of index I prefer the first one just because it's
simpler but you can use the second one if you prefer ok
so creating this you can also notice that I don't need to have import react
from react, because next.js
is using bubble to put that for us automatically
so we don't need to repeat ourselves over and over again now let's use the
configuration that next put here so npm run dev so let's just do that it will
start our dev server and we can validate if this route here will be our index
folder here or not so let's just open our browser ok and to localhost 3000 for
example ok and 3000 is the default port from next.js and we can see yes we have
the index page here so going back to our editor let's create just another static
route and let's say that this static route is for example
details oops not be files details dot J s okay so let's do exactly the same
thing export default function details ok
return h2 details ok and as you may imagine now instead of being the root of
our URL it will be slash details so let's go back to our browser and let's
do slash details and now we will have details page okay one last static routes
before we go to dynamic routes because as you can see static routes are quite
easy so let's say that we have a page where we have not car but we have for
example vehicle and let's say that we have a person named in this case it will
be for example my name ok so let's do export default oops not be told default
function Bruno for example okay let's do return a div lot of if let's say h2
because that way I don't need to zoom my browser for you to see and I will say
Bruno Skaar okay Bruno Skaar we save that one and now as you may imagine we
will have slash vehicle slash Bruno okay so it's quite easy for us to do routing
in a next.js okay and this one is there so static routing is just a breeze
but that's probably not as useful as it could be the useful thing is for us to
receive instead of vehicle we can have a car or a bike or an airplane
whatever Bruno Hans okay so let's say that instead of receiving a completely
static a completely static name that vehicle we put these square brackets and
those square brackets are telling next.js that bit is a variable called
vehicle in our URL and it's dynamic it will change so let's do the same thing
here instead of calling it Bruno let's call it person okay so let's also
this one just for consistency oops person this is just for consistency okay
and then Bruno is still here but I will change it in a second
so if we go to our browser and we say vehicle Bruno or if we say car
John we should go to the exact same page because we have a dynamic routing now
okay now from this dynamic routing how can I read the parameters from the URL
it's easy as well so let's do import use router from next.js router okay so
this is just a react hug so we can do router equals to use router
okay and just for simplicity let's say that we have router and router as
something called query so all the parameters that we are having for
example vehicle and person will be inside this query okay just to fully
right then let's go to our browser let me open the development tools and now
you can see that vehicle is car as you can see in the first parameter and the
person is joined so if I do instead of join if I do Bruno for example after the
browser refreshes I can see that the vehicle is still car but the person is
now Bruno okay so we can already start to update our our application here so
instead of being Bruno we can say query that person so this is the person's car
and because we don't have only cars we can already do this dot vehicle okay
we can delete our console.log because it's no longer needed okay and let me
just show you one more thing about these routing before we go to navigate to
these pages to the navigation to the links okay the anchor tags so if i
refresh here okay you will see that is Bruno's car okay let's just say John and
let's say that's an airplane for example okay so John's airplane it's there
I delete this console.log but I shouldn't because I want to show one
more thing here so if I come here and I have query parameters so for example
query one equals two Monica which is my girlfriend so we can say that now the
query one as Monica but if I say something like ant query one equals to
someone else someone else ok now we can see that we have an array in query ok so
we received Monica and someone else well this is good right so if we have more
than one we will receive an array if we just have one we will receive just the
single property so this is quite useful for us right going back here we mastered
the routing in next.js so the thing we need now is to navigate to these
pages we created because we are just going to our browser inputting the URLs
there no user will be doing that right so in order to navigate for example from
details to our person let's just remove these and say that we have a link ok
and oops not like that let's just import because we are using Java Script the
next/link whoops these will probably look
similar if you did react router so we will have navigated to Bruno's car ok
and now you are probably tempted to do one of two things and both will not work
as you may expect probably doing car slash Bruno Wright is one of the options
that you will probably do and the other one will be to do something like this ok
none of them will work and I will just show you what happens ok so let's just
open our browser again and go to our details page ok and now let's see what's
happening I have dead URL here sorry that anchor
there and that Iker Texas car Bruno so when I click I should just navigate
there but look at what will happen here and you will see that it will be a full
page reload okay let me click you see we completely fully reloaded that page
that's not what we want by any means we want a spa single page application right
we want to navigate and the router to do that transition okay so what we can do
here in next is there is an "as" parameter here and the S parameter in
reality will have what you are used to pass to an edge ref and the edge ref we
left the template of your routing so if you come back to our pages folder the
template of our routing will be vehicle slash person so we will do the square
brackets don't forget the square bracket okay and
person if I don't put these square brackets for example see what happens we
will have a problem going back to our browser did it refresh we can force the
refresh just to make sure and now when we click nothing happens okay and you
can see that the console is even triggering some errors okay and the
reason is because next can't match that template the edge ref template to any
route in the system right so let's put whoops wrong place let's put the square
brackets back and now we have dead template matching exactly what we have
here so it should just work so let's just refresh go back to our elements
just for you to see that the page it doesn't have a full refresh or a full
reload and clicking here as you see the only thing that changed was the body
there was not a full reload next router took care of it
so that's exactly what we wanted the last thing that I think we may need from
the next router is for us to do dynamic routing even though this is not from
next this is our code but it's probably something that you may be asking so let
me just create people it's an array of people and we will have
a V which is the vehicle let's say car and we will have name which is the
person's name so let's have three people it's just good enough ok so we will have
oops our bike and airplane good enough right
Bruno John and Mick I don't know if we pronounce it Mick or Mike whatever Mick
for now so in here we need to just change this so we will have loops we
will have instead of having a normal string we will have our famous backwards
okay so string templates and here we will just do the following so people
oops people dot map and now we will receive
the element ok and from that element we are going to return this bit ok and so
let's keep e and he let's put a dot V which is the vehicle and in the name
let's put dollar e dot 9 ok we can also change this here because it makes sense
for us to change this here so a that name and a dot vehicle ok and now we
will have completely dynamic a completely dynamic routing system right
so imagine that you were receiving this from an API endpoint or some other place
so you can now navigate dynamically and the only thing you need to do is to have
some string literals for sting templates I never know how it's called
but now if we go to details again you will see that we have 3 URLs even though
they look bad let's just make them look better before we click in them so let's
just put for example I did just to force them to go to the next page ok let's
delete this door ok now they are in different pages so we can
you get to Bruno's car we can navigate to John's bike and we can navigate to
mix airplane everything you need from routing I think it's here in this bit
right so by now you should have a good understanding how the next j/s rotor
works I should just warn you for one last
thing if you remember I told you that every single file you have inside pages
will be a route to the outside so imagine you have these a unit test for
index dot spec Duchesse so these specs are usually files that we
want to keep to ourselves we don't want to open a route out of it
right but if you come to our page now and we call it index dot spec now that
thing is an open road even though it will file but it's an open route if you
don't mind about this then you are good to go but if you care about this usually
what I do is all my components ok that should be exposed in routes and know
about the router so we do the Const rotor equals to use router I usually put
them inside a containers folder so let's say that we will do that only for the
index let's call it home page on page docks back sorry dot J's and let's do
export function on page and return h1 as hello ok so this is our home page and in
order for us to use our home page we will come here and we will do import on
page from on Tanners oops and Bruno container slash on page ok now
we just need to export it as default export default home page ok so doing
that now our index folder is now our home page and I can now come here at the
unit tests I want or even having any helper functions and they will not be
exposed in my pages so my pages will become just the routing
nothing else okay so we can delete this one from here because we already have an
on page what spec Dutch yes and it even has the benefit of if you want to use
the same component in more than one route for example imagine that you want
your clients to go to example calm and example.com slash on page and you want
to show exactly the same thing you don't want to redirect you just want to show
the exact same thing so you can come here on page dot je s and so we can come
here and do the following so now going back we will have an on page here okay
on page here okay so with this on page you are just fine everything will just
work the the router for me it's it's quite easy in XJS okay it's super easy
for you to add new route to check the parameters from routes it's super super
easy so next week we will take care of these
synchronous operations in next year's for example doing HTTP calls in your
server rendering that component and sending that component back to the
client or the client your browser okay so if you want to watch the second part
of this tutorial please subscribe to the channel and I hope to see you next week
bye bye