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

Поділитися
Вставка

КОМЕНТАРІ • 277

  • @mohamedlifa741
    @mohamedlifa741 11 місяців тому +116

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

    • @therealdevopsintern
      @therealdevopsintern 11 місяців тому +1

      You are absolutely right

    • @coderkiemcom
      @coderkiemcom 11 місяців тому

      absolutely right

    • @ahmeism90
      @ahmeism90 10 місяців тому +2

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

    • @reallyforreal323
      @reallyforreal323 10 місяців тому

      @@ahmeism90 lol :v

    • @reallyforreal323
      @reallyforreal323 10 місяців тому +2

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

  • @cnamaster
    @cnamaster 10 місяців тому +29

    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

  • @joshpowerfitness9718
    @joshpowerfitness9718 4 місяці тому +4

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

  • @jamesnelson174
    @jamesnelson174 11 місяців тому +5

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

  • @Yasinafridi
    @Yasinafridi 6 місяців тому +2

    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😍

  • @albiamilvenv.3620
    @albiamilvenv.3620 8 місяців тому +2

    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.❤

  • @sugo8920
    @sugo8920 10 місяців тому +3

    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-Life 9 місяців тому +1

    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

  • @AktefaTest
    @AktefaTest 8 місяців тому

    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

  • @reiniervarkevisser
    @reiniervarkevisser 11 місяців тому +7

    Again an amazing tutorial 🎉🎉

  • @nedalturas
    @nedalturas 11 місяців тому +3

    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 UA-cam and this video popped first. Thanks for this!

    • @web3ology
      @web3ology 7 місяців тому

      can i get the code??

  • @TommyAMV
    @TommyAMV 8 місяців тому

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

  • @haiffy
    @haiffy 11 місяців тому

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

  • @PolatjonQurbonov
    @PolatjonQurbonov 10 місяців тому

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

  • @coder5336
    @coder5336 11 місяців тому +2

    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

  • @deslogsales6045
    @deslogsales6045 11 місяців тому +1

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

  • @shahrozeaslam102
    @shahrozeaslam102 11 місяців тому +1

    Finally😍❤️ cant wait to learn it

  • @watDfacts
    @watDfacts 3 місяці тому

    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!

  • @danglad5546
    @danglad5546 11 місяців тому +12

    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!

  • @zyncc
    @zyncc 7 місяців тому

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

  • @emanuelameh5722
    @emanuelameh5722 11 місяців тому

    I'm feeling excited about this already

  • @sajidalam9972
    @sajidalam9972 10 місяців тому +2

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

  • @derekmwachinga8272
    @derekmwachinga8272 9 місяців тому

    This is GREAT Lama Dev! KUDOS!

  • @IamDarkAngeL1
    @IamDarkAngeL1 11 місяців тому

    Another amazing video from our Master

  • @darshmostafa6044
    @darshmostafa6044 11 місяців тому +4

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

  • @dejangjorgievski5370
    @dejangjorgievski5370 4 місяці тому

    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!

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl 11 місяців тому +1

    Lama the king of React

  • @heniyentertainment
    @heniyentertainment 10 місяців тому

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

  • @andysavage2361
    @andysavage2361 5 місяців тому

    This is a fantastic tutorial !

  • @russellmutamba9899
    @russellmutamba9899 5 місяців тому

    love your content! keep it up

  • @benixmaximus
    @benixmaximus 11 місяців тому +2

    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.

  • @廣瀬文雄-q3p
    @廣瀬文雄-q3p 7 місяців тому +1

    you're my savior

  • @tko786
    @tko786 9 місяців тому

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

  • @BCSMohdHaider
    @BCSMohdHaider 10 місяців тому +1

    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

  • @Arman-kp8jf
    @Arman-kp8jf 11 місяців тому

    good job man! thanks for this video!

  • @imkir4n
    @imkir4n 11 місяців тому +1

    Lama back with a bang

  • @programador5784
    @programador5784 10 місяців тому

    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.

  • @borishitz5724
    @borishitz5724 11 місяців тому

    the best tutorials all the way

  • @mrx4532
    @mrx4532 4 місяці тому

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

  • @viniciusm.m.7822
    @viniciusm.m.7822 11 місяців тому

    Yes!!!!
    Thanks, Lama!

  • @Devlopsofar
    @Devlopsofar 10 місяців тому

    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.

  • @mathewadeyemi5389
    @mathewadeyemi5389 9 місяців тому

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

  • @peleteiro222
    @peleteiro222 7 місяців тому

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

  • @clonedmosquito
    @clonedmosquito 8 місяців тому +1

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

  • @MehmetOzgulnet
    @MehmetOzgulnet 10 місяців тому +2

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

    • @leciel87
      @leciel87 6 місяців тому

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

  • @huletech
    @huletech 10 місяців тому

    thank you its really amazing project

  • @eprisrichardson678
    @eprisrichardson678 Місяць тому

    I went down a 20 minute rabbit hole looking at the artwork of the person who did the astronaut illustration. 😂

  • @iamcrypticcoder
    @iamcrypticcoder 11 місяців тому

    Thank you so much lama

  • @Reel_InsightYT
    @Reel_InsightYT 11 місяців тому

    Thank you so much lama

  • @trend_tech4500
    @trend_tech4500 9 місяців тому +1

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

  • @rootbindev
    @rootbindev 11 місяців тому

    well done lama

  • @sylvesterasiedu
    @sylvesterasiedu 10 місяців тому +1

    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)

  • @mehrdad1068
    @mehrdad1068 11 місяців тому

    Thank you my teacher 💚♥️

  • @mahiddandamun5570
    @mahiddandamun5570 10 місяців тому

    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.

  • @tahaahmadi7446
    @tahaahmadi7446 10 місяців тому

    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

  • @viral.clips99
    @viral.clips99 3 місяці тому +2

    it does not work if middleware.js is in the root but works if it is in src directory

  • @tejasukalkar2199
    @tejasukalkar2199 10 місяців тому +2

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

  • @Farhathameera-rm3fs
    @Farhathameera-rm3fs 10 місяців тому +3

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

  • @lautarososa9581
    @lautarososa9581 9 місяців тому +2

    in the pagination fetch.
    Error: MongoServerError: BSON field 'skip' value must be >= 0, actual value '-2'
    here is an solution. in all fetch that includes the BSON find() and skip();
    .skip(-2 + (itemsPerPAge * page) );

  • @manuQAE
    @manuQAE 11 місяців тому

    Full amazing!

  • @MisterDasturchi
    @MisterDasturchi 6 місяців тому

    Thank you so much

  • @juniorMr
    @juniorMr 11 місяців тому

    Lama you re the one

  • @gamerbenja695
    @gamerbenja695 Місяць тому

    Would you please make a video explaining how to manually update the session data after updating user information, e.g the user avatar and username

  • @jordanealmeida5986
    @jordanealmeida5986 4 місяці тому +1

    I followed the entire tutorial, but I still have an error, which unfortunately I can't resolve, when adding the middleware it doesn't redirect.
    Server Error
    TypeError: Invalid URL
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    help me :(

  • @ehsansafari
    @ehsansafari 7 місяців тому +1

    @LamaDev thanks for video. can you share VSCode theme?

  • @memduhcevik
    @memduhcevik 10 місяців тому

    Awesome bro

  • @mohdsahil226
    @mohdsahil226 10 місяців тому +1

    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?

  • @naseeemkhan
    @naseeemkhan 11 місяців тому

    Salute to you❤

  • @mohitcodeswell
    @mohitcodeswell 11 місяців тому

    Sahi hai! 👍

  • @theangelofspace155
    @theangelofspace155 11 місяців тому

    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.

  • @MTT06
    @MTT06 9 місяців тому

    Cool

  • @clonedmosquito
    @clonedmosquito 8 місяців тому +2

    This video is good if you dont skip things. if you skip... too much hassle. I took complete code from github and it did not run because .env missing. Now in order to find all info in .env you have to watch whole video to find. Then he changed password 123456 to hash. Not sure when he did. Probably somewhere. You tube is not easy to move slowly the cursor. if you jump it skips lots of frames.

  • @brutal-gaming-yt
    @brutal-gaming-yt 10 місяців тому +2

    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  10 місяців тому +2

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

  • @skshoaibff
    @skshoaibff 3 місяці тому

    Please also make video on vercel deployment please sir 😊

  • @mehdihassanpoor396
    @mehdihassanpoor396 6 місяців тому

    so useful

  • @DieuTran-ox7yb
    @DieuTran-ox7yb 11 місяців тому +64

    Why don't you use tailwind and typescript? 😞

    • @TC-gv9fs
      @TC-gv9fs 11 місяців тому +2

      I had the same question ⁉️

    • @rufusr5880
      @rufusr5880 11 місяців тому +30

      Why should he?
      Tailwind is the worst cancer I have seen in web dev for ages.
      Typescript is usefull but slowly looses popularity lately. Probably not used to keep it simple

    • @Chriss-cn1ch
      @Chriss-cn1ch 11 місяців тому

      ​@@rufusr5880useless comment. No offense

    • @suliman8273
      @suliman8273 10 місяців тому +18

      Pure js and css is easier than headache of Typescript

    • @iamsaurabhmaurya
      @iamsaurabhmaurya 10 місяців тому

      ​@@rufusr5880tailwind is nothing is just css people just hate it for no reason

  • @AshokKumar-k3n6h
    @AshokKumar-k3n6h 2 місяці тому

    Thanks for this wonderful tutorial. Please let me know how to return an error like incorrect email or password from auth.js to actions.js because as per your code it is not throwing an actual error to login page.

  • @russellwilliams2888
    @russellwilliams2888 8 місяців тому

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

  • @clonedmosquito
    @clonedmosquito 8 місяців тому

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

  • @zulqadarabbas7567
    @zulqadarabbas7567 5 місяців тому

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

  • @kylo2073
    @kylo2073 10 місяців тому +4

    is it just me, facing error when try to login 3:21:40 , entering correct username and password but the wrong credentials keep appear, and when i reload the page then its redirect me to dashboard instead. tried github code, and still the same

    • @maitregims52
      @maitregims52 10 місяців тому +1

      me too

    • @kimanhdo3008
      @kimanhdo3008 10 місяців тому

      do you have a solution? I have same problem

    • @andreiduduman5322
      @andreiduduman5322 10 місяців тому +2

      There is a fix on the Github repo on the Pull Requests. All you have to do is in the authenticate function is set the redirect to false and manually redirect outside the try catch block.
      export const authenticate = async (prevState, formData) => {
      const { username, password } = Object.fromEntries(formData);
      try {
      await signIn('credentials', { username, password, redirect: false }); // add redirect false
      } catch (err) {
      return 'Wrong Credentials!';
      }
      redirect('/dashboard'); //manually redirect
      };

    • @dimakolesnikov2034
      @dimakolesnikov2034 10 місяців тому

      @@andreiduduman5322 still doesnt work for me after fixing it. Saying wrong credentials

    • @kylo2073
      @kylo2073 10 місяців тому

      @@andreiduduman5322 thank you! its works

  • @coralioballester
    @coralioballester 10 місяців тому

    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

  • @TemmyCodingLifestyle
    @TemmyCodingLifestyle 10 місяців тому

    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

  • @mediacreatif
    @mediacreatif 10 місяців тому +1

    It's a pity you did not use TypeScript in this project !

  • @nagaraj-biradar
    @nagaraj-biradar 10 місяців тому

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

  • @jagadeeshgade6309
    @jagadeeshgade6309 10 місяців тому

    Thanks !!!

  • @veztre
    @veztre 9 місяців тому

    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

  • @너굴맨-n1d
    @너굴맨-n1d 9 місяців тому

    1:46:40 checkpoint

  • @pauladam9317
    @pauladam9317 11 місяців тому

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

  • @ChrisClark-z3j
    @ChrisClark-z3j 10 місяців тому +2

    Great Tutorial! I am getting an Error: NEXT_REDIRECT thrown after auth (even though the username hash and mongo connection are all OK). try catch block in the authenticate function in actions.js If i remove the catch all works fine. Anyone else have this ?

    • @phucbdvn
      @phucbdvn 10 місяців тому +1

      I also get this problem. I am trying to find the solution. Please share with me if you fixed it. Thanks.

    • @fatihdonmez5338
      @fatihdonmez5338 10 місяців тому

      Did you solve the problem?

    • @tianhaoshao7355
      @tianhaoshao7355 10 місяців тому

      I get same issue, did anyone figure out why?

    • @muhammedzahidm1029
      @muhammedzahidm1029 10 місяців тому

      faced the same problem :(

    • @maitregims52
      @maitregims52 10 місяців тому

      me too

  • @FerSpanos
    @FerSpanos 7 місяців тому

    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?

  • @elahehs2674
    @elahehs2674 8 місяців тому

    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?

  • @gmancodes
    @gmancodes 10 місяців тому

    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
    @talhaamirali3786 10 місяців тому

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

  • @nastybadger-tn4kl
    @nastybadger-tn4kl 8 місяців тому

    Also using defaultValue not selected

    Yes
    No

  • @awais_ansarii
    @awais_ansarii 2 місяці тому

  • @ПетрЛипатов-ф9п
    @ПетрЛипатов-ф9п 3 місяці тому

    second half is really confusing, changing server actions into api routes, not completing them, jumping into implementation of auth

  • @ZainRamzan-pt8cm
    @ZainRamzan-pt8cm 9 місяців тому

    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

  • @RickyJohw
    @RickyJohw 2 місяці тому

    The margin adding to 'cat' doesn't work, cause span is an inline element. Have to change it to a block element or something.

  • @sced17
    @sced17 10 місяців тому

    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?