Next.js Admin Dashboard | Responsive Tutorial with Typescript and Tailwind CSS and Shadcn/UI Part-3

hello all welcome to part three of our admin dashboard Series in this video I'm going to demonstrate how we can integrate a login page into our existing dashboard we are not going to implement the authentication logic uh just the login page so uh this is very uh short and simple video so let's uh jump into the development so first uh we can create a d root and we can add our existing dashboard into that uh dummy uh route uh so let's create uh uh folder and inside that we can create a uh dashboard and add a page let's add a page into that uh page do this uh and let's copy our existing dashboard components into that page okay let's uh rebot these components because the uh path is now changed so let's reot it okay everything is so every arrays are now gone uh so and let's rename the uh page the file name as dashboard and also Let's uh we can uh now we no longer need this uh uh dashboard components inside the homepage so let's we actually now need this com page. TSX file but let's keep it uh now uh so let's check what what's the view okay now the dashboard is working yes the dashboard is working okay so now we need to do some uh rearrangements in the layout uh we are going to create a separate layout page inside the user folder and we are going to keep our sidebar header andand page wrapper components inside that layout uh because uh this layout is only applicable for the pages created under this uh user folder uh we are doing this because uh we need to add a login page under the app folder and the sidebar and header components are not reced by this login page so we are just rearranging the uh layout let's do that o [Music] so uh let's check the current behavior of our uh dashboard uh okay so it's working as expected so next we are going to create our uh uh login page uh so let's create a folder login and add a uh file page. TSX inside that [Music] [Music] [Music] okay uh so let's uh add some uh design to this uh login page [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so our login page design is ready uh next we can add a login functionality like uh when we click the login button uh it will redirect to the dashboard so for that we can use router component from the next uh navigation [Music] [Music] here the login is working uh but there is a problem that the dashboard is not coming uh we can uh we need to redirect to dashboard uh even if the URL path is empty or slome we can achieve that uh by using middle Wares for that uh we can first create a middleware dots file uh in the root folder here we going to uh export a method accepting parameter of type next request and then uh we are going to check uh if the URL of the request is uh either slash or contains slome uh then we going to redirect uh this request to uh Slash dashboard [Music] [Music] [Music] perfect uh just one more thing to do uh we need to add the logout functionality uh for that we just need to open the usern now component and the then add we need to add the login URL into this log out link [Music] uh the log out is now working uh so uh if you guys feel this content interested please like the video and subscribe to this channel thank you

Channel: Sijin Raj

Views: 223

Keywords:

Id: Vs8BjOLCqUM

Length: 10min 16sec (616 seconds)

Published: Thu May 23 2024