if you want a job or career in web development
this video will be covering the latest modern framework of next js and typescript which
is used in most professional environments this can also be used with react.js because nextgs
is just built on top of it the topics covered in this video are we are going to have client-side
authentication using next auth and we're going to be using the google sign-in as a provider we're
going to be using components as most professional companies use that to
handle their styling
we're going to create sliders with react slick we are going to have server-side rendering and
also be using something called incremental static regeneration we will be using typescript for type
checking and catching bugs okay so we are going to be building the disney clone as you can see
here we have the login page we are currently on slash login if we click on the login button we
now have a authorization page which we can sign in with google so if i click sign in with
google
it will then authenticate us onto the home page we have the google icon here so the same one i
have in the corner that is passed in with the session provider from next auth we have the header
component a slideshow component we have viewers that the video plays on when we hover over we have
the relevant sections on the disney website where we have recommended trending new for you and
originals and this is all with data we are fetching from the server side these are also
scrollable so
if i click it will scroll onto the next and then when we reach the end the icon
gets disabled and we can also go back also these are all coming from an api that we will build in
our application also if i scroll down and click through to a movie for example the incredibles
i now get the url changing to slash movie 13 and then i get the relevant information
for the specific movie that i clicked on so if i go back onto my home page and for example
click the queen to soldier and again the imag
e is displayed as the background image we are having a
title image and we are also having the description rendered correctly this is all done with
incremental static regeneration as well and what we can do is if we hover over our icon we can sign
out like so and then we also get redirected back to the login page as well so let's get started
with the build okay so first of all i'm going to create a new repository on github for this so i'm
just going to call it disneyland yt for youtube and t
hen it's going to be a public profile
and i'm going to just create the repository so now i have a few commands here that i could
do so all i'm going to do is copy this here i'm in my youtube folder now on my terminal so
all i'm going to do is hit clone i'm pasting the link that i have here so now press enter and
now if i press ls i now have my disney clone yt folder so now i just need to move into that
so cd disney clone yt press enter and ls again so now i'm going to install the app so i'm
going
to install next js and typescript with styled component so if i paste in with yawn create next
up with typescript and i'm also going to bring in style components and there is an example
for this so if we just add dash dot example with styles components it does the initial
setup of style components for us it adds all the configurations into the nexus file structure
for us so if i press enter it now prompts to give a project name so i'm just going to name
this disney blonde yt and pre
ss enter again okay so if i go into the folder we have a
component folder and we have global styles in here we also have shared styles so when we imported the
with style component it has given us an example so all i want to do now is cd into my disney clone
and then yawn f this will start on localhost for us if i just refresh this and press enter so now
you can see it says welcome to nexjs and we have a initial render of the next yes page so what we
want to do is delete that if we go into p
ages and index.tsx we have a template here which is
what is seen on the page so if we just delete all of this within the container and i am also
going to delete the container so all the styles from shared styles we don't need so if we delete
them and also delete the shared styles file so delete and then we will get an error so i'm
just going to render a h1 on here saying disney plus clone on the home page and if i save
all so now we have a disney plus chrome page on the home page so the ind
ex.tsx file within the
pages folder is always going to be the home page uh the about will be the slash about and so
on we don't need an about.tsx in this build so i'm going to delete that as well and we also
don't need a card.tsx so i'm going to delete that and i'm going to keep the global styles i'm going
to move this out of the components folder onto the main root directory and update the imports as well
so i can clean up everything here we have a home page underscore document.tsx this is
where the
style components gets initialized and rendered so i'll just keep that as is and we have an app.tsx
page here where we have a default theme being rendered a global style within the theme provider
and then all our components fall within this what i also want to do is i just want to remove
the colors property from the theme so we have direct access to the theme when we get props and
now if i go into the type of theme so if i press command and click through i can see the interface
d
eclared here so i just need to update that as well so delete the colors object so we now have
direct access to the primary and secondary colors and if i save all and refresh we just need
to update the styles within the component we also need to update the styles in the
global styles.tsx so where i deleted colors it is now just theme.primary so now that is
all of the style components section complete we just need to create the folder structure so we
have a components folder we have a pages f
older a public folder where we will import our images
and our video so i'm just going to copy them across now and import them into public because we
will be using these later on in the project i am also going to be creating a new folder for the
types so we're typescript types so if you click on that and type in types and there's one final
thing to do on the setup is in our ts config json we want to set strict to true so we want to
actually catch the book to make the most of typescript so no
w if i save and restart my up
so yawn dev we can now get started on the build okay so the first component that we want to create
is the header so if i go into my components and create a new folder named header and in here
i'm going to create a new file named index.psx and if you have the react functional snippets es6
7 snippets extension then you can just type in ts rfce like so and tab and it creates a functional
component for you with types so this one is going to be named header we don't
need any types as we
don't have any prop so i'm just going to delete the types and i'm going to delete the props and
the header i'm going to import in my app dot tsx just above where the components get rendered
as this is being used globally so if i control space and imports in that way so if i now
save all i now have the header at the top of the page and that is regardless of the page
that i go on to so if i go back into my header i want to change this to nav because it is
a navigation t
hat we're going to be creating so if i create a new file called styled.tsx
and import styled from style component like so i'm just going to copy across the
nav that i already have made as i don't want to focus too much on the css element of this
so we have a height of 70 pixels for the nav a background color display of flex align item
center which means it would align everything centrally on the horizontal axis it will justify
the content a space between we have a padding on the top and bot
tom of zero and left and right
of 36 px we don't have any overflow on this and this will have a zen index which means it
pops out of the page and we also have a color of white for the text i am also going to go into the
app dot tsx and update the colors to the ones i have already made so paste these in so we have
a primary secondary a white a bright blue silver and a dark grey so these are the colors being
used in this build what also we can do is we can export this theme into its own file
but we will
keep it in here for now so going back into the header i'm going to now import the nav from the
styles.tsx like so and now if i save everything we now have a header being rendered on here
with a child of just the text header we do have two errors on the project so if i go into app.tsx
it's got a few errors that we need to sort out so essentially we need to add these to the default
theme type or interface so if i command base and paste into here and we just need to add these
new
colors in and essentially what they all are are strings so if i just play string in
here and again we should have now have this issue resolved so now if i save essentially what
we are doing is on our app.tsx these colors here will be strings so as you can see here it is
highlighting that this is a string the same with the bright blue this is just enforcing the
types in typescript so if i was to delete the the speech mark from here it would trigger an error
which it does so i just need to ad
d that back in now going back into my header i have the out and
now rendering and it's working correctly on the page i'm going to have have the disney logo so i'm
going to create an image so image of image source is equal to i have the url here which i've just
copied from the disney website and paste that in and then we'll just leave keep the alt as disney
logo so and if i save we now have the disney logo we just need to style that as well so i'm going to
give this as a style component so i
f i name this logo and then i'm going to import that from my
styles or go into styles and then i'm just going to copy across my logo style so export const logo
which is equal to style.image it's going to have a width of 80 80 pixels sorry and then a cursor
pointer as well so if i now save we now have the width of the image as 80 pixels and it's on the
left so that's the first child being rendered so what i'm going to do now to keep the code clean
is just under logo i'm going to create a fun
ction and i'm going to name this render header the
reason i'm doing this is because there are two states of the header there's one where we have
the login button and there is one where we have the menu items on there so essentially what we are
going to do is create a function so const render header and first of all going to check if the
person is logged in or if the user is logged in so if logged in sure be logged in header but if not
then we want to show the logged out header where we have
a button saying logged in so first off
i'm going to create the login button so i'm going to return a login container like so so this is a
div which has a log in button that just says login so now i just need to create the relevant style
component for this so if i go into styles we have got a login container and a login button so if
i copy the styles that i currently have across and paste them in so the login container has
a display of flex justify content of flex end and a flex of one whic
h means take up all the
space that we have here so put it at the end here the button element is it has a border of one pixel
solid a padding of top and bottom of eight pixels and left and right of sixteen a four p export
rate border radius let us spacing of 1.5 pixels a background color of a black with a 0.6 opacity a
transition when we hover over a cursor pointer so when we hover over it we noise the clickable
element and then the hovering styles here as well so i am exporting them all i n
eed to do now
is import them from styles so this function here we are calling after the logo so now if i save we
now have the login button so if i hover over it it changes color as well so now within
this header render header function before i render the login container we are going to check
if the user is signed in if they are signed in then we render whatever we return from there
otherwise if they are not signed in then we render the login button here like so this way it keeps
the return
on the header component quite neat and tidy we have a logo image here on the left and
then whatever is on the right is getting handled in this render header function so now what we need
to do is install authentication with next auth so if you go on to the website nextoauth.js and click
get started it does say here how to install so we are using yawn so yarn add next off so if i just
copy this and create a new terminal i'm going to just install next off into the project so we
also are using
typescript so we have typescript documentation here but what i am essentially going
to do is add a new file so it says here add an api route so to add next auth to your project create
a file in pjs api also if we go into pages we want to create a new folder in here called api and we
will also be creating our movies api within the api folder and then a new folder within api
named auth and then within auth a new file and we're going to give it brackets dot dot next
auth and close the bracket
s ts because we're using typescript so now i'm just going to copy this
across paste this in and we will get some errors so if i just say open this up and instead of
github we're going to be using google so if i just go instead of github i'm just going to change
all of the github so this will be google because we will need an api key from google themselves and
then we are going to import that from slash google like so we also need to create a dot emv file so
i am going to go into the package
.json level and then a new file in here named env which is where
we will have our env files and i'm just going to call this one google id so google underscore id
is equal to an empty string for now because we need to go and get that and we're going to get a
google underscore secret key as well so we will do that later on okay so going back into the next
auth tss file we are getting an error so if we hover over it it's essentially saying that we need
to provide a string in here so because th
is is not a string we are importing it from the emb file we
just want to put in here straight after as string that should fix the error and the same with the
secret key and we also need to update the name so i'm just going to name this google underscore
client id sorry for id and then google client underscore secret just copy this and grow it back
into our next auth ts and this is going to be the secret and this is going to be the google id
so now we have that initial setup complete we now
need to go ahead and get a google api and
secret keys so if we go into our so if we go into the google api console for developers and i want
to agree and continue so this is my first time on this account setting it up so i want to dismiss
this and go into credentials and then create a new project i'm going to name this disney clone
youtube and create so the project will be getting created so now we want to select the project okay
i've got this and then configure consent screen and just clic
k external for now and create i
can ignore the learn section so give this an app name of disney plus i'm just going to put
my email in there my gmail we don't need a logo we don't need any of this and then again just give
in my email address so if we go on to credentials and then create credentials and we want to go
on all auth client id the application type is a web application i'm just going to give it a name
of disney client and we are using localhost 3000 so i'm going to add the uri in
here and for
authorized redirect uris if we just go on to next auth and type in uri the redirect uri
so we've got that here so it'll be localhost slash api slash all slash call block callback
and then you put the provider name in here so that in our case is google so if i now create
i now have the id and the secret so i'm just going to add these into my env file like so and
these will be deleted at the end of the video and i'll get new ones for here so they won't
be used so if i press ok a
nd now if i save oh and go back into my next all file i want to delete
this because we're only going to be using google as the providers so now with the next auth we
should have access to something called use session so if i type in new session which is already
there we can get access to the status or whether the person is logged in or not so if i copy
this across and go into my header component so where it says here if logged in sure the header
will be at the top of the functional componen
t we're just going to paste in the session that we
are using and import in the use session from next and then we want to have a check to say
if session if session we want to return a new component which we will create called signed
in header like so and we also want to pass down the session as a prop into there because we want
to log in and log out and we have access to that within the session object so if i save we need
to create a new folder within here named signed in header so a new fol
der called signed in
header and this will have an index dot tsx file and ts c a named signed in header which will take
in the session as props and instead of type i'm going to give this an interface so interface
of props and this will take in a session and i'm going to declare this session as a
session and this is coming from next auth like so so now that's the sign in header rendering so
if i save we have an error within here so we just need to import the signed in header component
and no
w we can remove this comment so essentially this render header function now is saying
if there is a session we want to return the signed in header otherwise we want to return the
login container and this is being rendered in here after the logo image so if i now render header
and what we need to do in the login container is we have access to you session which is in
here so in use session if i scroll down further we should have a sign in and sign out which is on
here so if i import sign in f
rom next auth react and also if i import sign out which is a bit
further down and then all you need to do is add an on click on there to say sign in so hours is
the login so if we paste that in close that off and now if i save i go into my local host and
refresh so now we also need to wrap a session provider around the app so if i go into my app.tsx
and just above global styles i'm going to import session provider from next author react close
that off and then add the children within there
and then the session provider has access
to the session which is equal to his props session so now i'm going to restart the server so
beyond dev and if i refresh the page and press log in we now get directed to slash api slash auth
slash sign in and if i click sign in with google it directs me to the sign in with google page
and if i just log in with my gmail account so now as you can see we are signed in and we are
seeing the signed in header so if i go into header and if there is a sessio
n return the signed
in header i'm passing in the session so if we go in here and now we are seeing the header
so it's just the case of now rendering out the menu items on there so so i'm going to import
a nav menu so if i paste that in so this is rendering out the navigation menu of the links
that we want to have on the page so home search watchlist originals movies and series so i'm
going to import the now menu styles into our styles file so in here import the nav menu
styles so it is a d
isplay of flex and we are going to give it a flex of one to give
it as much space as possible we're going to have a margin left of 25 pixels on there
so it gives a bit of space after the logo the span text i'm going to have a font size of 13
pixels some letter spacing position of relative and a text decoration of non so because it is
an a tag we don't want to have the underlines on there we're going to give it a slight transition
when we hover over so we're going to give that a line and bac
kground of white or in this case we'll
give it the props of white so props and then crocs or theme all right this after section will have a
position of absolute because it will be underneath the text a left and right of zero and the bottom
of minus six as we are positioning it underneath and then a slightly transition which you can copy
but it kind of goes from left to right the image so the image icon on the left of it will have
a height of 20 pixels and again styling the a tag here and if
it reaches the width of 768
pixels or less then we won't display it at all so if i go back into here and ctrl space and
import the styles and now if i save we now have the menu items rendering and as you can see the
after effect is showing when we hover over as well so now that the menu is rendering we just need
to create a sign out button here and also show the icon of our gmail login so a circle in the
corner or whatever we have as an image so if i create a section named sign out as a di
v and
now there are two children within here and we can only have one so i'm going to create a
react fragment which is the shorthand version so if you just put empty brackets in like that and
then if i copy this and push it up one and in the sign out div we are going to render an image so
in this case it will be a user img this will be the image and the source will be equal to and
first off what i want to do is comment this out now and at the top where we are getting our props
we want to c
onsole log the session so session and now if i save and inspect the page so if
i go into my console i get two objects in here i'm just going to open one of them up and in here
we get a session and in here we get a user so the user has an image as you can see here an
image with the url so what i'm going to do is render that as my user image source so if
i uncomment this and then it is going to be session and we're going to add optional change to
see if we have a session not a user image like
so and then the alt tag for this is going to equal
same but in this case we're going to just take the name so session user dot name so i now need to
add the styles for the sign out and the user image so if i go back into my styles and paste this
in or i've got a sign out a drop down and a user image so if i go back and import them in
and close this off save all so we now have the circle with the user image on there that is
working correctly now when we hover over the icon i want to show a
sign out button so all i want
to do now is have a drop down span underneath so we have imported the styles for the drop down and
in here we're going to have a span which says sign out and all we are going to do is have an on
click span on click sign out being called and this will be called from next auth react and
that's imported in from next wars react there so now we're getting an error in here saying
no overload match is this called because it could be undefined so what we essentially
w
ant to do is check if there is a session first before we render so if session is
true we want to return the user image like so otherwise we want to return no and now if
i save so now i have this area so what i am going to do is i'm going to put this into a constant so
if i cut this out and i'm just going to call this image or at the top here i'm going to give it
a constant image is equal to session.user.image as a string and i want to do the same for the
name so image is going to be changed
to name as a string so on the alt i'm just going to give
this name as the constant and save so now if i log in and sign in with google i get redirected to
the new signed in header and now if i hover over we have sign out here so if i just click on that
we are now signed out also what's like tweak is sign out should be one word and now i should
save so that is the header complete and the next auth implementation complete as well now
what we will do is build out the login page okay so now we
're going to create the login
page so if i go into pages and a new file called login.tsx and then essentially i'm just going
to copy what's on home and paste that in here and home it will return to login we are going to
create a component called sign up so sign up which will get rendered on the login page so if we go
into our component folder and create a new folder named sign up and in here create a new file named
index dot tsx and we're just going to say rfce as we won't need any props be
ing passed on for this
so this will be named sign up and now if i go back in login and import this in and now save and if we
go into localhost 3000 slash login we now have the sign up component rendering on there so if i go
into my sign up component essentially what we want to do is render out the cta and the background
image for the disney login page so we will have the disney logo the headline the description
and the import field which will be the email input and the button to sign up thi
s will all be
visual so there won't be any functionality other than when we click the button we will be signing
in and then getting redirected to the home page if i copy what i already have and paste this
in so in my return block i want to render out the following so we have a container that has a
cta and within the cta we have our logo we are loading lazy so this is a shorthand method to do
lazy loading for your image we have a headline a description an input component which we will
comme
nt out for now because we need to make that and a description thing you get 12 months for the
price of 10. so all we need to do now is create a new file called styles.tsx and then import the
styles in auto so just to highlight the styles the background is going to be covered with an image
so we're going to give it a position of relative and the min height of 100 viewport height the
url is copied from the login page on the disney plus website and then everything else is
self-contained so the
cta will be hovering on the left so it will have a padding of 80 and
40 pixels with a max width of 650 pixels and then we have some media queries handling the width
and the align items so the logo will take on 50 of its container the headline has a font
size of 1.5 rim and align the text to the left and then the description has a
font size of 11 pixels also so now if i import these from the styles file and now if i
save all we have everything rendering but the text is in black so we can't
see it so what
i need to do is go into my global styles and give the headings and the p type of color so
i paste them in and save we now can see the text and if i expand out the image is also on the right
we just now need to insert the import component so if i create that now so if i close my header and
within sign up i want to create a new folder this will be called input and in here we're going to
have an index of tsx file or fce as this will not receive any props and this will be named i
nput so
in here we're going to have a container once again and within this container we're going to first
off have an email input field which will have no functionality with the placeholder equal to
email and then we will also have a sign up link so this will have functionality so sign up link
and the text inside will say continue so now on the sign up link we need an on click and on
the on click we are going to get the sign in function from next authoriac so sign in from next
all three ac
t like so that's the functionality they're complete we just need to add the styling
for the input so again styles dot tsx and i'm just going to copy over my styles for this so
paste this in we have the container which has a width of a hundred percent a display of flex
align item center and justify content center a margin and a flex wrap of wrap the email input
is a styled dot input and we have given this a background color of the dark gray with a border
of the dark gray also and that's one
p x solid the color within is a props.theme.white and then we
are going to give this a flex with 0.7 which means that it would take up 70 of its 100 width which is
declared up here the signup link would be a link that takes up thirty percent as its width and also
a background color of bright blue and some padding on there as well so if i go into the index and
import these files from the styles and now if i save and what i need to do also is render the
input so inserting that and i'm importi
ng it from slash input and now save we now have the input
rendering on the page as you can see so there are two entry points to log in so you can log in here
or you can log in there also so now if i go back into my login page what i want to do is add some
functionality in here to say when we log in we want to then redirect to the home page so what we
want to do is get access to you session from next author react and within there we are destructuring
the data and the status so within the dat
a we can access this session and essentially what we want
to do is if there is a session then we want to redirect to the home page so what we need is
a router so that is from next router so if i import router is equal to use router from next
router like so so now if we have a session we want to push so router dot push to an object containing
the path name we want to push the path name to the forward slash and now if i save we want to do
this on the page load so we can use use effect and in
here we are passing in a callback which
is this code snippet here that we have just created so if there is a session and we only want
to do this on page load so we pass in an empty dependency so when the component mounts we pass in
if there is a session router.push to the path name of forward slash which is the home page directory
and then we also want to return anonymous function so now if i save i also i want to add another
guard clause in there so if status which is what we are accessing
from the session is equal to
or triple equal to the string of loading then we just want to return a p type in loading and just
finally to add extra check we want to say if there is no session then we want to return the sign up
page and now if i save and go on to the home page the functionality is still not there so what
we want to do is we want to go into our api and next auth cs we need to add a callback in here so
what i will do is just copy what i already have so the callbacks will be a
dded in here so if the url
includes slash login we want to return the home page if the url doesn't include the forward
slash meaning it we're on the home page then return to slash login so now if i save all and go
into my terminal restart my server so take it out and you're on dev again and refresh my page and
go into slash login and then if i log in now i now get directed to the home page so now that is
the login and functionality for the login page complete next we will do the home page o
kay so now
that the login page is complete we just need to do the same for the home page so if i just copy
what i have here i'll paste it in my home page so on here i'm just going to paste in the use session
from next or three act use router from next router use effect again from react and then the session
if there is no session then we want to redirect to the login page this time and again if status is
loading return loading and if there is a session then we want to return the disney clone
so now if
i save there isn't a session so i need to log in sign in with google and now i'm on the home page
like so and what i want to do is i want to create a new component in here called home layout and
if i close this off as well now in my components folder i'm going to create a new folder called
home layout and in here a file called index.psx save and the home layout will take props in this
time because we are going to get movie data from the api so if we do ts rfce and for now i'm jus
t
going to name this home layout and in this div we're going to have a few elements so we're going
to have for this slider banner and we're going to have categories so these are the categories that
we hover over so pixar disney store and that sort of categories and if we hover over them then a
video will be shown then we are going to have rows the relevant movies so we will have a title
and then underneath we will render out the movies that fit that title so we will be using the
filter met
hod and then mapping across on each row so first off i'm going to start with the banner
so within home layout i'm going to create a new folder named glider banner and in here we're
going to create a new file named index dot tsx and in the banner we are going to do rfce
slider banner and what we need to do now is import react select if you want to react slick
and here go on to the docs and we need to add react slick into our project so open a new
terminal and paste yarn add react slick in th
ere i also need to install slick carousel so if i copy
that across go into my terminal and yawn add slick carousel save so now that is in there we need
to include the css files also so if i copy them and import them at the top and i'm going to rename
the div to a carousel which will take in settings that we pass across so we spread settings and up
top here i have already got the settings so i'll just copy and paste them in essentially we want
the dots underneath for the slides to be true we
want it to be infinite so it goes to the end
and then goes back to the first we have a speed on there we will show one slide at a time and it
will auto play as well so now we have the carousel and within the carousel i'm just going to paste
in my slides so we have a container for each one and within the container we have an image being
rendered so container for the images is named wrap so what we could also do is each wrap could be a
separate component and then within the component we pass
the image down as props and then we render
the image that way but for now we're just going to render it like this it's not how you would do it
in a production environment it's just a way to render out everything in one slide for our slider
so we can visually see what is being shown so now what i need to do is create the styles.tsx file
and in our styles file we want to paste in what i already have so i am essentially importing
slider from react slick so this is the carousel and i am editin
g the slider from react
slick in here i've got a margin top of 20 pixels we are accessing the class name of slick list to
show that there is an overflow and it is visible increasing the font sizes of the buttons
to 10 pixels and give it a white color the slick dots which is the bottom which
shows the slider position so these dots here we want to have them at the bottom right of
the image so now if i save everything and import we will visually see what is happening
and the wrap also from th
e styles so if i save and in styles we have an error which says react
slick is not there so what we need to do is close our terminal and restart again and we need to
import the home layout and save so now that we've created the slider we just need to import it into
the home layout so where the slider banner is i'm just going to import that in and if i save so to
debug this problem if i go into my package.json i do have slick carousel installed here so what i
need to do is go into my file an
d just remove this from here and now if i save i now have the slider
rendering on the page so now if i go into the home layout component close this one off in here
this div is going to get styled so i'm going to name this container so we can bring the margin
on the left and right in a little bit and i'm going to create a new file in the home layer named
styles.tsx and if i just copy my styles over paste them in so export the container which is equal to
style.main so we are using semantic ht
ml tags so this is the main element on the page we're going
to give you a min height of 100 v h minus the 70 from the header some padding as well on the left
and the right a position of relative and overflow on the x-axis of hidden before anything renders
on the page we're going to give it a background of the home background which is located in the
public slash images slash home background.png it will be behind any other elements on that
page and then we are also going to style all the corr
esponding h4s with a font size of 1.3
rem and some letter spacing and some line height so if i go back into my home layout and
import the container from dot styles so now we are rendering the slider button now if i
save so because the background image is in the images folder i just need to add slash images
slash home background like so and now if i save we now have the background rendering on the
home page so if i go back into the index tsx file on the home layout i now need to
create the
categories component okay so now that the slider is done i'm going to create a
category component so if i go into my component and create a new folder called categories and in
here i'm just going to create a new file which is named index.tsx rfce for functional snippet and
it's going to be called categories and then i also want to render that in my home layout categories
and i'm going to also move the categories in within the home layout as well just so it's all
contained within the home la
yout folder so in categories index.js that is exporting and now i
need to import it so that is working correctly now if i save i should now see the categories
component which is here the text is in black so essentially we want to create six category
components that are the same so we want to map over them showing three on the top and three
on the bottom and then when we get to a bigger screen then we can show six in a row so first
thing i'm going to do is create a container and the containe
r is going to be imported from
style so if i create a styles.psx file and if i import my container i also want to import style
components and in my container i'm going to have a margin top because it is touching at the minute of
30 pixels a display of grid the following padding and we want to have six columns in total so that
should be six and then create a gap between the columns of 25 pixels and the border radius of
10 and then when we drop to 768 pixels and below then we change the colum
ns to three so if i go
into my index file now and import this from the dot slash styles and now if i save we have that
in there so we need to render some children within the container so we want to first of all create
some data and map a reusable component so the best way to do this is to create an array of objects
so what i'm going to do is in my categories here i'm going to create a new file called data dot tsx
and i already have the data created so i'm going to say export const video dat
a which is equal to
an array and i'm going to paste in six objects in here and we have an id which is a number and
name which is a string of disney the video is coming from slash videos slash disney mp4 and we
also have an image url which we are getting from the disney website if we hover over video data we
can see here that typescript is already inferring the types but what i want to do is create the type
for the video data so i can easily just copy this and in types i want to create a new
file called
videos.ts like so and in here i'm going to export the interface of the video data which is an object
like so and i'm going to take this out and delete this as well so now we have access to the video
data type so if i go back into my data dot tsx i can now declare the type on here so if i give
it a colon and video data and import this with control spacebar from types there is still an
error because it is an object that i have stated here so an object that contains id of a number
name of string video of string and image url offstring so all i need to do now here on video
data type is just add array brackets like so and i still i'm still getting the error so what i
will do is rename this type video data type again video data type and then if i go into types here
again video data type and now if i save i now have the video data in my data tsx file and i have
given it a type of video data type which is an object that contains the relevant information and
that is with
in an array so if i was to change this to a string for example it now throws an error of
id saying that type string is not assignable to number so all i need to do is take that back and
keep it as a number for the id so now if i save we have our first type which is the videos.ts and
we have our data file here so in index.tsx i have now got the data so now i'm going to get access to
the video data so video data from slash data and i want to map over this so optional chaining so
if video data
is there then i want to map over it and for each video that i have or movie whatever
you want to call it i want to implicitly return within the jsx so implicitly return is when you do
the parentheses like so and in here i'm going to render a component render component with relevant
data being passed down relevant data being passed down as prompt so in this case we would the data
we will be getting is the individual video itself and that will be of video data type only and
not the array so
what i want to do is create a component named category content but before i do
that i want to create a wrapper so this will wrap across the category content so category content
is going to be a component and the wrapper will be the style so i already have the style for the
wrapper which i will paste in it has a border a background color the image image has a
background color as well that is a linear gradient a border radius for each of the wrappers
of 10 pixels a cursor pointer because it i
s going to be a hoverable element a box shadow on
each wrapper with the transition so when we hover over we want to transition into the video
and then we also add the scale on this way the wrapper itself increases in size so if i go
back into my index js and the wrapper is wrapper like so and if i import this from dot slash
styles i now need to create a category content folder within my category so new folder category
content and this will have an index.tsx file and again rfca pasting in th
e category content
and this will receive some props which will be the video a default image and a name and we will
define the same props or props like so and then in here it's best practice to add the interface props
and the props that are received are these ones over here and all of these props will be strings
so they will all be receiving strings on here like so and if i just copy this paste that in and paste
that in so now if i save we should get an error because we aren't passing anythi
ng down into
category content and we are also not rendering the components so if i import that i have an error on
here saying it is missing the following properties from type props so we need to pass them up in
so if i just copy this and paste that in so the video is going to be equal to and if i go into my
data.tsx i have a video here so video is equal to video dot video which does not make sense so what
i'm going to do is i'm going to change this to item and then rename this item so it do
es make
sense the default image is going to be equal to item box and the thing is with typescript because
we've already declared the type it does provide us documentation and we can see here we have four
properties that we can access so for our default image i want to get the item dot image url like
so so it saves me going back and forth or looking and console logging the data and then finally
item dot and then i have access to the name and with our wrapper always as if we map through
some
thing we want to give it a key this will be the item id so now i'm passing the right props in
i can now remove these comments and then now if i save i also need to go to the home page and now
we have six category contents rendering and when we hover over them we are showing the right data
here so if i go to a smaller screen size it does go to the three and three in two rows so now the
categories section is complete we now need to go into the category content section so we need to
render out
an image and also when we hover over we want a video to be playing and that will
be accessed from data.tsx once again the video mp4 file but we have passed down the
props now and we just need to render it out so for this i'm going to import a package called
react hover video player so if we open a new tab and paste this in and there is a package on npm
called react hover video player which is where if we hover over we see the video player there so
if i copy this and close my terminal and i
nstead of mpm i'm going to do yarn add and paste it in we
want to take out the mpmi and now press enter so this should install it does provide documentation
here of what we want so i'm just going to run my dev again and i'm going to first off import
the video player from react hover video player and then i've got this component here that
is getting rendered so if i just copy this and paste it in my return block within the jsx so
for the video source i'm now going to use my video that i'm ge
tting passed down from the props the
paused overlay is an image so what i'm going to do is use the next image tag for this which provides
many benefits and you can read this up on the next js website but essentially it converts your image
to a base64 string and it loads more efficiently and it optimizes the image also so for this
i'm going to have a source which is equal to default image which is being passed down from the
props so we're using that the alt will be the name which i am passin
g down from the props and i am
going to ignore the style here because nextgs has built in styles on the image component so i'm
just going to give it a layout of fill which will mean that it will cover the it's entire parent div
element and we don't need a loading overlay so i will delete that as well so now if i save and go
back into my local host we now have an error which means that we need to add a url onto our host name
which is the project delivery plus net so this happens when we use
the next image component so it
essentially means that we can only use predefined urls so if i go into my next config.js and after
compiler i'm going to add an images object in here which takes in domains and this will be an array
of domains so i'm going to paste in my domain like so and if i save what i now need to do is
restart the server because i've made changes to the connect config file so if i do yandev and
i want to go to the home page i'm still getting this error so if i just scroll
along they all have
the same url and i can see the issue which is the domains i need to put an s on the end and if i
save again and again restart the server beyond dev and now if i go into the home page we now
have the images rendering and if we go to bigger and then smaller so now if i hover over at
the pixel we now have the pixar video playing and the same with the disney and the
marvel and the national geographic as well so now that is the category section complete the
final thing we n
eed to do is create a reusable film component which renders the rows that we
looked at at the beginning of the video so if we go into our home layout and close these folders
so we have the categories and the slider banner contained within the home layout component so if
i go into index.tsx for the home layout and delete this comment for the categories the final thing
left to do is the rows with the relevant movies i'm now going to copy the titles
across that we need so the first title is re
commended for you second one is
trending the third one is new for you and the final one is originals now if i save we
have them rendering here so what we need to do now is create the role for them but before we do that
we need to create both the apis so to create an api with nextgs is quite simple all we do is go
into our pages folder and within api we have a folder called auth we just want to create a new
folder in here and i'm going to call this movies and within movies i just want to cre
ate a new
file called index.ts like so so if i want to slash movies then i will have a file on there so if i
go into localhost 3000 forward slash api forward slash movies we will have access to an api here
at the minute we don't have one so we will create one so if we go into our next documentation on
api routes we can first of all see we have pages slash api slash user.js so in our case it will be
pages slash api slash movies so i'm just going to copy this handler function here and paste t
his in
over here and instead of the name being john doe i'm going to have an array of objects which i have
already defined so if i just copy this across we have a long list of 19 objects in here so we want
to return this and each one is separated by a type which is original or it could be new or whatever
it may be and that is what is going to be filtered into each of these rows if i save in my file and
then refresh the slash api movies we now have the api data here so it's as simple as crea
ting that
i now have two areas here which are typescript errors so if i control space nothing happens
so on a handler function we get a request and a response so for the request we can import it
from next api request and next api response so i'm just going to paste this in and as you can imagine
the request is going to have a type of next api request and the response is going to have a type
of next api response like so and now if i save now have the get all movies route defined so now what
we want to do is create a individual movies route so if i go into here and go into dynamic api route
as you can see we have a slash pages slash api post and then we have a wildcard id dot js so
we want to create our own wild card on there so in movies going to create a new file and gonna
have array brackets of id close the brackets dot ts like so essentially what we want to do now
is when we go to forward slash the id of 4 we want to return the id of this one here which is
tangled so if i
press enter at the minute again we have the same error which is resolver is not a
function so in our id dot ts i want to define our list so i've already got this here as a constant
so essentially if we get the array of the objects that we have so constant movie list scroll to the
top is here and i also want to give this a type so if i go into and close this component and into my
type and create a new file and i'm going to name this movie list dot ps like so and this movie list
is going to c
ontain the same as this object over here so in my movie list rename this to ts dot ts
and we want to export the interface face of movie list type a movie list type which is an object
and this object will contain the following data so first off we want to remove the extra closing
and opening brackets and this type will be string and essentially most of them will be a string
so if we paste this in place in another string here this one is a string also so is this one as
you can see they all ar
e strings apart from this one which is a number and now if i save we have a
movie list type that we are exporting now if i go back into my api and paste in import this from the
types again this is an array of objects so if we add the array brackets here so we have defined
the movie list now if we go into our file here essentially we want to create a handler so if
i copy movie list scroll to the bottom paste in the movie list here and if i just copy this syntax
across into my id file so esse
ntially what we want to get is the slug or in our case it's going
to be the id so instead of that it'll be id so request.query.id and if i go into my index again
we want to copy the request and response so i'll copy this across from there and then we can just
control space more to import from next like so now we have access to the id which is in the params
which is slash 4. we essentially want to filter out the relevant id from the movie filter that we
have this declared above so const filt
ered movie is equal to movie missed astaire dot filter each
movie we have we want to return the movie dot id that is equal to the id that we get from
the request structure query dot id like so and if i just delete this res dot end here
what we also want to do is get the first index of this so if we add the array brackets at the end
and zero and then as you do with node.js because this is essentially node.js we want to send
the data the 200 response so res dot send the 200 response of json s
o we want to convert
to json the filtered movie like so so now if i save and refresh the page we get 200 we should
change this to status instead save and refresh we aren't getting anything back so that is because id
would be a string within the url whereas movie.id is a number so essentially what we need to do is
this condition will always return false since the types number and string have no overlap so we need
to convert the movie id to a string so easiest way to do that is to wrap it aro
und a string like so
and now if i save and refresh the page we now have access to the individual movie and the individual
movie data like so so if i change this to 7 we should get a different response which we do
and we get the title of my music story like so so that is the apis complete what we now need
to do is render out the films onto the home page so now that we have created the api for our
project if i go onto the home page so if i close down the api and go into index.tsx we now want
to
fetch the data but on the server side so before the page is loaded so if i go into next js
documentation here and search for get service i props essentially we want to get the props
from the server side and pass them down into our home component here so we want to access the
movie results that we fetch from the server side and then i'm also going to create an interface for
this and that is props of movie results and then what we essentially are going to do is pass this
down as a prop in
to home layout and then render down the film roles that way so this will be equal
to movie list type like so but for now we will just leave that and i will explain get server side
prop as it says on the next yes documentation so essentially it will pre-render this page on each
request using the data returned by get server side props so you got examples of when it runs here
so it's only going to be exported from a page so when you should use graph server side props
is only if you need to ren
der a page whose data must be fetched at request time this could be
due to the nature of the data or properties of the request pages using get server side
props will be server-side rendered at request time and only be cached if cache control
headers are configured so essentially what will happen is we will fetch the data once at build
time and then it will get cached so the data will always be there unless we change the data but
in this case we won't be changing the movie data so at the bot
tom of my index.tsx i'm going to
get a function called get server side props and there are examples of this on the nexus
documentation but i'm just going to type it out it will be slightly different because
we are using typescript so there will be some types we need to import from net js so export
const server side prop and this is going to get a type of get server side drops from next which
is equal to an async function and then we have a callback so get server side props and i'm going
to
get my movie results so const movie result is equal to a weight fetch and we're going to get it
from here so if i copy this and paste this in so essentially we are going to get access to
all of the movies here and then we're going to convert them to json and then once we have
done that after this block we're going to return props and the props we are going to return is
the movie result so return movie results like so and also pull on this off like that and
typestrip's quite good at inferri
ng the types anyway so if there isn't an error you
would just leave it and allow typescript to do its thing so now we are getting movie results
so in our console we should be getting access to this in the index route so movie list type i'm
now going to console log this out so console log movie result equal to movie results and now
if i save and go back into my home page and inspect the home page in my console i am now
getting the object back of this however i'm not getting the movie results
back it's showing up as
undefined so i what i need to do is add an array it is an array that is getting returned so if i
now save and now get access to the movie results and there is an array of 20 objects in there so
now i am getting access to the movie results we now just need to pass this down as propped into
home layout as movie results and i'm just going to copy this interface across into the home layout
index.ts and paste that in and import this as props and get our relevant type fro
m movie list
type so now if i save we now have access to the movie results so what i now need to do is create
film component that will render the movies for the relevant category okay so now that we have
our movie results being passed down as props and we are seeing this in the console we now want
to create a reusable films raw component so film row component and i'm going to go into components
and create a new folder named filmed raw and in here create a new file index dot tsx and this
is
going to be a type group file so ts rfce and if i go back into my home layout i can now
import this from films raw and we are also going to pass down the movie results into there and i'm
also going to copy again the props into the film draw component what you can also do is because we
are reusing the same props over and over we can export this into a type and then import that into
here but for consistency we're just going to keep this interface as props i'm passing the relevant
data and ty
pes so import movie list type again and this is going to be the movie results like so
this is also going to be a react slit container so i'm going to have a container in here and create
a styles file so a new file styles dot tsx and i'm going to copy once again my styles across so
i'm going to import slider from react slick also and then the container is going to be a div
it's going to take in a prop called add margin and we will add the margin onto the last
film's row of 15 pixels at the b
ottom when we reach the original section so that it
doesn't touch the bottom of the page and we are going to have a width of 100 view
width so now if i import the container from the styles file like so within the container
we are going to have the content which is also going to be the slider from react slick so i am
going to pass in the settings so spread them in and these settings are going to be responsive
also so i will just copy them across like so so we have the settings here we have n
o dots and
it's not infinite so when we reach the end then we can only press the back arrow to go back we're
going to show four slides and scroll two each time and we have got three break points on there i
just need to move this up slightly so after props like so so now the settings are being passed
into the content we now need to get the content from the styles file so we have already imported
the slider so the content will be styled.slider as we did with the slider banner component and
w
e are going to have a gap again of 25 pixels a width of 89 a margin top of 30 pixels a display
of flex so it's in a row and we want to align the items centrally so now if i import this as well so
within each slider we are going to get access to the props or movie results and if that is true
then we want to map again optional chaining so i want to implicitly return a div element so div
and within the div we're going to have a wrapper and the key for each rapper will be the movie dot
and agai
n we can have access to the properties within the movie so i'm going to choose the id as
the key we also need to add this into the styles file so if i paste this in here this will be the
styles for each movie so the wrapper will have a margin of top and bottom of zero 15 pixels on
the left and right we will have a border of 4 pixels solid a radius of 8 pixels so it's round
and overflow x the horizontal axis here as hidden a min width for each wrapper of 200 pixels each
wrapper will have a b
ox shadow similar to this one here it will also have a transition so when
we hover it will scale in size the border when we hover will be white and the same border radius of
8 pixels and with the image we will have a width of 100 and a height of 100 and an object fit
of cover which means fit the image as much as possible within its container so now if i import
the wrapper also from styles and in the wrapper i want to have an image so the source will be the
movie dot and then it will be the
card image and then the alt will be the movie dot title and i'm
also going to add loading of lazy on there as well so we are optimizing correctly so now if i save we
now have the images loading and the cards loading so if i open this up and we scroll as you can
see the images are loading lazily so i'm just going to take that out so that we can see them and
if i save again all of the images are now loading but what we are doing is we are loading the entire
api so we have a list of 20 objects
on the api and we want to filter out the ones on the
relevant sections so we only want to filter out the ones that have a certain type so in this
case it should be recommend if we look at the api we want to filter out the type of recommend
so if we go back into our home layout into our index file we want to pass down a category also
so the category is going to be equal to a string and if i go into the api i want to filter the
category as recommend for this one and now if i go into filmed r
ow i will get access to the category
and then i'll also need to add this into my interface the category will be a string but
now that i have access to the category i want to also filter so movie results first off we want
to first off dot filter so for each movie or item i will call this one i want to filter out
the item that is equal to the category so item dot type so in the api is type is equal to
the category that we are passing in so for this example it will be the recommend type that w
e
will pass through so we should have miss marvel in there and we should have only four or five
wrappers in there so if i go into my local host and now press save all as you can see now the
data has changed and the slides have changed so we now have only four on here so now that we
have created the film's row all we need to do now is render that out a few more times on the home
page layout so if i delete the comment and then i'm just going to copy this and paste it
under each title like so
so each title has a relevant filmed row and then the category
is the only thing that needs changing so for the second row the category name or type would
be trending so this one will be trending for new it will be new and then if we find an original
if i now save and go back into my local host i now have all the categories rendering on the page
so at the bottom now we need to add the margin so the last item so the last film draw i'm going to
put add margin as the boolean value and the crop
so if i copy this and go into my film draw and
paste that in we also need to paste it in here as a boolean value and this will cause an
error if i save all so on the container if i for add margin is equal to add margin like so and
i go back into here i now have an error saying add margin is missing in type movie results so
what i need to do now is go into the films row and because this is an optional prop i'm going
to put in the question mark like so and that will mean that is an optional
prop so we don't have to
pass it in always so now if i save that should add the margin at the bottom which it has done there's
a little margin now and if we test the film draw out it is working correctly what we now need to do
is render out the links for each film raw item so within here within each wrapper i'm going to have
the link tag wrapped around it and close the link off as well like so so if we import this from
next link and it's going to have a href or forward slash movies slash mo
vie id so the id
of each movie that we have if we click through we should get the relevant page so if i now save i
should now be able to go through to each of these and go through to the page so slash movie slash 3
would be the simpsons but because the page is not yet built we would get nothing on this so what i
need to do now is to create the page so if i press back we have the home page and the individual
films rendering and linking to the correct pages all we need to do now is to create
these pages
so if i go into pages i have my api folder here i'm just going to create a new folder in here
so we have a directory of forward slash movies slash movie id so similar to how we did the api
i'm going to create a movies folder and in here i'm going to create a file a wild card file so
array bracket id close the brackets dot tsx like so so now if we do ts or fce and i'm going to name
this movie information and now in here we're going to have an interface and pass down some data tha
t
we will fetch from the api individual endpoint source slash api slash movies slash 7 and we
will do this with incremental static regeneration so now when we click through to an individual film
for example the credibles we want to essentially get the relevant data for this so this is slash 13
so if i go into here and type slash 13 we should get this information here we have an error so i'm
just going to export the default function on here so it's going to be export default functional
movi
e information now save but we now have the relevant information on this page what we need to
do is fetch the data for all of the id paths that we have on here so essentially we want to find out
how many ids there are within the api we only want to stop until we reach the last id so we will do
this with get static paths and get static props so if we go into here we have access to get static
paths which gets the amount of paths on here that we need so essentially we want to get the amount
of
ids we have within the apis and this generates post 1 2 and so on and then we want to also get
static paths which requires get static props so essentially what gets static path is is when you
export a function called get static paths static site generation from a page that uses dynamic
route so in this case we are using a wildcard id so slash movies slash the id number next js will
statically pre-render all the paths specified by get static paths so essentially we will specify
the id's leng
th and then if we're going to get static props next yes we'll pre-render page at
build time using the props returned by get static props you can read more about this on the docs
here so these are the two sections to read up upon so we will get started on the movie information
page so first off i want to get all of the paths from the slash movies api so this api over here
where it has the entire list of all the movies so export const static parts and we'll also want
to get the static paths t
ype from next here as you can see which is equal to an async function
which has a callback in here and we want to get a response so contras is equal to so awake fetch
the data from localhost slash api slash movies and then the movie data so const movie data is
equal to await response dot json like so so now we want to define the paths or the length of ids
that we have on here so const paths is equal to the movie data that we have just received dot
map so for each movie we want to return an
object and this object will be params and in the params
we want to have a key value pair so we will destructure an id property which is equal to movie
dot id but because this movie dot id is a number we want to convert it into a string so if we wrap
it around in a string like so we now have the params.id here stated and just finally we want to
return the paths that we have just declared above and we want to give it a full back of fault and to
see what a fallback of faults is if we just sear
ch for a fallback or fault and if a fallback is false
then any path not returned by get static paths will result in a 404 page so for example anything
after the id of 19s so anything after slash 20 would result in a four or four page we also have
a type error here so movie implicitly has any type so all i'm going to do here is import the movie
type from the types file previous type like so and this is going to be an object so now we
have the path set we now need to fetch the props so if i j
ust copy this and this is going to
be get static props this time instead of paths and we are going to get the props and
not the paths from next and within here we will now have access to the context object so
if i pass in the context like so and then in here i want to restructure the id from context.params
so id is equal to context.params now if i save property id does not exist on type cost url query
so i'm going to declare an interface for this so interface of i params extends the past ur
l query
from query string as you can see here and in here we're going to define the id as a string
so all we now need to do is context operands as the iparon so now we have d structured the id
from the context.params that we have set up in the get static path section up here and now i want
to pass the movie results down as a props or const movie results as equal to await fetch and this
time we're going to give template literals so what we want to fetch is this here so localhost 3000
slash
api slash movies and this is going to be a dynamic value so we are now going to pass in
the id here and then we're going to chain the dot friend which gives a response and we're going
to convert the response to json and then the final thing is to return the props so props and in here
we just want to pass down the movie result and as a second argument we are also going to revalidate
as 100 which means that the pages will be statically generated at build time only and then
after that we can c
hoose to revalidate the pages so recheck the pages every 100 seconds if you
wanted to do it more then we can do so may i just do a thousand on here now all that is left to do
is pass the movie results down into the props so movie results and we also need to add this into
the interface and again this will be the movie list type that we have already imported in here
and before i return the movie information text i want to console log movie results from the
id page now if i save all and inspec
t my page in my console i have undefined or id page
if i just refresh again it is building now so it's building the cache of the data
and now as you can see here we have the slash 13 and we have the relevant data for this
page so if i go on to forward slash 6 for example we now have the relevant id for the slash six
id as well so now all that is left to do is create the page so the movie information page but
what i'm going to do is create a component called film layout similar to what we di
d with the
home layout as well okay so now we have the movie results data being passed down what we
need to do is create a film layout so if i go into my component and create a new folder called
film layout or movie layout whatever you prefer and in here i'm going to create a index.tsx file
and tsrfce and this will be named film layout like so we are going to get the movie results so i'm
going to pass in the movie results and have this as an interface which is what i prefer into the
types
and then in my id tsx render out the film layout from the relevant import so in components
slash film layout the movie result is going to be passed down as a prop movie result is equal to
movie result so now if i go into the films layout i should also be getting the movie result which
is equal to the movie list type because it is just the one object here and now if i save all
the film layout is now being rendered as you can see on here now there are a lot of elements
that are going to be re
ndered within this so first off i'm going to have a container as we
always do and we are going to create a styled file for the film layout so styles dot tsx and
i'm going to import all of the styles that i need first off i want the container to be a hundred
view height an overflow horizontal of hidden a display of block a top of zero pixels so it covers
the top padding for our children and the color of white so now if i import this from styles and
now save everything is going to be containe
d in here i also want to have inline styling in here
just to show you how that would work so if i copy what i have and paste it in and save we now
have the background of the relevant movie here so what is essentially happening is we are setting
the background image as a url and within the url we are passing in the movie results dot background
image so this image here in the props that are being received we're going to increase the opacity
to 0.8 background position of center a background re
peat of no repeat and the background size of
cover which means essentially cover the whole page so if we did a id of 15 for example as you can see
the relevant movie background is being rendered and if you do one same again so now if i save we
just need the children section to be implemented now also it's not recommended to do in-line
styling and then adding style components in a professional environment it's just to show you how
you would do either or i would recommend to stay and keep con
sistent with your folder structure and
how you put your styles into the relevant folders like we are doing now but this inline styling can
be done on certain occasions so in my children i want to add an image title which i have already
defined and i will copy this across so in here and paste and i also want to import these styles now
we have the image titles which is the source of movie results dot title image so if i go into my
styles the image title is here we want to display flex align i
tem towards the ends of flex end
justify content as flick start a margin of zero auto a height of 30 v h a min i o for 170 pixels
a padding bottom of 24 pixels to separate what's underneath and then also a width of 100 i'm going
to also pull in the controls into our index which will be the buttons underneath the image and we
just need to import these as well from the styles file so we have a play button trailer button an
add button and a group watch button so now if i save we have them rend
ering underneath underneath
the controls we want to render the subtitle and the description so if we pull the subtitle from
the styles and the description from the styles so the subtitle is movie results dot subtitle and
movie results dot description and delete this container here as it's a duplicate and now save we
have the relevant text rendering on the page also just to go over the styles we have the controls so
display of flex in a row and align items centrally on the horizontal axis th
e play button is
this button here where we hover over it's got a border radius of 4 pixels a font size of 15
pixels display of flex and align items of center it's got a height of 56 and a background of a
slightly kind of white-ish color padding on the left and right are 24 pixels and then we have some
margin to separate on this right here to the next container and we also have this letter spacing of
1.8 pixels we also have a cursor pointer on there and then when we hover over the background
changes as well with the trailer button we are essentially copying the play button in terms of
the styling but it's just a change in background border and color the add button and watch button
are similar they have a border radius of 50 and the only difference would be the background
color that is the rgb of black the subtitle has a certain font size of 15 pixels and then the
description font size is 20 pixels so now if i save everything we should have the project
complete now so if i go
into the home page so forward slash home we now have the home page that
has the banner above we have the categories that are rendering the relevant images and videos on
here we have filtered categories for the film's rows and then if we was to click on one we get
taken to the relevant page with the relevant id so we are getting this we get static paths and get
static props both server side we are fetching the data so if i now log out of the site and click
sign out i should now get redirecte
d to the home page so i need to implement that feature so
as we have done with the home page i just want to add this functionality into the forward slash
movie slash id page so id dot tsx and in my props paste in the new session hook we use router hook
and the use effect we want to check if there is no session then we want to redirect to the
login page like so and if there is a session then we want to return the film results so if i
now save we are now redirected to the login page so if i w
as to click login and sign in
with google we are now authenticated on here and if i was to click onto incredibles for
example we have the page rendering the relevant information if i was to sign out i now
get redirected to the login page as well
Comments
Great video, thank you
very helpful @Imran. Thank you so much
Hey man, nice work.
Nice video thanks a lot Imran, am following
Great Video!!!
Bro tune backend banaya hai kya video me..?plz do reply..
bro here there is nothing to add next-redux wrapper and do a project on the apis calling in reduxtoolkit and do authentication in nextjs
bro your writing are so tiny its making difficult to see
bro I have one doubt that is next-redux wrapper is used for ssr(getserversideprops)