NextJS App Router: Learn Modern Web Development in 1 Hour

Поділитися
Вставка
  • Опубліковано 8 лют 2025

КОМЕНТАРІ • 311

  • @joshtriedcoding
    @joshtriedcoding  Рік тому +45

    Happy to hear y’all enjoy the video so much, cheers

    • @OnlyJavascript
      @OnlyJavascript Рік тому +3

      please make a tut on i18n.

    • @nofeah89
      @nofeah89 Рік тому

      Brilliant stuff mate really enjoyed it thanks!

  • @yzz9833
    @yzz9833 Рік тому +36

    You're literally a younger Jack Herrington, your content is so clear and enjoyable. Thanks Josh, you've been helping me a lot with all these new changes :)

  • @akhilscamp1905
    @akhilscamp1905 Рік тому +18

    The way you explained app routing with comparison of next js 12 by drawing is phenomenal. No tutor does this often

  • @MietekPomywacz
    @MietekPomywacz Рік тому +1

    Josh I absolutely love you. You have explained these topics way better than anyone I've seen before and in only just above 1 hour, insane. Thank you very much :)

  • @adityaprakashgupta
    @adityaprakashgupta Рік тому +130

    Please make full course of next js 13.4 from beginner to Advanced, from A to Z

    • @badbeatslayer
      @badbeatslayer Рік тому +1

      Yes please!

    • @naufalnasrullah6965
      @naufalnasrullah6965 Рік тому +3

      Good idea
      I think i should learn it, next js is the most unpredictable framework and always grow so fast

    • @prashlovessamosa
      @prashlovessamosa Рік тому +2

      He had already created of 8 hours

    • @brayancuenca6925
      @brayancuenca6925 Рік тому +4

      Bro just read the docs

    • @codybishop7526
      @codybishop7526 Рік тому

      Next changes things so fast, he’d be remaking the same tutorial in 3 months

  • @vasilvasilev6225
    @vasilvasilev6225 Рік тому +11

    Your channel is a blessing, you have literally summarized in 1 hour what took me 3 days of navigating the documentation. It served as the perfect recap before proceeding with my personal project!

  • @cristianomartins96
    @cristianomartins96 Рік тому +35

    Hello Josh, taking into account that the ecosystem around React/Next is always evolving, I think that something of great value would be to think of a base project (as simple as possible!) that would integrate the main (critical) stages of a project (routing, login, CRUD...) in a tutorial (like the one you did for 8 hours in Next) and whenever there were updates that substantially changed a technology (like now in version 13.4 of Next), you would redo this same base project, demonstrating how changes in technology have changed the old way of developing a project.
    I believe that, given the progress of things in the React/Next ecosystem, 1 video of this type per year would be enough (even to separate the hype from the real).
    I know you always make a theoretical introduction in your videos about the past and present of theologies, but the idea of ​​thinking about a single/base project that would be rewritten over time (perhaps once a year), would bring 2 things that very is hardly found on the Internet (or at least I haven't found it yet):
    - 1st, a repository, in the form of a playlist, of the evolution of a technology, always based on the same project. Which 10 years from now would be something unique on UA-cam.
    - 2nd, if possible, would you show how to refactor this same project to its most recent version. Since refactoring code is something that is rarely found.
    Greetings from Portugal.

    • @muhammadayaan3105
      @muhammadayaan3105 Рік тому +1

      Loved your detailed reviews 😊, let’s take a break and visit Dubai 🎊

    • @j0ck1985
      @j0ck1985 Рік тому +2

      Thanks for your detailed comment!
      Like this approach ❤

    • @xii.ae.88
      @xii.ae.88 Рік тому

      Exceptional review and a much-needed concept for tutorials.

    • @usd00
      @usd00 Рік тому

      You asked for what is one of the rarest thing on the internet. Great!

  • @ilan117
    @ilan117 Рік тому +12

    Josh ❤ I have 8 years experience in web development …… your passion is impressive and amazing. Thank you for teaching us , explaining and giving us the best tuts in nexjs new features. Looking forward to see more …… maybe even a full course 🙏 btw … I love your screen background image … dare to share it with us 😅

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +7

      Thanks man. The image has a personal meaning so I won't make it public. Appreciate your kind words

  • @AbdullahTBukhari
    @AbdullahTBukhari Рік тому +1

    Watched it all in a single go and absolutely blown away by it, very well explained, amazing!!! 👏🏻👏🏻👏🏻

  • @brice74
    @brice74 Рік тому

    Thank you so much!
    I've come across your videos several times, and they've helped me every time!
    I rarely write comments, but you help me a lot in my internship, so you deserve it!
    May the algorithm be with you 🙏

  • @agamgupta3316
    @agamgupta3316 Рік тому +1

    Explanation of API routing was awesome man!!, you just earned a new subscriber.

  • @mylliej3695
    @mylliej3695 Рік тому

    this is the best nextjs app router on youtube! thank you!!! you are awesome at explaining and teaching omg

  • @SamHartmannCom
    @SamHartmannCom Рік тому

    That's a huge summary! Thanks a lot Josh!
    One of very few good and up-to-date overviews of Next 13+ / App Router I've found so far!

  • @ameperdue6953
    @ameperdue6953 Рік тому

    Great Tutorial, thanks Josh. You have outstanding spoken English language ability and the pace of your tutorials is just perfect.

  • @michael_hackson_handle
    @michael_hackson_handle Рік тому

    Thanks Josh. This is a great introduction for using Next.js routes. Very clear and precise!

  • @mrth38
    @mrth38 Рік тому

    Thank you very much for the video Josh. It cleared up almost all questions of new features of Next.js 13. Felt so cool that I’ve spent these 73 mins with you!

  • @rahimco-su3sc
    @rahimco-su3sc Рік тому +1

    i was confused about the new next js 13 features , now i am comfortable with them because of this video || thanks a lot

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

    thx Josh I was looking exactly for the dynamic routes part and u perfectly explained it

  • @bobman6966
    @bobman6966 Рік тому

    I just subscribed to your channel Josh. I'm quire experienced working with nextJs, but I would give you thumbs up for doing good job. Great explanations.

  • @GoblinDigital
    @GoblinDigital Рік тому

    I love you bro, I'm truly thankful for this, for some reason I was really struggling with getting my routing to work and you explain this very well.
    Just started at a startup yesterday and I know React TS / Vite, etc but I've never done Nextjs and they wanted me to create a ticketing app with Nextjs 13 and this is really saving my ass.
    (Also a lot of people in long form tutorials skip the installation part, I think including it and explaining it like you do is the cherry on top)

    • @hersheynaik3029
      @hersheynaik3029 Рік тому

      Hey
      You said you're working for a startup. How much web development did you know before getting into it?
      Sorry to bother you..

    • @GoblinDigital
      @GoblinDigital Рік тому

      @@hersheynaik3029 No bother, I have a bachelor in Computer science, I had a gig in University too and have roughly 3 years of experience, but years don't really mean much, its what you do with it. I've definitely squandered a lot of time. There's so many factors to this and I appreciate the question but don't compare yourself to others usually they will not give you the whole picture and it might make you feel bad.

  • @hayttlesds
    @hayttlesds Рік тому

    Wow, it is a whole content about new features NextJS. Thanks for that.

  • @austintochukwuasoluka1502
    @austintochukwuasoluka1502 Рік тому +1

    You are exceptional!!!
    Few tutors make difficult concepts look so easy.

  • @mmmmozaffar2720
    @mmmmozaffar2720 Рік тому +1

    Great content , amazing efforts and valuable info , well done bro you are marvelous .
    following you from Syria keep great working you deserve the best .

  • @johnifemezuo2641
    @johnifemezuo2641 Рік тому

    Thanks Josh for taking the time to create this amazing tutorial. it is incredibly helpful.

  • @ttirasx
    @ttirasx Рік тому

    digs into every detail, very talented tutor gives the best content and the best part is you can watch with normal speed. now i am implementing the sitemap to my site, thank you josh.

    • @joshtriedcoding
      @joshtriedcoding  Рік тому

      glad you like it and took away something for your own project

  • @AnkitRathi7
    @AnkitRathi7 Рік тому

    Thanks for the video. Got to learn a lot of things from basic as a complete beginner to nextjs. Clarity in concept in your video is awesome.

  • @timbersofwrath
    @timbersofwrath Рік тому

    Bro you the best! Don’t stop, I’m learning a lot from you.

  • @AlistairCooperMusic
    @AlistairCooperMusic Рік тому

    This is fantastic! Really well explained. Thank you!

  • @muhafizahmed9964
    @muhafizahmed9964 Рік тому

    thanks man you deserve 1M likes in this video the way you have explained all the topics were amazing and should be appreciated

  • @martapfahl940
    @martapfahl940 Рік тому

    Und ein weiterer starker Kanal, der NextJS Content macht, danke Dir man =)

  • @codinginflow
    @codinginflow Рік тому

    20:30 From what I know, retry doesn't actually execute API requests in server components again. At least it didn't when I tried it out. It just tries to rerender the component.

  • @LucasWanderleydaFonte
    @LucasWanderleydaFonte Рік тому

    Thanks for producing such a high quality content for free

  • @AlexanderBelov-y8o
    @AlexanderBelov-y8o Рік тому

    I only needed the routing part. Thank you!

  • @artu-hnrq
    @artu-hnrq Рік тому

    Really rich and well done walkthrough! I like your pace
    It was nice to enlight what was confusing yet

  • @aaaaanh
    @aaaaanh Рік тому

    amazing vid covering the plethora of stuff happening in 13.4, gonna base on this to migrate my app to the app directory

  • @3ngaging
    @3ngaging Рік тому

    Man, you are just the tutorial I was looking for.. easy to understand and good explanation. Keep going that way and thnx so much ❤

  • @glowing_flare
    @glowing_flare Рік тому +1

    I really enjoy your videos, you're a beast, one thing that is notable though is that you need to increase the volume a little bit when editing 'cause your voice was kind of inaudible, I had to have my speakers go up to 100% to listen to what you say clearly, but other than that your video is very well done.

  • @codinginflow
    @codinginflow Рік тому

    I'm currently refactoring my project from /pages to /app dir and I have to say, it was easier than I expected. My code is definitely not optimal yet but getting rid of /pages was pretty quick.

    • @joshtriedcoding
      @joshtriedcoding  Рік тому

      Yeah overall it works pretty well, especially because incremental adoption is so easy and there are some codemods for certain migrations as well, e.g. the link component

  • @simbarashemaunga5575
    @simbarashemaunga5575 Рік тому

    Thank you for the demystification, we appreciate you.

  • @NZTechArc
    @NZTechArc Рік тому

    This is one of the best tutorials I have come across and one of the few about V13
    This is awesome I learned a ton even though I am not using typescript.
    This Tutorial for App Routing is amazing
    As a side:
    PLEASE DO NOT PUT FILES ON YOUR DESKTOP!
    desktop is for shortcuts
    create a workspace folder and then inside that a platform folder e.g. /amplify and then a project folder. personally I have a git folder too to separate my working folders from my stored examples codes.
    but NOT THE DESKTOP!

  • @AlinaTudose
    @AlinaTudose Рік тому

    This was perfect! Thanks for the quick, comprehensive and easy to understand run through 🎉🎉

  • @BenZekriNBENZ
    @BenZekriNBENZ Рік тому

    I love you Man ❤ , that was so good tutorial especially after the break changes in Nextjs 13.4, thank youu

  • @jjrise
    @jjrise Рік тому

    your videos are improving week by week... solid work!

  • @hotwings9382
    @hotwings9382 Рік тому

    Thank you, everyday I'm being validated that the php server is still a powerful way to serve websites for small to medium sized businesses.

  • @vladislavgorovenko
    @vladislavgorovenko Рік тому

    Hey, thank you for really great intro to all these tools.

  • @lpanebr
    @lpanebr Рік тому

    It's lame that I can't leave a like everytime I watch this. Thanks!

  • @henrythomas7112
    @henrythomas7112 Рік тому

    I extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

  • @b3rking
    @b3rking Рік тому

    magnificent, magnificent... at this pace i won't need to buy a udemy course. THANKS GREAT MAN

  • @miguelyoutube100
    @miguelyoutube100 Рік тому

    Great video, Josh. Thank you very much for sharing 😊

  • @pjholmes2
    @pjholmes2 Рік тому

    Excellent overview. Thank you !

  • @AntNZ
    @AntNZ Рік тому

    Brilliant video man, thank you so much!! Keep em coming 🙌

  • @saman6199
    @saman6199 Рік тому

    Thanks Josh for amazing walkthrough, really appreciate your hard work

  • @alexanderpoker6655
    @alexanderpoker6655 Рік тому

    Man, thank you so match for such explanation

  • @lucasfernandes9381
    @lucasfernandes9381 Рік тому

    I found your channel recently and I've watched several videos, your content is too good and the way you deliver it is incredible. I would like to know if you intend to take a course with Next more beginner friendly.

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +4

      Yessir, now that the app dir is stable I think there is no better time to do just that. Happy to hear that, cheers

  • @Luxcium
    @Luxcium Рік тому +1

    It's hard for me to imagine that he is alone in front of a camera he is definitely talking both like he was in front of a large audience and like if he was doing a special session just for one person (the viewer -- Me from my perspective or you from your perspective) he is engaging and I will never be able to stop saying how his energy is efficiently achieving such amazing results in terms of making us feel empowered 🎉🎉🎉🎉

  • @rashzh5502
    @rashzh5502 Рік тому

    Amazing tutorial! Thank you Josh!

  • @RakibAhmed-vn9hs
    @RakibAhmed-vn9hs Рік тому +1

    You are doing a great job. Thank you ❤🎉

  • @amankumarjagdev
    @amankumarjagdev Рік тому

    Very Comprehensive tutorial!

  • @snivels
    @snivels Рік тому +17

    What vs code extension do you use to generate those react snippets?

    • @gina7898
      @gina7898 Рік тому +1

      I'm also curious

  • @Nightcomer
    @Nightcomer Рік тому

    Well isn't this beautiful. A young, motivated fellow explaining all the new stuff to us lazy veterans.

  • @axon256
    @axon256 Рік тому

    As always, your content is fucking amazing!

  • @Ali-kx7jf
    @Ali-kx7jf Рік тому

    I wish I could find your channel earlier..
    Just subscribed 🎉 best videos keep it up 👊

  • @franinja080
    @franinja080 Рік тому

    Banger video, more of these!

  • @amershboul9107
    @amershboul9107 Рік тому

    Thank you for your amazing content , very useful

  • @sulavbaral9972
    @sulavbaral9972 Рік тому

    Hi Josh this was a solid video! Can you make a video where you work with a custom backend like express like you had mentioned in a video earlier and show us how everything works while we have a custom backend!

  • @jummagaming6133
    @jummagaming6133 Рік тому

    Thank you so much, Josh❤
    please make a typescript tutorial

  • @prashlovessamosa
    @prashlovessamosa Рік тому

    Awesomely Explained.

  • @rakeshpk4991
    @rakeshpk4991 Рік тому

    Thank you very much for this tutorial!!

  • @ayush_language9869
    @ayush_language9869 Рік тому

    I am waiting for this video. Make another video on API routes in detail. Thank you

    • @joshtriedcoding
      @joshtriedcoding  Рік тому

      What do you think would be important in that video that wasn't mentioned here?

    • @ayush_language9869
      @ayush_language9869 Рік тому

      @@joshtriedcoding Difference between express and API routes and connection MongoDB in react vs using API routes in next 😊

  • @siya.abc123
    @siya.abc123 Рік тому

    Josh! If you ever find yourself in South Africa, let me know I'll buy you your favourite beverage(s) man. Keep up the awesome content

  • @coolguyike
    @coolguyike Рік тому

    Very helpful, thanks!

  • @jayng4028
    @jayng4028 Рік тому

    Good job Josh. Thank you 👏

  • @devkasunlakshitha
    @devkasunlakshitha Рік тому

    Thanks for doing this video.

  • @kc-bytes743
    @kc-bytes743 Рік тому

    Your are awesome men ,your are game changer

  • @MatteoBelleri
    @MatteoBelleri Рік тому

    Amazing content!

  • @codinginflow
    @codinginflow Рік тому

    I wrote a comment about an axios bug I encountered inside server components. The spam filter blocked it because it included a codesandbox link. Maybe you can confirm the comment so it shows up?

  • @gregthomas5887
    @gregthomas5887 Рік тому +5

    I'm really curious how you're able to keep on producing such high-level content so fast everyday. Please reveal to us that you're an AI and who's your maker. :p

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +4

      The entire thing is just AI-generated, the AI overlords don't want you to know that though

  • @Yuuffyy
    @Yuuffyy Рік тому

    Amazing content, thanks!

  • @giannifed
    @giannifed Рік тому

    Great tutorial. Thank you

  • @EasinTanvir
    @EasinTanvir Рік тому

    at 37:29 Josh show how to cash with revalidate but he used external api like JsonPlaceholder for caching but when I try to req my own api like (/api/post/route.js) for {cache:"no store"} its work fine but when I try to use {next:revalidate:10} or {"force-cache"} its show an error "prerender error". But for external api its work fine, the error only show when I try to req to my own api folder.
    how can I fix that

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

    Great tutorial 😊

  • @Theokondak
    @Theokondak Рік тому

    I have been trying to solve all these issues in my portfolio for the past couple of days. Would be interesting to see your video to compare our approaches.

    • @joshtriedcoding
      @joshtriedcoding  Рік тому

      For sure, cheers

    • @Theokondak
      @Theokondak Рік тому

      @@joshtriedcoding Hey Josh, thanks for replying.
      The video was very interesting and in a big part I followed the same methodology. Your performance tips are very useful and are definitely a better implementation than my own ( i currently fetch a single post when a post is requested instead of prefetching the posts).
      One thing that I don't see covered much, is the not-found handling and redirections.
      I have found a solution my own, but I would be very interested to see how you would handle it.

    • @joshtriedcoding
      @joshtriedcoding  Рік тому

      @@Theokondak Ah right the not found. Before the app router was stable, there was some workaround required to get it to work. I believe they've fixed in since then, all you need to do now is create a not-found.tsx at the root level and you should be golden

  • @Goofer
    @Goofer Рік тому

    Thanks man.

  • @Khusyasy
    @Khusyasy Рік тому +3

    Thank you, this video is very helpful for me because I have just recently tried to use Next.js. Where do you get the snippets for creating for pages and layouts?

  • @JeezLeWeeze
    @JeezLeWeeze Рік тому

    You're the man!

  • @ethanhill2016
    @ethanhill2016 Рік тому +3

    Hey man! Brilliant video. What extension or custom snippet are you using for your "rc" snippet please?

    • @joshtriedcoding
      @joshtriedcoding  Рік тому +2

      Here you go:
      Step 1: Paste the following into your Settings; User Snippets; typescriptreact.json: pastebin.com/PWzQGH08
      Step 2: Type "fc" and hit TAB.

    • @ethanhill2016
      @ethanhill2016 Рік тому +1

      @@joshtriedcoding Works great! Thanks very much.

  • @PilatoByte
    @PilatoByte Рік тому

    Great video, learned a lot

  • @noahginsburg6140
    @noahginsburg6140 Рік тому +1

    Around the 12 minute mark you talked about context and server components. Could you link the example for using context by way of a "use client" provider wrapping your server components? Thanks.

  • @Hurleywflow
    @Hurleywflow Рік тому

    Hello, this is a valuable tutor for me.😋

  • @nro337
    @nro337 Рік тому

    Great video!

  • @atanu_mojumdar
    @atanu_mojumdar Рік тому

    Quality Content ✨

  • @imkir4n
    @imkir4n Рік тому

    Awesome josh!!!

  • @kynjal23
    @kynjal23 Рік тому

    Thank you josh 🙏🏼💯

  • @dsantos74747
    @dsantos74747 Рік тому

    Great video! I'm stuck trying to add interactivity to an app that I would like to be mostly server-side. You said you would provide an example of how to do this in the description, is there any chance you could add it please?

  • @reactDevelopment
    @reactDevelopment Рік тому

    hello josh, i actually started learning next js as completely new and have no experience in Nextjs 12 .

  • @thekaasim
    @thekaasim Рік тому

    Hmmm. Thanks a lot, you deserve more than 1M likes from me. You got one new subscriber.

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

    Awesome, thanks !

  • @bhanujatinsinghbainsla5860
    @bhanujatinsinghbainsla5860 Рік тому +1

    really helping video, also what extension U are using for the typescript ( fc ) ?

  • @megamind452
    @megamind452 Рік тому

    Well explained ❤

  • @orangeclayproductions160
    @orangeclayproductions160 Рік тому +2

    At 41:23 - I dont get the hover descriptions for the dynamic and revalidate constants. Are you using another extension for that?

    • @MissingTricks
      @MissingTricks Рік тому +1

      same issue. did you find any solution?