Next.js App Router: Routing, Data Fetching, Caching

Поделиться
HTML-код
  • Опубликовано: 18 янв 2025

Комментарии • 318

  • @NobleOsinachi
    @NobleOsinachi Год назад +69

    Bro just explained half of my Next JS problems in 15 mins! Wow! This guy is good! 👍👍👍

  • @stillready6405
    @stillready6405 Год назад +6

    I didn't know you have a RUclips channel. I was trying for hours, reading the documentation and failed. And here you explain everything in just 15 minutes. Thank you for the video!

  • @Vextor007998
    @Vextor007998 Год назад +20

    This guide really answered almost all of my questions, it's short and straightforward. You're doing a great job.

    • @NobleOsinachi
      @NobleOsinachi Год назад +1

      Same thing I said. Like it was really packed with information and yet short.

  • @badalsaibo
    @badalsaibo Год назад +20

    This was an excellent demo. Concise, brief and to the point. Thanks Lee!

    • @leerob
      @leerob Год назад +2

      Thank you, this made my day 😁

  • @ryanp787
    @ryanp787 Год назад +34

    Love NextJS!!! Y’all are doing amazing innovative changes and I can’t wait for the app folder to be in production!! I’m hopping it’s coming in the near future. Keep up the great work team!!

    • @wij8044
      @wij8044 Год назад

      Literally, the only thing new was the last stuff with Metadata

    • @SheeceGardazi
      @SheeceGardazi Год назад

      nothhing innovate ... it has been part of nuxt.js since for ever ...

    • @kyonas6047
      @kyonas6047 Год назад

      Its now stable!! Horray just as i got back to next js

    • @tabletuser123
      @tabletuser123 Год назад +1

      Ai generated comment

    • @ryanp787
      @ryanp787 Год назад +2

      @@tabletuser123 nope I’m real lol. Your account name looks AI generated

  • @browsing1598
    @browsing1598 8 месяцев назад +1

    Dude you legit saved me. Was spending so much time on this. This is the only video that helped me

  • @advem.
    @advem. Год назад

    Light years ago music was on vinyl records, then on CDs and now it's streamed from cloud.
    Movies were on VHS, later DVDs and BlueRays - now it's streamed from cloud.
    Video games... can't ever remember all those consoles but now it's all digital and also you can stream playing in cloud.
    Finally webApps - your UI had been rendering on your device's broweser for days or rendered server-side...
    ...until now.
    It's time for streaming era even in webdev with UI Streaming!
    Simply render component, cache or revalidate it and serve to clients! Just this tiny piece!
    FINALLY
    I am sooooo hyped for the stable release you can't image. Love what u doing guys

  • @BenZekriNBENZ
    @BenZekriNBENZ Год назад +4

    Thanks Nextjs team, you're making the world of dev a better place and without headache.

    • @depression_plusplus6120
      @depression_plusplus6120 Год назад

      How do you manage localstorage in next. As we can't access it since next prerenders on server, right?

    • @BenZekriNBENZ
      @BenZekriNBENZ Год назад

      use LocalStorage in a client component 'use client'@@depression_plusplus6120

  • @mohitnagpal
    @mohitnagpal Год назад +15

    I love Next.Js. Keep on going guys.

    • @leerob
      @leerob Год назад +3

      Thank you!

  • @epzoid7273
    @epzoid7273 Год назад

    thank you so much for this video, i am new to nextjs and i know noone that knows nextjs 13, so they couldnt help me with a problem i got with routing. but then you came!

  • @appscastle
    @appscastle 9 месяцев назад

    This guy should keep posting videos, the examples and the way he explain things are just amazing

  • @christopheanfry
    @christopheanfry Год назад +7

    Love it make me want to use nextjs every single day. You’re an amazing team with an amazing product. Huge kudos for all of you and a special thank to you Lee for your videos

    • @leerob
      @leerob Год назад +4

      Appreciate the kind words :)

  • @tomasburian6550
    @tomasburian6550 2 месяца назад

    Love how you're using TS along with the code. That's real world coding.

  • @AdeelEjaz
    @AdeelEjaz Год назад +18

    I have been using app router for a few months on few of my production projects, and very impressed with the results. I'd love to see videos on how to implement GTM/GA, and posting data e.g. updating user details in a form.

    • @leerob
      @leerob Год назад +1

      Great suggestions!

    • @aneriemmanuel7243
      @aneriemmanuel7243 Год назад

      Yeah this would be great, seems work on mutations is still ongoing for now…. But it seems the app directory is reaching stable, started a new SAAS project with it and hopefully it doesn’t end in tears 😂

  • @2an_sound
    @2an_sound Год назад +2

    Thank you! I'm not an expert in NextJS and in their docs for app router, couldn't find any mention of utilizing params to get the id from a dynamic route. I was messing with headers, pathname etc when params would have been fine. You helped me so much. Now I'm just trying to figure out why pages in my dynamic routes don't use the root layout (the page itself takes over the whole screen and the root layout is gone)

  • @exprove2496
    @exprove2496 Год назад +9

    In 13:35 it's mentioned that "these are automatically deduplicated". If in getRepo was passed fetch({ cache: no-store }) would generateMetadata and Page make only one or two requests each refresh?

  • @mohamedheythembenhassen8337
    @mohamedheythembenhassen8337 Год назад

    Thank you so much vercel and @leerob , very short and informative video , i really like the app directory .

  • @reesebearden6566
    @reesebearden6566 Год назад

    used nextjs in my senior capstone project, it's blowing everyone away!

  • @faizanahmed9304
    @faizanahmed9304 Год назад +5

    Thank you team vercel for explaining the concepts!

  • @adimardev1550
    @adimardev1550 Год назад

    i admit, this is truly fantastic! thanks to you amazing people of vercel and to you Lee, you're awesome.
    i'd love to know more to understand fully...

  • @codinginflow
    @codinginflow Год назад +1

    Once the remaining router bugs are fixed, this will be amazing

  • @liketocode
    @liketocode Год назад +2

    Wow, never been so happy to be told I have to re-write my code base ... what's NEXT ;)
    1) As has been asked below, how do we now define a list of paths for prerendering - previously done using getStaticPaths Method? The docs do not seem to detail this specifically?
    2) Observation - the generic naming convention for Page and API routes will make searching for files during development a bit of a task?
    Thanks a million - super framework.

    • @grmn3564
      @grmn3564 Год назад

      I'm learning NextJS at the moment and I have the same question about the generic naming convention. I opted for the old routing system because I want each file to have a more descriptive name.
      I'm still trying to understand the advantages of the new routing system, so if anybody can explain, please do it! thank you :)

  • @youneshenni5417
    @youneshenni5417 Год назад

    This is the future of Web Developement!!!!

  • @FrontendMedia
    @FrontendMedia Год назад

    Thanks! Those new features are really neat.

  • @devkasunlakshitha
    @devkasunlakshitha Год назад +1

    Love these new improvements. This is why I love Next JS ❤

  • @4dev346
    @4dev346 Год назад +2

    7:55 How can I pass the data from root layout to the children.

  • @timeforrice
    @timeforrice Год назад

    Very helpful!! Hope to see more videos like this!!

  • @emeraudata
    @emeraudata 7 месяцев назад

    You just have save my project before I turn crazy, tx comrade

  • @sreeharsharaveendra289
    @sreeharsharaveendra289 6 месяцев назад

    This is the best video I found for app router! Screw all the wanna be copycats, Lee ur awesome!

  • @Paul_Aderoju
    @Paul_Aderoju Год назад +1

    Currently using this in my next project and it’s so much easier to route between pages

  • @victorekea
    @victorekea Год назад +2

    This is a great refresher and summary of all the awesome features of the nextjs app directory. I'm curious if there are any implications of setting the cache: no-store parameter on the fetch keyword.

  • @farzadali7434
    @farzadali7434 8 месяцев назад

    Excellent delivery!

  • @tilmanmarquart8744
    @tilmanmarquart8744 Год назад +2

    Super excited to use this in prod soon!😁

  • @tanmaysharma4043
    @tanmaysharma4043 Год назад +1

    Full stack industry level application tutorial needed for all the best practices and application

  • @TheDoguBati
    @TheDoguBati Год назад +1

    Can i just ask how do i generateStaticParams using prisma. Because for some reason i always get undefined instead of receiving array of ids and generates a type error when i try next/build

  • @franksonjohnson
    @franksonjohnson Год назад

    Next finally cracking Jekyll's layout feature 13 years later. But good demo of the data fetching behavior from Lee!

  • @kasper369
    @kasper369 Год назад +1

    Please make a video on, Deployment. How to optimize and the proper way to deploy your app for the wild in new nextjs 13 way

  • @harshilpatel3389
    @harshilpatel3389 Год назад +1

    Finally i get the solution of routing. Huh. Please mention this specifically clear in the your website.

  • @iwantfrens5804
    @iwantfrens5804 Год назад

    Leerob is fcking amazing!!! I love these videos!!!

  • @Steffi3rd
    @Steffi3rd Год назад +4

    Awesome!!!
    Just have a question about generateMetaData :
    We need to do a getRepo twice (inside component and generateMetaData)
    I think it's a shame that we can't make this call only once to reuse the response of the getRepo in component for the generateMetaData...
    Isn't there another way to make a single network call?
    Thanks!

    • @TwistedChaz
      @TwistedChaz Год назад

      Bingo! at least would take data from the Page params

  • @Mitsunee_
    @Mitsunee_ Год назад +2

    this video basically just combines all the previous ones and answered none of the questions I still have:
    - what kinds of metadata can you set with this new approach? What about custom metadata tags?
    - how exactly do you deduplicate fetches with cache set to "no-store"
    - how exactly do you extend the types of `fetch`? Will it mess up client components that use fetch in a useEffect? Do the changes apply outside of the app directory?
    - Do I always need to include "use client" at the top of every file in my entire repo forever or only specifically on the client components inside the app directory?
    - Can I create a folder of shared server components inside the app directory (assuming you cannot use server components elsewhere, see above question) and simply have no page.tsx in there, so no route is created, or will Next complain at the lack of a page.tsx file?
    - Does anything change for components that use something like typeof document to determine whether they are running in server/hydration or client (post-hydration)?
    - How do you pass data from a page to a layout? In Astro you import layouts yourself and thus can pass "up" data to the layout in your jsx template
    - How do you access the router object in a layout since useRouter won't work in server components? Do I still need my navigation to be a client component just so I can render the current route in a different style?
    - In addition to above question: what about something like rehype-react (assuming I do not want mdx and prefer my own implementation using unified), which currently uses hooks to render? I made it work in the old pages directory API by returning the result prop of the processSync method on my renderer, but currently this reprocesses the entire post during hydration. Is it possible to use the renderer in the server only and have client components inside the result (such as a youtube embed)?
    - Do you still plan to eventually remove the pages directory API entirely? My biggest project is currently going through a big rewrite that still uses that API and if I have to rewrite it all again I may or may not switch frameworks at that point, depending on if this app directory API works out for me in the end, which I am currently not sure about.

  • @kasvith
    @kasvith Год назад +2

    Whats the best way to handle Auth and Pass state from server to client

  • @peterlee8407
    @peterlee8407 Год назад +1

    Nice video! Could I know why every time when you type new lines of code, the "code hints" in grey colors already know what you are going to type? Any plugins abt this? Thx

  • @Gyurmatag
    @Gyurmatag Год назад +2

    What If I have some dynamic data on one route and I navigate to another route where I add to that data with a post request (for example a blog post) and If I navigate back to the previous route (without refresh) I want to see the fresh data list (post list) with the new item added? What can I use it to invalidate the cache and make Next.js to call the fetch again without refresh?

  • @Ga2-20
    @Ga2-20 Год назад +3

    What is the optimized approach for implementing Material UI in Next v13 ? :)

    • @Chiny_w_Pigulce
      @Chiny_w_Pigulce Год назад +1

      The optimized approach would be to not implement Material UI ;)

    • @Ga2-20
      @Ga2-20 Год назад

      @@Chiny_w_Pigulce what if you have large app built with MUI5 in next 12 and want to migrate to version 13

    • @abdulramonlasisi3385
      @abdulramonlasisi3385 Год назад

      I think you can extract the provider context into a wrapper component and wrap the root layout with it

  • @prateekbagrecha7012
    @prateekbagrecha7012 Год назад +1

    Could you please tell us the extensions that you are using to speed the development ?

  • @trevortylerlee
    @trevortylerlee Год назад +4

    Had an issue where halfway through development we needed a page that we did not want to use the root layout. Seems like the only way to do that is to split that one page and the rest of the site into two separate folders in the app directory, each with their own layout. Tried doing that but as a result all my imports / paths broke.
    Is there an easier way to go about creating different root layouts? Or opting out of a root layout?

    • @ooogabooga5111
      @ooogabooga5111 Год назад +1

      I have been thinking the same, on how to out out of a certain layout for a specific page that is deeply nested. Like I would like to have root: layout work and layout level 2 work but I don't want layout level 1 to be included in the same route. Like how do I avoid that. Right Now The only way of doing it seems to be, not using layouts and instead use it as components that you can import like how we did it in the old nextjs.

  • @andriidoroshenko632
    @andriidoroshenko632 Год назад +4

    What's the color scheme?)

  • @codinginflow
    @codinginflow Год назад

    Is there a difference between no-cache, no-store and next.revalidate: 0?

  • @TJMcCarty
    @TJMcCarty Год назад

    In production, in my "use client"; components, the data is cached and won't revalidate even if I follow the instructions in this video. Very annoying. How would I not cache the data in a client side component?

  • @Tantewillieja
    @Tantewillieja Год назад

    Love the app directory, made my life so much easier!

    • @leerob
      @leerob Год назад +1

      Glad to hear it!

    • @idanmasas
      @idanmasas Год назад

      @@leerob Hey Lee, can you please share with us the VSCode theme that you were using during this video?

  • @vinayak2450
    @vinayak2450 Год назад +1

    How would the app know how many ISR pages it has to store it statically first at build time?

  • @AbdulMajeed-lf5sq
    @AbdulMajeed-lf5sq Год назад +1

    using the next/link within mapping function gives hydration error. I think this is a very common issue now.. please fix it in the next update

  • @nirjoyhasanantor3149
    @nirjoyhasanantor3149 Год назад +6

    I am really excited for this update but here is a suggestion/question how can we access req/context like we did in getServerSideProps for ex: context.req/res how can we do that in new app directory I hope this all gets added if not exists and if anyone reading this can anyone tell me which theme was he using it is good

    • @JustATempest
      @JustATempest Год назад +1

      You can access requests by accepting a request as an argument to the page function.

    • @nirjoyhasanantor3149
      @nirjoyhasanantor3149 Год назад +1

      @@JustATempest Thanks For The Reply But Can You Actually Tell Me How Can I Do That?

    • @MohitSharma-rz1uq
      @MohitSharma-rz1uq Год назад

      hey i am new so i have a simple question....after next13.4 we cannot use getServerSideProps in the latest versions? we have to do it like we usually do inside the component without defining additional function right???

    • @nirjoyhasanantor3149
      @nirjoyhasanantor3149 Год назад

      ​@@MohitSharma-rz1uqYes you can define a component as a client by using "use client" in 1st line of the component

  • @RedVelocityTV
    @RedVelocityTV Год назад +3

    I'd love to see a state management video for Next13. How server data can be hydrated on client to add interaction

    • @zuma206
      @zuma206 Год назад +1

      just pass props to a client component, that simple :)

    • @RedVelocityTV
      @RedVelocityTV Год назад +2

      @@zuma206 large apps don't use prop drilling. They have their own client store

    • @random4561
      @random4561 Год назад +1

      @@RedVelocityTV I think you would just pass the props to the layout where it can hydrate the client store, just like with the current pages system

    • @najlepszyinformatyk1661
      @najlepszyinformatyk1661 Год назад

      usually, you don't need to think about state management in an old-fashioned way, now all requests are cached by default so you just need to create the function `fetchSomeShit` and reuse it. For a client-based state, you can use old approaches as well

  • @vxngp
    @vxngp Год назад +2

    This is cool but how can we use middleware inside the app dir folder? Is this already developed? I am using one on the root but I need more for my app. Thank you.

    • @leerob
      @leerob Год назад

      Middleware is supported!

  • @jayantrawat5961
    @jayantrawat5961 7 месяцев назад

    Just curious to know the last part (SEO) of the video, Is it okay to fetch same data through API twice on same page? Or is it working in a way I don't understand

  •  Год назад

    why I can not get fetching on server component working - nothing better than - error SyntaxError: Unexpected token < in JSON at position 0
    tried everything. Api routes in page/api

  • @qwerty-or1yg
    @qwerty-or1yg 11 месяцев назад

    I'm using app router. What if I want to display a sidebar on all /blog/[id] pages and keep main layout for all other pages? I've tried creating a separate layout for /blog, but it seems to inherit root layout as well, so I'm not too sure what would best approach would be? Somehow conditionally render a layout depending on a route?

  • @sean_reyes
    @sean_reyes Год назад

    Is it possible to register a path to the router? Where it should scan files that it will register as routes?
    Imagine a nextJS library that scaffolds the entire authentication feature… it will allows users to visit /login page… how should that package tell NextJs that a page exists in this path and it should include this path in creating the route.

  • @Ga2-20
    @Ga2-20 Год назад +1

    Can I load data in layout.tsx and pass some of the data as a props to page.tsx which is layout children?

  • @brahimo4701
    @brahimo4701 11 месяцев назад

    is there a way to combine between getting the data from a server component and the use of "use hook" on the client component to avoid passing props??

  • @olraclem
    @olraclem Год назад

    very well explained! just wow

  • @wfl-junior
    @wfl-junior Год назад +1

    I can't wait to use the app directory stable

  • @wouterdeen
    @wouterdeen Год назад

    Extremely helpful video, thank you!

  • @constantinefragkos4265
    @constantinefragkos4265 Год назад +1

    how is it close to stable when we dont even have an implementation for data mutation?

  • @ChungNguyễn-g6c
    @ChungNguyễn-g6c 11 месяцев назад

    Thanks for sharing! I am confusing what different between images in source code and in public folder (performance, bundle size, ... ) and what is the best practice?

  • @redhood7105
    @redhood7105 Год назад

    Video about auth with new Next would be nice. How to protect routes and such

  • @AhmadMughal1
    @AhmadMughal1 Год назад

    I have but one question which i am currently having an issue with and that is if the data is being cached and then we go to dynamic route such as blog/1 we can access the id through params but is there some way to use the data that exists inside the cache already to also be sent to that so i can access that data inside my dynamic routes or do i have to refetch the data again inside that dynamic route?

  • @blahblahblah-u3m
    @blahblahblah-u3m Год назад

    @vercel. I want to use the caching system like pinia or redux. it there a tutorial that explained it that way. so when I fetch something from a child node I can get it from a parent node somewhere else.

  • @over1498
    @over1498 Год назад

    Can you not fetch data from the dynamic pages?
    I am trying to simple read a md file using fs, so it needs to be a server component. The whole site is statically generated, but the dynamic route pages are not 🤔so should I get that data on the page.tsx file, then pass it alll the way down to the [docId] page?

  • @predaytor
    @predaytor Год назад +1

    What’s icon pack is this? Vscodd

  • @rochakravi
    @rochakravi Год назад

    I am not able to fetch the data with this technique and I am getting errors like
    Unhandled Runtime Error
    Error: unable to get local issuer certificate

  • @virendrapatel775
    @virendrapatel775 Год назад

    Is it good to fetch data in both functions
    Page and genratemetadata
    How to reuse the same data when i am using axios

  • @maheshpratap5054
    @maheshpratap5054 Год назад

    Pages are reloading while navigating between routes using the component in app router! Is there any fix for this?

  • @nayyyhaa
    @nayyyhaa Год назад +1

    this is BEAUTIFUL!!!!!

  • @versaleyoutubevanced8647
    @versaleyoutubevanced8647 Год назад

    very straightforward, love it

  • @2222974Vairus
    @2222974Vairus Год назад

    Dynamic segments work on dev. But when i serve it in local it gives me 404 not found. What am i doing wrong ?

  • @svregt
    @svregt Год назад

    what is his theme ? do someone know? i want it so bad, looks amazing

  • @herruberraumundzeit6229
    @herruberraumundzeit6229 Год назад

    What if i want to use no-cache or revalidate on a async function like googleapi's auth & getRange from googlesheets ( wich is not a fetch function )?

  • @AllanLeonardJr
    @AllanLeonardJr Год назад

    Just what I needed, awesome!

  • @thedigitalceo
    @thedigitalceo Год назад

    Do I see an API folder in the app directory! Would’ve love to hear about that.

  • @MDRakib-wi4mj
    @MDRakib-wi4mj Год назад

    Can you please help me?? in next.js 13.4 , i passed query by Link, but i can't find this query by useRouter hook or useParams hook.. how can i get the query string? I can't find any solution.

  • @ooogabooga5111
    @ooogabooga5111 Год назад

    Please also talk about how to share data between all these components with data being cashed on server, How to add styles. If there are any gotcha as it stands right now.

  • @alcatoo
    @alcatoo Год назад +1

    Waiting too much for stable app folder. Almost changing framework...

  • @fakn9159
    @fakn9159 Год назад

    What i dont understand is what If I need to GET or POST Data from a client component? Sometimes I have the case that I have a client component, click a button to write Data to a database. In this case I don't have a Server component but i still need to fetch data..

  • @ya4dang1
    @ya4dang1 Год назад

    How to fetch data with bearer token in server component, i.e. how do we retrieve the bearer token?

  • @harsinghsekhon5935
    @harsinghsekhon5935 Год назад

    Sorry this video isn't for beginners since I couldn't make sense of what just happened instantly at 3:38

  • @fredericorinco9133
    @fredericorinco9133 Год назад +1

    The big thing here is being able to import npm packages like embedded tweets, unsplash images, etc, that do their own fetching on the server. The bad side is that the nesting is incredibly quirky, and waterfall-prone. If there's not enough education on the subject, the level of apps will reduce, and the number of new apps passing the performance criteria will reduce dramatically. The architecture allows for bad fetching. But well so does react-query, apollo client and friends.

  • @alsherifkhalaf7385
    @alsherifkhalaf7385 Год назад

    how can I use revalidateTag when using for example firebase or prisma to fetch data ?

  • @TheAkshayvirle
    @TheAkshayvirle Год назад

    Which extension is used to predict all the async await fetch code generation that we see in the video?

  • @Steve-nd2wj
    @Steve-nd2wj 9 месяцев назад

    Can anyone know why he doesn't use `useEffect()` when he fetches from an API? I thought it's common practice to use it so you don't get unexpected behavior?

  • @saichandrajagu6141
    @saichandrajagu6141 10 месяцев назад

    please answer how to get the pathname as "emplopyee/[id]/edit" like this, cause i wanna give the pathnames a unque name
    (Or)
    can you explain how can we keep the navbar fr some pages and exclude for some pages based on pathnames only in next js app router.

  • @DrDarp
    @DrDarp Год назад

    For everyone wondering what icon pack it is, it's vscode-icons

  • @TomasJansson
    @TomasJansson Год назад

    When experimenting with dynamic routes and looking at the x-vercel-cache header I noticed I only got a HIT on static routes, as soon as I used a dynamic route, like the blog post in the video, it resulted in a MISS. Why can I get the same level of caching on dynamic routes? Caching should be more dependent on the data on the page than the actual url.

  • @ghury1
    @ghury1 Год назад

    what is the name of that vs extension at 5:47 ?

  • @iAmTheWagon
    @iAmTheWagon Год назад

    Yes. This is very helpful. Thank you.

  • @hugocastillo7647
    @hugocastillo7647 Год назад

    Vercerl i love next.js 13, im just a beginner but there´s is something i don´t understand is there a way i can define a header in the RootLayout but idk that this header doesn´t affect my about or other page i dont want it to be there.

  • @satejbidvai
    @satejbidvai Год назад

    As you mentioned that the app router is almost towards full stability, would you recommend using the app router if I am starting a completely new project?
    Anybody? Thoughts?

  • @raphaelaboohi2438
    @raphaelaboohi2438 Год назад

    Hey, is it possible to do full ssg like in next 12
    like to take new data at build time?
    like getStaticProps?
    Thank you