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

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

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

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

I didn't know you have a RU-vid 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!

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!!

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

I love Next.Js. Keep on going guys.

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

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

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

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

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!

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

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

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

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

Excellent delivery!

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

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

very straightforward, love it

Thanks! Those new features are really neat.

Extremely helpful video, thank you!

Clear and to the point: thanks!

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.

Thank you for the info on how to route one page to another without a link tag.

Just what I needed, awesome!

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

This is the future of Web Developement!!!!

Super excited to use this in prod soon!😁

Yes. This is very helpful. Thank you.

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)

very well explained! just wow

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.

this is BEAUTIFUL!!!!!

Brilliant innovations!

Amazing stuff ❤

Amazing great work!

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

Thank you team vercel for explaining the concepts!

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

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?

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

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

İt s been incredible helpfull. Thanks

Thanks for this amazing video

I can't wait to use the app directory stable

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

Great thanks..finaly i got it

clear explanation

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?

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

Thanks Lee

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?

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.

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?

Excellent to the point(s) video. Is there a code repo with the examples, so I can save time remixing and experimenting?

Like you said...it really blows my mind 😅 #Amazing

very helpful

Is there a way to support static generation for dynamic routes similar to exporting fallback from getStaticPaths before next 13?

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

Hi, thanks for tutorial! What icon theme are you using here? :)

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

Keep going sir.

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?

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

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.

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?

Great 👍.

Thanks a lot

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

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!

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??

What caught my attention was proposing type properties in Repository type definition. How VS Code have done that?

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

but how do i change the title of my page based on dynamic, client-side state? say, a text input for example?

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

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?

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

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

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?

Great video When the app folder will be stable do you know the date ?

The cache control, only works using the native fetch api ? or can I have the same behavior using axios for example?

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?

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

thank you

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

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

Great content! I just wanted to ask, since fetch is the API that was extended to support some of this caching stuff, I'm guessing using something like axios it just won't support all of these features? Is there a way to make it work even with something like axios?

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

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

THANK YOU

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

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.

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 )?

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

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

While deploying on vercel fetch failed cannot use localhost:3000 as an address to fetch data in production mode works ok in local env. I am using file based routing to fetch posts locally. Any fix?

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?

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?

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