Next.js 14 Admin Dashboard Tutorial | Fullstack Next.js 14 Project with Server Actions

Ғылым және технология

Next.js 14 app with new server actions, Next-auth and MongoDB.
Get Hostinger Discount: hostinger.com/lamadev10 Coupon Code: LAMADEV
Newsletter for upcoming Next.js Course: list.lama.dev
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
Start here: github.com/safak/nextadmin/tr...
Completed: github.com/safak/nextadmin/tr...
Deployment SSH Key codes: github.com/safak/youtube/tree...
Timestamps:
00:00 Introduction
03:30 Installation
05:21 Next.js 14 Folder Structure, Layouts, Styles
16:15 Next.js Sidebar Design
28:17 Next.js Navbar Design
35:00 Next.js Dashboard Design
48:05 Next.js Animated Chart Component
52:25 Rightbar Design
01:02:07 Users and Products Page Design
01:18:30 Add New User and Product Page Design
01:29:12 Single User and Product Page Design
01:39:21 Login Page Design
01:46:37 Next.js MongoDB Tutorial
01:57:23 Next.js 14 How to Fetch Data? (Next.js 14 Data Fetching)
02:06:45 Next.js 14 Search Functionality (How to Search and Fetch Item Using URL Query)
02:15:42 Next.js 14 Pagination (How to Fetch Item with Pagination Using URL Query)
02:30:25 Next.js 14 Server Actions Tutorial
02:44:45 Next.js 14 Delete Item and Revalidate the Fetched Data
02:49:35 Next.js 14 Update Item with Server Actions
02:55:29 Next.js 14 Authentication with Server Actions
03:00:00 Next.js 14 Next-Auth Protected Route with Middleware
03:07:00 Next.js 14 Login Form with Server Actions
03:10:43 Next.js 14 Next-Auth How to Add Different Data to Session?
03:15:50 useFormState Hook Tutorial (Next.js Server Actions Error Handling)
03:22:45 How to Deploy a Next.js 14 App to a VPS Server?
03:30:46 Outro

Пікірлер: 253

  • @cnamaster
    @cnamaster7 ай бұрын

    i almost practiced 20 hours for 2 tutorial of nextjs and im in the path of mastering it, thanks lama dev. i hope next tutorial come soon and i actually want to learn how to build complete app with high level of security, lama dev thanks for being with me, im gonna build and upload my modern website! love from IRAN

  • @sugo8920
    @sugo89206 ай бұрын

    love your videos. you clearly know what your talking about. you make it look very simple. easy to trust your design decisions

  • @that-Tree-of-Life
    @that-Tree-of-Life6 ай бұрын

    Thank you for this next.js tutorial! Took me a bit longer than I expected (never learnt about next-auth before) but this is so helpful! Great explanation

  • @mohamedlifa741
    @mohamedlifa7417 ай бұрын

    A project like this is significantly better than those repetitive OpenAI SaaS projects.

  • @therealdevopsintern

    @therealdevopsintern

    7 ай бұрын

    You are absolutely right

  • @coderkiemcom

    @coderkiemcom

    7 ай бұрын

    absolutely right

  • @ahmeism90

    @ahmeism90

    7 ай бұрын

    come on, check his channel, nothing but repetitive Dashboard projects :D

  • @reallyforreal323

    @reallyforreal323

    7 ай бұрын

    @@ahmeism90 lol :v

  • @reallyforreal323

    @reallyforreal323

    7 ай бұрын

    I think I go with OpenAI SaaS, it's show you aware of what is comming =))

  • @TommyAMV
    @TommyAMV5 ай бұрын

    This is the most informative tutorial about Next.js 14 features I’ve seen so far. Thank you! 😄 You answered all of my questions

  • @user-vc6pd5mh8u
    @user-vc6pd5mh8u4 ай бұрын

    I have just watch 27 minutes from this tutorial, its really empowring and much great tutorial, wow its like from zero to hero thank you man

  • @PolatjonQurbonov
    @PolatjonQurbonov6 ай бұрын

    I like, when you say " OK, Perfect" :) . Thank you, for your lessons !!!

  • @haiffy
    @haiffy7 ай бұрын

    I have been waiting for nextjs admin dashboard tutorial for years, thanks

  • @deslogsales6045
    @deslogsales60457 ай бұрын

    This is what I have been looking for. Thank you so much ❤

  • @joshpowerfitness9718
    @joshpowerfitness9718Ай бұрын

    I finished it after 6 months. I am so glad I eventually did it. Following you for more. Much love and respect

  • @nedalturas
    @nedalturas7 ай бұрын

    Well explained, well coded and really interesting project, I am also making a crm like project and was really having trouble doing it. I opened KZread and this video popped first. Thanks for this!

  • @web3ology

    @web3ology

    3 ай бұрын

    can i get the code??

  • @emanuelameh5722
    @emanuelameh57227 ай бұрын

    I'm feeling excited about this already

  • @shahrozeaslam102
    @shahrozeaslam1027 ай бұрын

    Finally😍❤️ cant wait to learn it

  • @coder5336
    @coder53367 ай бұрын

    Thank you man. Server actions make sense now. I wonder what is you opinion on API vs server actions. Can't wait the next video

  • @jamesnelson174
    @jamesnelson1747 ай бұрын

    Honestly this is better than those AI that are paid. Good work.

  • @reiniervarkevisser
    @reiniervarkevisser7 ай бұрын

    Again an amazing tutorial 🎉🎉

  • @derekmwachinga8272
    @derekmwachinga82725 ай бұрын

    This is GREAT Lama Dev! KUDOS!

  • @IamDarkAngeL1
    @IamDarkAngeL17 ай бұрын

    Another amazing video from our Master

  • @zyncc
    @zyncc4 ай бұрын

    This tutorial is absolutely amazing thank you so much!!!💯

  • @viniciusm.m.7822
    @viniciusm.m.78227 ай бұрын

    Yes!!!! Thanks, Lama!

  • @heniyentertainment
    @heniyentertainment7 ай бұрын

    thank u lama for this great project i have big respect for u

  • @Arman-kp8jf
    @Arman-kp8jf7 ай бұрын

    good job man! thanks for this video!

  • @albiamilvenv.3620
    @albiamilvenv.36205 ай бұрын

    I love this kind of tutorial, I am student and new for next.js and I just by watching this video I learn a lot. Although I can't memorize them all , I just watch it over and over hahaha😄. Lama dev, can you make a tutorial or a continuation of this video with file or image upload. Well appreciated works.❤

  • @watDfacts
    @watDfacts12 күн бұрын

    I am @1:13:56 and after I finish this tutorial I am going to use bootstrap in my next training project. Thank you very much Lama Dev for this video tutorial! It's so great!

  • @Yasinafridi
    @Yasinafridi3 ай бұрын

    I was so confused abou how next js authentications and API works. I watched many toturial but didnot find any helpful. But after watching this video now i understand Next js and will try to create some dummy projects. Thanks for this awesome toturial😍

  • @huletech
    @huletech7 ай бұрын

    thank you its really amazing project

  • @benixmaximus
    @benixmaximus7 ай бұрын

    Really looking forward to doing this project. Just some feedback... I do wish it was mobile responsive though as people looking at my portfolio will often visit it using a mobile device.

  • @andysavage2361
    @andysavage23612 ай бұрын

    This is a fantastic tutorial !

  • @borishitz5724
    @borishitz57247 ай бұрын

    the best tutorials all the way

  • @russellmutamba9899
    @russellmutamba98992 ай бұрын

    love your content! keep it up

  • @mrx4532
    @mrx453228 күн бұрын

    thanks man for this great tutorial It helped me aloy ❤❤❤

  • @webhook4729
    @webhook47297 ай бұрын

    Thank you so much lama

  • @manuQAE
    @manuQAE7 ай бұрын

    Full amazing!

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl7 ай бұрын

    Lama the king of React

  • @rootbindev
    @rootbindev7 ай бұрын

    well done lama

  • @sajidalam9972
    @sajidalam99727 ай бұрын

    Plz make some more projects on next js and tailwind css only ❤ your project is more valuable than any course that cant provide

  • @mehrdad1068
    @mehrdad10687 ай бұрын

    Thank you my teacher 💚♥️

  • @imkir4n
    @imkir4n7 ай бұрын

    Lama back with a bang

  • @user-qp3wq6ff6z
    @user-qp3wq6ff6z3 ай бұрын

    you're my savior

  • @mohitcodeswell
    @mohitcodeswell7 ай бұрын

    Sahi hai! 👍

  • @programador5784
    @programador57847 ай бұрын

    Hello friends, and thank you Lama for your content, something here worries me, until now in the content that I have found they always mentioned that for the content of the components that generate the routes, arrow functions should not be used, but I see that your You always use them, so I don't know what to do there, although I suppose I should go to the documentation hehehehehe. thank you so much.

  • @_ademmeral
    @_ademmeral7 ай бұрын

    Awesome bro

  • @naseeemkhan
    @naseeemkhan7 ай бұрын

    Salute to you❤

  • @tahaahmadi7446
    @tahaahmadi74467 ай бұрын

    hi lama; at first thank you so much for sharing lots of valuable content to us; please talk about converting react web to PWA; i couldn't find any good example for this problem

  • @darshmostafa6044
    @darshmostafa60447 ай бұрын

    We want more Projects using Mern Stack Technology please ❤️♥️

  • @juniorMr
    @juniorMr7 ай бұрын

    Lama you re the one

  • @Devlopsofar
    @Devlopsofar7 ай бұрын

    This is a very cool tutorial an d i have been enjoying you tutorials, i learn react completely from this channel and now i'm learn nextjs. KUDUS to Lama Dev. Thanks for the tutorials. i have one confusion here on how to add social media login with role base authorization.

  • @tko786
    @tko7866 ай бұрын

    Own css better then framework . Very nice I will use this in my project on large skill

  • @danglad5546
    @danglad55467 ай бұрын

    Lama, if you create a course on Next.js 14 + Headless CMS (preferably the simplest one, without deployment, i.e. not Strapi), let it be a one-page Landing page. For example, this could be Contenful simple and effective, or another but equally simple (although all of them are not relatively simple), but still it would be a very interesting lesson and there are very few of them on the Internet especially for Next.js 14. This is just an idea for future project, if you have the time or inclination to do it, I'd be happy to take a look!

  • @simonthordal303

    @simonthordal303

    7 ай бұрын

    Sanity io for sure ✨

  • @peleteiro222
    @peleteiro2224 ай бұрын

    I think the video is great. I would consider do the server part for lower level audience.

  • @MisterDasturchi
    @MisterDasturchi2 ай бұрын

    Thank you so much

  • @jagadeeshgade6309
    @jagadeeshgade63097 ай бұрын

    Thanks !!!

  • @mehdihassanpoor396
    @mehdihassanpoor3963 ай бұрын

    so useful

  • @MehmetOzgulnet
    @MehmetOzgulnet7 ай бұрын

    23:30 - If the avatar image doesn't show, manually refresh the page. Also, import the "Image" component from "next" lib.

  • @leciel87

    @leciel87

    2 ай бұрын

    holy....s... THX bro!

  • @sylvesterasiedu
    @sylvesterasiedu7 ай бұрын

    Hello, compliments of the day to you and thanks for your videos and the hard work you put into them. Can you kindly create a tut that shows how to monitor user inactivity in Nextjs 14 and logout when there hasn't been any user activity (first notifies user via modal warning first - if no response, logs user out after inactivity timeout expiry). Secondly, a tut on how to manage routing based on user role (so protected pages logic)

  • @mahiddandamun5570
    @mahiddandamun55706 ай бұрын

    Thankyou for the wonderful project. I am a beginner and starting to learn the backend, and I am following along with your tutorial. I would like to ask if I'm going to need Node.js for the backend, or if Nextjs is capable enough to do the fetching of the data and handling of backend logic? Since I've been watching a lot of videos about Next.js, and some of them say that Next.js is a full-stack framework and is only good for client-side web due to its ssr and not good for backend intensive projects. I would like to ask your take here thankyou.

  • @BCSMohdHaider
    @BCSMohdHaider6 ай бұрын

    Hello sir thank you so much for teaching us. just want you to let you that please make tutorials on advance topics of MERN for example, zod with react-form-hook, react-i18 for Multilanguage application, and tutorial on webRtc. please make tutorials on this top. because we have more than enough videos on MERN but these advance topic are having very less tutorials

  • @mathewadeyemi5389
    @mathewadeyemi53896 ай бұрын

    God will always bless you abundantly and continue increase your knowledge, we always enjoying you , by the grace of God you will enjoy yourself.

  • @dejangjorgievski5370
    @dejangjorgievski5370Ай бұрын

    Hey there! I really enjoyed watching your video about setting up an admin dashboard. It was super informative! I'm currently working on a project where I need to implement different user roles for the admin dashboard. I noticed you covered the basics of setting up the dashboard, but I was wondering if you could do a follow-up video or provide some guidance on how to add different user roles, like "admin," "moderator," and "viewer." Any tips or suggestions on how to approach this would be greatly appreciated! Thanks in advance!

  • @trend_tech4500
    @trend_tech45006 ай бұрын

    Authentication session is required separately in a another video. would help us a lot❤❤

  • @mohdsahil226
    @mohdsahil2267 ай бұрын

    Really, great tutorial. Would you please also add a video of adding animation while adding or removing users? I am able to add item inside a modal, but not able to edit because I have to fetch edit data on client which is not possible by server action. is there any way to do this?

  • @russellwilliams2888
    @russellwilliams28885 ай бұрын

    Thank you Lama a great tutorial. The only issue I have is with the pagination feature. When the disabled prop is set on the

  • @theangelofspace155
    @theangelofspace1557 ай бұрын

    It looks, awesome I do want ro bookmarks this crash tutorials for future reference, but simce they are on JS and not TS, I cant actually keep them as my production references. I wish future full crash course are on TS.

  • @TemmyCodingLifestyle
    @TemmyCodingLifestyle7 ай бұрын

    Thank you . I have a question. What's the difference between using custom authconfig and using WithAuth from next js. Which is better? And also can i use signout in the auth.js also can i use signout in a server component

  • @MTT06
    @MTT066 ай бұрын

    Cool

  • @pauladam9317
    @pauladam93177 ай бұрын

    Excellent. Could you do a similar one with Antd and next.js.

  • @tejasukalkar2199
    @tejasukalkar21997 ай бұрын

    One full stack project with Nextjs + Ruby on rails as backend + postgresql as database please 😁

  • @clonedmosquito
    @clonedmosquito5 ай бұрын

    finally made it work. But these url need to be run first time inside. first time every page taking forever

  • @shaun_was_taken9135
    @shaun_was_taken91357 ай бұрын

    FIRST ❤

  • @nagaraj-biradar
    @nagaraj-biradar7 ай бұрын

    Thanks for this video, it's nicely done. Can you come up with Full-stack Airbnb Clone in Next.js and Mongo DB.

  • @najmulhasan5997
    @najmulhasan59977 ай бұрын

    ❤❤❤❤

  • @coralioballester
    @coralioballester7 ай бұрын

    Thank you for this great tutorial. Are you hasing passwords on the server here? Your hashing function is in addUser, in "user server" file. Is this safe? i'm just asking

  • @agnieszkamiodek3486
    @agnieszkamiodek34867 ай бұрын

  • @user-mo8fi6lk2w
    @user-mo8fi6lk2w3 ай бұрын

    Great video thank you. I am new, How i keep de conexion open from the terminal when i deployed i keep my laptop open all the day?

  • @gmancodes
    @gmancodes7 ай бұрын

    When / how is the products and users tables being created given the completed file? It seems you are using previous database info to make the user or bypassing the login auth. How do we do this? Does mongoose have no auto schema push like prisma?

  • @talhaamirali3786
    @talhaamirali37867 ай бұрын

    Good Tutorial but if use any css framework would save a lot of time. Overall its great!

  • @Farhathameera-rm3fs
    @Farhathameera-rm3fs7 ай бұрын

    Hi Lama, please upload new project using React, Next Js with Typescript which is very usefull for us

  • @devoxygen7395
    @devoxygen73957 ай бұрын

    Level

  • @elahehs2674
    @elahehs26744 ай бұрын

    thanks for great tutorial! i just finished this project and deployed in vercel i have 405 error do you have any idea how to fix this?

  • @jormencar
    @jormencar7 ай бұрын

    no loading(feedback to the user) when deleting or adding an user?

  • @lxdjango3101xl
    @lxdjango3101xl7 ай бұрын

    Hi Lama, at 20.21, line number 83 I can't render anything {cat.title}. only when I use "return" i.e. return {cat.title}, it starts to work all of a sudden. Any idea why?

  • @clonedmosquito
    @clonedmosquito5 ай бұрын

    My next task is create responsive navigation using this code as base. Also i probably name folder as database and schema folders not lib

  • @zunnoorainrafi5985
    @zunnoorainrafi59857 ай бұрын

    Hi, Please share your thoughts on Remixjs

  • @ZainRamzan-pt8cm
    @ZainRamzan-pt8cm6 ай бұрын

    I have a quick question. I've implemented cookies and JWT authentication in my NestJS backend. Now I'm working on the Next.js frontend, and I have a server component that sends a request to the backend (Nest) to get protected data. However, I'm receiving an "unauthorized" message from the backend in the server component. Note: I'm using HTTPS-only cookies and ngrok for HTTPS in development. How to solve this? means how i can configure next js How i can forwards the secure cookies from Server compoents to the nest js backend that are comming from the browser

  • @boywithtrouble
    @boywithtrouble7 ай бұрын

    what is extension , when you typing "comp" and complete the function??

  • @tao2869
    @tao28697 ай бұрын

    Hi, is it possible to implement a cron job with next.js without deploying to vercel? Also how can next.js server components cache data in in memory?

  • @user-fw2vm9gz5r
    @user-fw2vm9gz5r7 ай бұрын

    hi how can we use middleware for APIs like in nodejs and how can get userID from token and perform some actions on API like in nodejs? How can pass token from frontend using axios interceptors like in react?

  • @risalahalhukmi3454
    @risalahalhukmi34545 ай бұрын

    Thanks for the tutorial. But my RootLayout is affecting (the header and footer of my app appear in the dashboard page) the DashboardLayout because I put Header and Footer component in my RootLayout. How is the solution?

  • @satishksharma
    @satishksharma7 ай бұрын

    Please make video on CRUD operations with authentication with using nextjs and laravel API.

  • @devinschumacher
    @devinschumacher2 ай бұрын

    what extension is audto adding those imports?

  • @simoncedeno1751
    @simoncedeno17516 ай бұрын

    Thank you very much Lama dev, your explanation is very useful, but I can't connect to mongodb... Can someone publish the repository of the database to generate it locally, please?

  • @veztre
    @veztre6 ай бұрын

    I copied your completed project but my problem is that once the credential is correct it doesn't directly proceed to dashboard instead I need to refresh the page before the dashboard is shown. thanks for your code I'm learning a lot

  • @sakitchimufaza3547
    @sakitchimufaza35476 ай бұрын

    Have anyone tried the completed code recently? i found an error when I am login in. it says user is null

  • @caominhdev
    @caominhdev7 ай бұрын

    👍

  • @zulqadarabbas7567
    @zulqadarabbas75672 ай бұрын

    Question for the experts: What should I do if the DB is lets say MySql/Postgres? Is there an effecient way?

  • @javalok9575
    @javalok95757 ай бұрын

    Thanks can you please make news portal app with admin

  • @matiax101
    @matiax1015 ай бұрын

    I'm trying to login against a remote API. It works just like the video. But how can I show the custom message that the API provides? may be the user provided "wrong credentials", or may be the user "is not active". Any suggestions? I'm talking about the catch block in authenticate() from lib/actions

  • @user-wz7fl6sp5e
    @user-wz7fl6sp5e6 ай бұрын

    1:46:40 checkpoint

  • @brutal-gaming-yt
    @brutal-gaming-yt7 ай бұрын

    In the connectToDB function you are trying to cache existing connection if it's not available in a caching object. But the object is inside the function. So everytime we try to connect to db it will be create a new instance of the caching object. So the caching should not be inside the function.

  • @LamaDev

    @LamaDev

    7 ай бұрын

    You are right. Fixed! Thank you for the comment ☺️

  • @valeriarubioh
    @valeriarubioh7 ай бұрын

    can someone explain me how can I create a user? I downloaded the completed repo and link to my mongodb but I can't figure out how can I access to the dashboard route because I cant log in

Келесі