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

  Рет қаралды 299,954

Vercel

Vercel

Күн бұрын

‪@leerob‬, VP of Developer Experience at Vercel, explains new concepts and foundations of Next.js app router, including layouts, dynamic routes, and data fetching. Deploy today: vercel.fyi/app-router
⌛️ Timestamps:
0:00 Introduction
0:10 Routing
2:57 Dynamic route segments
4:53 Data fetching
7:36 Caching
11:42 Metadata
💻 Resources:
◆ Routing: nextjs.org/docs/app/building-...
◆ Caching: nextjs.org/docs/app/building-...
◆ Metadata: nextjs.org/docs/app/building-...
#vercel #nextjs

Пікірлер: 312
@NobleOsinachi
@NobleOsinachi 9 ай бұрын
Bro just explained half of my Next JS problems in 15 mins! Wow! This guy is good! 👍👍👍
@user-vp6ig6vw4s
@user-vp6ig6vw4s Ай бұрын
beacuse it is by next js original channel
@badalsaibo
@badalsaibo Жыл бұрын
This was an excellent demo. Concise, brief and to the point. Thanks Lee!
@leerob
@leerob Жыл бұрын
Thank you, this made my day 😁
@stillready6405
@stillready6405 11 ай бұрын
I didn't know you have a KZfaq 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 10 ай бұрын
This guide really answered almost all of my questions, it's short and straightforward. You're doing a great job.
@NobleOsinachi
@NobleOsinachi 9 ай бұрын
Same thing I said. Like it was really packed with information and yet short.
@ryanp787
@ryanp787 Жыл бұрын
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 8 ай бұрын
Ai generated comment
@ryanp787
@ryanp787 8 ай бұрын
@@tabletuser123 nope I’m real lol. Your account name looks AI generated
@devkasunlakshitha
@devkasunlakshitha Жыл бұрын
Love these new improvements. This is why I love Next JS ❤
@appscastle
@appscastle 2 ай бұрын
This guy should keep posting videos, the examples and the way he explain things are just amazing
@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!
@reesebearden6566
@reesebearden6566 Жыл бұрын
used nextjs in my senior capstone project, it's blowing everyone away!
@Paul_Aderoju
@Paul_Aderoju Жыл бұрын
Currently using this in my next project and it’s so much easier to route between pages
@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
@christopheanfry2425
@christopheanfry2425 Жыл бұрын
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 Жыл бұрын
Appreciate the kind words :)
@mohamedheythembenhassen8337
@mohamedheythembenhassen8337 Жыл бұрын
Thank you so much vercel and @leerob , very short and informative video , i really like the app directory .
@browsing1598
@browsing1598 Ай бұрын
Dude you legit saved me. Was spending so much time on this. This is the only video that helped me
@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...
@mohitnagpal
@mohitnagpal Жыл бұрын
I love Next.Js. Keep on going guys.
@leerob
@leerob Жыл бұрын
Thank you!
@versaleyoutubevanced8647
@versaleyoutubevanced8647 Жыл бұрын
very straightforward, love it
@timeforrice
@timeforrice Жыл бұрын
Very helpful!! Hope to see more videos like this!!
@FrontendMedia
@FrontendMedia Жыл бұрын
Thanks! Those new features are really neat.
@jsricochet
@jsricochet Жыл бұрын
Clear and to the point: thanks!
@tilmanmarquart8744
@tilmanmarquart8744 Жыл бұрын
Super excited to use this in prod soon!😁
@youneshenni5417
@youneshenni5417 11 ай бұрын
This is the future of Web Developement!!!!
@GowthamN-sp9wc
@GowthamN-sp9wc 6 ай бұрын
Thank you for the info on how to route one page to another without a link tag.
@2an_sound
@2an_sound Жыл бұрын
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)
@wouterdeen
@wouterdeen Жыл бұрын
Extremely helpful video, thank you!
@AdeelEjaz
@AdeelEjaz Жыл бұрын
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 Жыл бұрын
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 😂
@iAmTheWagon
@iAmTheWagon Жыл бұрын
Yes. This is very helpful. Thank you.
@AllanLeonardJr
@AllanLeonardJr Жыл бұрын
Just what I needed, awesome!
@faizanahmed9304
@faizanahmed9304 Жыл бұрын
Thank you team vercel for explaining the concepts!
@leerob
@leerob Жыл бұрын
Thank *you*!
@faizanahmed9304
@faizanahmed9304 Жыл бұрын
@@leerob you're welcome
@farzadali7434
@farzadali7434 2 ай бұрын
Excellent delivery!
@nayyyhaa
@nayyyhaa Жыл бұрын
this is BEAUTIFUL!!!!!
@mel_alejandrino
@mel_alejandrino 8 ай бұрын
very well explained! just wow
@victorekea
@victorekea 10 ай бұрын
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.
@wfl-junior
@wfl-junior Жыл бұрын
I can't wait to use the app directory stable
@codinginflow
@codinginflow Жыл бұрын
Once the remaining router bugs are fixed, this will be amazing
@Tantewillieja
@Tantewillieja Жыл бұрын
Love the app directory, made my life so much easier!
@leerob
@leerob Жыл бұрын
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?
@quickclean-ninja
@quickclean-ninja Жыл бұрын
Great thanks..finaly i got it
@franksonjohnson
@franksonjohnson Жыл бұрын
Next finally cracking Jekyll's layout feature 13 years later. But good demo of the data fetching behavior from Lee!
@tanmaysharma4043
@tanmaysharma4043 Жыл бұрын
Full stack industry level application tutorial needed for all the best practices and application
@thomaspattinson3977
@thomaspattinson3977 Жыл бұрын
Brilliant innovations!
@Moh_ha
@Moh_ha Жыл бұрын
Amazing great work!
@emeraudata
@emeraudata 25 күн бұрын
You just have save my project before I turn crazy, tx comrade
@kasper369
@kasper369 Жыл бұрын
Amazing stuff ❤
@exprove2496
@exprove2496 Жыл бұрын
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?
@GuillaumeDuhan1
@GuillaumeDuhan1 Жыл бұрын
Thanks for this amazing video
@harshilpatel3389
@harshilpatel3389 11 ай бұрын
Finally i get the solution of routing. Huh. Please mention this specifically clear in the your website.
@allyk904
@allyk904 Жыл бұрын
İt s been incredible helpfull. Thanks
@FelipeSantos92Dev
@FelipeSantos92Dev Жыл бұрын
Like you said...it really blows my mind 😅 #Amazing
@Gyurmatag
@Gyurmatag Жыл бұрын
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?
@oiojin831
@oiojin831 9 ай бұрын
clear explanation
@iwantfrens5804
@iwantfrens5804 7 ай бұрын
Leerob is fcking amazing!!! I love these videos!!!
@almeidaofthejoel
@almeidaofthejoel Жыл бұрын
Is there a way to support static generation for dynamic routes similar to exporting fallback from getStaticPaths before next 13?
@kasper369
@kasper369 Жыл бұрын
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
@trevortylerlee
@trevortylerlee Жыл бұрын
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 Жыл бұрын
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.
@codinginflow
@codinginflow Жыл бұрын
Is there a difference between no-cache, no-store and next.revalidate: 0?
@fredericorinco9133
@fredericorinco9133 Жыл бұрын
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.
@liketocode
@liketocode Жыл бұрын
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 :)
@developerpaul46
@developerpaul46 Жыл бұрын
Thanks Lee
@DrDarp
@DrDarp Жыл бұрын
For everyone wondering what icon pack it is, it's vscode-icons
@nasso_
@nasso_ Жыл бұрын
but how do i change the title of my page based on dynamic, client-side state? say, a text input for example?
@killiankavanagh3854
@killiankavanagh3854 Жыл бұрын
very helpful
@peterlee8407
@peterlee8407 Жыл бұрын
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
@TheAkshayvirle
@TheAkshayvirle Жыл бұрын
Which extension is used to predict all the async await fetch code generation that we see in the video?
@prateekbagrecha7012
@prateekbagrecha7012 10 ай бұрын
Could you please tell us the extensions that you are using to speed the development ?
@PyrexCelso
@PyrexCelso Жыл бұрын
This is awesome. If my main data source is prisma, is there a way to leverage this caching mechanism, without losing the type safety provided by it?
@Ga2-20
@Ga2-20 Жыл бұрын
Can I load data in layout.tsx and pass some of the data as a props to page.tsx which is layout children?
@FrontendMedia
@FrontendMedia Жыл бұрын
Hi, thanks for tutorial! What icon theme are you using here? :)
@sreeharsharaveendra289
@sreeharsharaveendra289 10 күн бұрын
This is the best video I found for app router! Screw all the wanna be copycats, Lee ur awesome!
@RedVelocityTV
@RedVelocityTV Жыл бұрын
I'd love to see a state management video for Next13. How server data can be hydrated on client to add interaction
@zuma206
@zuma206 Жыл бұрын
just pass props to a client component, that simple :)
@RedVelocityTV
@RedVelocityTV Жыл бұрын
@@zuma206 large apps don't use prop drilling. They have their own client store
@random4561
@random4561 Жыл бұрын
@@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
@VictorSilvaDev
@VictorSilvaDev Жыл бұрын
The cache control, only works using the native fetch api ? or can I have the same behavior using axios for example?
@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.
@0kJaymie
@0kJaymie Жыл бұрын
Can you use anything other than [id] for your dynamic route folder? I tried using something else but it doesn't work. Maybe I'm doing it wrong but I'm not getting any errors
@Ruffi0
@Ruffi0 Жыл бұрын
I prefer nuxt. But yes this is the way. Strapi is one of my favs. Headless WP isnt anything to scoff at though. There are frameworks that exist solely for headless WP and with its extensions of plugins.
@sumitsaha6941
@sumitsaha6941 3 ай бұрын
Keep going sir.
@adeleke5140
@adeleke5140 11 ай бұрын
Thank you for this video. It is so informative. I have one question for Lee, how does he get his cursor to move so smoothly?
@vinayak2450
@vinayak2450 Жыл бұрын
How would the app know how many ISR pages it has to store it statically first at build time?
@changecollar
@changecollar Жыл бұрын
THANK YOU
@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.
@redhood7105
@redhood7105 Жыл бұрын
Video about auth with new Next would be nice. How to protect routes and such
@ssawass
@ssawass Жыл бұрын
Not sure why Route Handlers were not showcased here. Seemed like a fitting topic
@mathiasriissorensen6994
@mathiasriissorensen6994 Жыл бұрын
I love this but I really miss a way to update the data when the user has interacted with an element, like updating their profile using a button. When using useSWR you can execute mutate(), and then the data is updating. Do we have something similar?
@PeriklesPeriklesoglu
@PeriklesPeriklesoglu 3 ай бұрын
thank you
@islamabdelhakiim7258
@islamabdelhakiim7258 11 ай бұрын
Thanks a lot
@kimbapslayer1995
@kimbapslayer1995 Жыл бұрын
If i bootstrap a next project with the traditional src dir but use next 13 are these server components still available? Is this App dir only features?
@kasvith
@kasvith Жыл бұрын
Whats the best way to handle Auth and Pass state from server to client
@Steffi3rd
@Steffi3rd Жыл бұрын
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
@sthomastt
@sthomastt 10 ай бұрын
Excellent to the point(s) video. Is there a code repo with the examples, so I can save time remixing and experimenting?
@JakubGaniaSoftware
@JakubGaniaSoftware Жыл бұрын
My next bigger project will be with Next.js.
@BerniePunished
@BerniePunished Жыл бұрын
can we have revalidation in app direction route.js files?
@mohammadhosseinmoradi2021
@mohammadhosseinmoradi2021 Жыл бұрын
Great 👍.
@Blu3yo
@Blu3yo Жыл бұрын
I love using the new app folder just need auth0 to update their next library for handling server side authentication. Currently it’s using the old router.
@brahimo4701
@brahimo4701 4 ай бұрын
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??
@user-qu8hg3wt3i
@user-qu8hg3wt3i 5 ай бұрын
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?
@martinmatuszek1277
@martinmatuszek1277 Жыл бұрын
What caught my attention was proposing type properties in Repository type definition. How VS Code have done that?
@BenZekriNBENZ
@BenZekriNBENZ Жыл бұрын
Thanks Nextjs team, you're making the world of dev a better place and without headache.
@depression_plusplus6120
@depression_plusplus6120 10 ай бұрын
How do you manage localstorage in next. As we can't access it since next prerenders on server, right?
@BenZekriNBENZ
@BenZekriNBENZ 10 ай бұрын
use LocalStorage in a client component 'use client'@@depression_plusplus6120
@thedigitalceo
@thedigitalceo Жыл бұрын
Do I see an API folder in the app directory! Would’ve love to hear about that.
@tubebility
@tubebility Жыл бұрын
What extension are you using to get that "searchParams" autocomplete?
@ronaldpaek
@ronaldpaek Жыл бұрын
Does anyone know how to get past type definitions if I store links of strings in an array and map over it with a Link component but this component will be made into a component to create an active link state, I keep getting so many type definition errors :(
@AhmadMughal1
@AhmadMughal1 8 ай бұрын
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?
@iPankBMW
@iPankBMW Жыл бұрын
{ cache: "no-store" } doesnt work if we use Link component in the Layout file... It will work only after manual hardrefresh and further on and it will work Only for that segment which we manualy hardrefreshed. If we have two or more segments with no-store we need to make manual hardrefresh in each of them for SSR to start work. But when we do that "the manual hardrefresh" in one of the segemnts, the SSR stops working on the other segments again... (This all previous mentioned applies only if we use Link component from the Layout file.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 190 М.
That's how money comes into our family
00:14
Mamasoboliha
Рет қаралды 8 МЛН
孩子多的烦恼?#火影忍者 #家庭 #佐助
00:31
火影忍者一家
Рет қаралды 47 МЛН
Looks realistic #tiktok
00:22
Анастасия Тарасова
Рет қаралды 60 МЛН
Жайдарман | Туған күн 2024 | Алматы
2:22:55
Jaidarman OFFICIAL / JCI
Рет қаралды 1,7 МЛН
Next.js App Router Caching: Explained!
25:22
Vercel
Рет қаралды 84 М.
Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript
1:02:55
Programming with Mosh
Рет қаралды 563 М.
The "SQL In React" Drama
28:32
Theo - t3․gg
Рет қаралды 60 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
I DONT USE NEXT JS
54:01
ThePrimeTime
Рет қаралды 329 М.
Learn Next.js Parallel Routes In 16 Minutes
16:18
Web Dev Simplified
Рет қаралды 116 М.
Next.js App Router Authentication (Sessions, Cookies, JWTs)
11:31
The Story of Next.js
12:13
uidotdev
Рет қаралды 553 М.
Fetching Data Doesn't Get Better Than This
6:58
Josh tried coding
Рет қаралды 89 М.
Klavye İle Trafik Işığını Yönetmek #shorts
0:18
Osman Kabadayı
Рет қаралды 190 М.
ОБСЛУЖИЛИ САМЫЙ ГРЯЗНЫЙ ПК
1:00
VA-PC
Рет қаралды 1,3 МЛН
Хотела заскамить на Айфон!😱📱(@gertieinar)
0:21
Взрывная История
Рет қаралды 5 МЛН
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 3,5 МЛН