Incrementally adopt the Next.js App Router

Рет қаралды 41,886

Күн бұрын

Learn how to move routes from pages/ to app/ with Next.js. This tutorial includes background on React Server & Client components, new Next.js APIs, and practical strategies for adopting the latest features.
0:00 - Introduction
0:14 - Static Routes
1:12 - Server Components
1:40 - Client Components
4:15 - Mixing Client & Server Components
6:22 - next/head and Metadata API
7:45 - Data fetching and getServerSideProps
9:28 - async/await in React Server Components
11:28 - Passing data to Client Components
13:03 - fetch() and caching
14:02 - Incremental Static Regeneration
14:26 - Layouts, _app.js, _document.js
15:45 - Conclusion
◆ Client components: • Are React client compo...
◆ Next.js docs: nextjs.org/docs/getting-start...
◆ Incremental adoption guide: nextjs.org/docs/app/building-...
◆ Why do Client Components get SSR'd to HTML? github.com/reactwg/server-com...
◆ RSC From Scratch. Part 1: Server Components: github.com/reactwg/server-com...
◆ Dynamic metadata: nextjs.org/docs/app/api-refer...

Пікірлер: 88

@alonfai Жыл бұрын

Thanks for sharing this! There is a large discrepancy in the community on how to properly structure an app to render both client/server components. This information definitely helps for migrating apps to rig the benefits of server components which are mainly from large data fetching requests.

@gmoniava Жыл бұрын

Your videos are usually good addition to the docs. I encourage you to make more.

@leerob Жыл бұрын

Just made another! kzfaq.info/get/bejne/f7uPpNSQyMXQe3U.html

@DominikSipowicz Жыл бұрын

Amazing tutorial! This is very valuable content. I will always share this as my first go-to migration resource whenever I need to refer to migration!

@faizanahmed9304 Жыл бұрын

Thank you, Lee! You simply explain things.

@erayates310 Жыл бұрын

Simple and clean explaining! Awesome.

@bassam.2023 8 ай бұрын

Extremely useful. Thanks!

@rockNbrain Жыл бұрын

Great job Lee ... tks a lot 🎉

@idanmasas Жыл бұрын

Thank you so much, Lee!

@jullweber508 Жыл бұрын

Loving the ssr pattern ❤

@ahmedabdelrahman4034 Жыл бұрын

simple and on the target 👍👍

@krubex Жыл бұрын

Great and straight forward. Thanks! What I'm missing in _app and _document is how to replace custom behavior (app: component, pageProps and document: custom extending and using ctx). I know this is advanced stuff, but nextjs doesnt mention anything about it in their migration guide. They only have one sentence dedicated to it: "If you have an existing _app or _document file, you can copy the contents (e.g. global styles) to the root layout (app/layout.tsx)"

@spongebob93lover 11 ай бұрын

i am scratching my head over this topic too. Did you manage it at last?

@krubex 11 ай бұрын

@@spongebob93lover No. It requires major rework and rethinking about the problem it previously solved. No easy migration possible. Sad reality that a company like vercel publishes it in this state

@Hedenica 6 ай бұрын

How does is work with i18n and pluralization? Since from what I gather it’s not possible to use the next-i18n library anymore.

@ghulammujtaba9236 Жыл бұрын

Great Video. You should make a project video using the latest features of NextJS.

@sangeethreddychejerla6527 Жыл бұрын

Thank you; that was great.

@CineMovil-ul6be 6 ай бұрын

This is amazing. Thanks a lot

@eliuddyn Жыл бұрын

Amazing 🔥🔥

@Svish_ Жыл бұрын

Is there a way in React DevTools or something like that to see which components in the tree are being rendered as server components and client components?

@martiananomaly Жыл бұрын

Great video.

@adamzajler5041 Жыл бұрын

Awesome!! Thanks 🙏

@juanferrer5885 Жыл бұрын

Thanks for sharing this Lee! i love this videos. Can you talk about internationalization in next? I found this more dificult in the app router.

@Siddu7987 7 ай бұрын

very clear

@mgonline86 9 ай бұрын

Thanks for the great explanation, if I may ask, how to have metadata like the title on client type?

@ayushgogna9732 Жыл бұрын

Great Video really helpful. what do you think about auth can you make video on that?

@shreyasnair02 Жыл бұрын

as someone who is brand new to nextjs and knows neither pages nor app, do i start off directly with app or learn pages first?

@Gumshoe21 9 ай бұрын

Thank you.

@aleksandarhristov2918 11 ай бұрын

Great, thank you! But I am struggling with MUI v5 is there a way I can use the App Router and keep the MUI or I need to drop it and Tailwind the new App router pages?

@whoman7930 Жыл бұрын

Can you also make a video on Auth patterns and different approaches in app router.

@JohnMcclaned Жыл бұрын

I swear Lee works for every company. He literally appears everywhere.

@zivtamary Жыл бұрын

um, no. he works for Vercel

@adarshsrivastava5746 11 ай бұрын

How can I access the pageProps as I used to access in next js 12 in any file inside the pages/ directory?

@davs23 8 ай бұрын

Hi @Lee Robinson, great video. I am just wondering when navigating between pages and app router hard navigation is triggered, is this correct behaviour because I can not find anywhere in documentation? Thanks

@TerryDellino Жыл бұрын

Thanks Lee! Great video. Mixing client and server components is sill a little confusing. I feel like “use client” will end up being misused and slapped on everything.

@underflowexception Жыл бұрын

Great video, thank you! One issue I ran into is for some reason my browser kept freezing up and crashing and it was due to me setting my client component to be an async function, is this normal? If it's not maybe the compiler should give you a warning/error.

@ashmx_ 11 ай бұрын

Yeah, client shouldn’t have async

@user-mn9rd8rn2j 11 ай бұрын

What are you using for file and folder icons?

@uncoolcoder Жыл бұрын

Thanks Lee... My app uses aws-amplify backend AWS AppSync/Cognito... i know aws-amplify lib is not ready for approuter... is there anyway you can suggest i can call my appsysnc and cognito to start using app router

@IkraamDev Жыл бұрын

I’m on the same boat.

@spongebob93lover 11 ай бұрын

how about custom hooks? i.e hooks created with redux or swr. Do I need to specify "use client" when using it in the components?

@alexandrealencar1796 Жыл бұрын

Thanks for the great video Lee! You probably noticed this but looks like the mic is more in focus than your face. Can be just an impression though.

@vinialves12362 11 ай бұрын

3:33 This part is a little weird to me. I've seen from the documentation that you can't import server components inside client components. To my perspective Counter here is a server component because it's not marked as "use client" and the page is a client component. You just did it, you've imported Counter inside Page and it still worked fine. Why? Does using hooks automatically make a component a client component?

@edihasrin7290 Жыл бұрын

seeing this video I feel strange, every time I use nextjs App Dir it feels very slow in development mode, it takes about 5-15 seconds for the page to make changes

@lapulapucityrider3227 Жыл бұрын

Under a second for me. But navigating though has delays even with skeleton but when you build production it doesnt have delay, the skeleton shows immediately then loads server component

@mayanksharma6927 Жыл бұрын

Of course it's slow. The performance is also twice as slow than pages router.

@user-xr4oo2xp7q 7 ай бұрын

I was reading few comments here and there and tried to replicate the things mentioned and found that it's true - component does a hard reload between pages from page router -> app router and vice-versa. Also, no global state is preserved either. Meaning, there is no incremental adoption possible unless one slots out a week/month depending on the project size to move every pages from page router to the app router.

@user-wk3qs3mb5t 11 ай бұрын

I'll try🙂

@linhvu5857 11 ай бұрын

Nice

@vidhanshuborade5977 9 ай бұрын

Can page router and app router work together(if there are no conflicts of routes b/w them)? As I can see in your video, you have both app and pages router and both are working together /client page is being served from pages router whereas /static router is being server from app router. I have Next12 website and I have upgrading all the required stuffs like next12->next13.4, then react, react-dom as well as eslint. but when I'm creating app router it is only using app router(one router at a time) but as I have to incrementally migrate this huge website. I want them to be working together, can you suggest what issue might be there?

@dariuskulevicius1640 Жыл бұрын

What about this use case: I have N files locally and I want to read them only on build (without using endpoints, using only fs). On pages that is possible (getStaticProps), on app router I could not find a solution (it is running on every page request, because it is not using fetch)

@user-tv5hs1rw7m Жыл бұрын

What about caching of data which does not use fetch (like ORM) or which are POST request.

@user-zm7tb9ky7t 5 ай бұрын

Nice video. Can u share pre-migration github repo, so we can follow along ? Its not necessary as video is very self-explanatory but it will be helpful.

@MrJonathandsouza Жыл бұрын

I am curious. When I navigate from a page in app to a page in pages, is the routing a soft load or a hard load?

@leerob Жыл бұрын

It's currently a hard navigation, but we're exploring ways to potentially make this a soft navigation.

@tomtobac Жыл бұрын

I like the benefits or the direction of React with server components but I think we should had to make 'use client' by default and not the other way around, so we could make a smooth transition, or instead of using directives at the top of the file, use folder or file names, like mycomponent.client.tsx. The directive on top feels so bad, like it's not the way to go and it breaks the sense of the developer of not taking care of the top of the file, where usually goes imports, to know check if its a client or server component.

@leerob Жыл бұрын

More details on "use client" here: github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md

@pixelycia Жыл бұрын

thanks for the video, but maybe you have to finnaly fix caching revalidation for highly dynamic application to make actually next.js app router useful for something different than absolute static sites?

@SandraWantsCoke 7 ай бұрын

My metadata comes with one giant call inside getServerSideProps. Do I need to make a separate call inside generateMetadata() to get the same data and have dynamic metadata? That would not be possible, the call is like 100KB of data. For this reason, it feels like a mistake to couple fetching and components together. How am I supposed to take data from inside a server component and give it to generateMetadata()?

@sohanshiwakoti9972 Жыл бұрын

nice but what if i want to fetch location name by type on input field where shloud i call that api to fetch the location i mean in client side or server side?and how?

@Ja-rz9fq 3 ай бұрын

WHY NOBODY REFERS THIS PROBLEM!?!?!? I spent a whole day going through all kinds of tutorials and discussions to find the answer to this question and not only I haven't found an answer but I haven't seen anyone even talk about this. So many things in projects I have been working on works on that principle - there are some useState hooks, when the user for example clicks the button it triggers the async function to fetch something from the database and it should populate useState variable... But NOBODY REFERS TO THIS, AM I STUPID OR WHAT? Have you found any solution?

@AleksRG Жыл бұрын

Super

@rahulsriram6295 Жыл бұрын

can I use a radix ui dialog in a server component? note that it renders in a react portal.

@sck3570 Жыл бұрын

try it then see if it blows up or not

@runonce Жыл бұрын

Very helpful. I would have wished that it would go a little deeper on the layouts.

@leerob Жыл бұрын

kzfaq.info/get/bejne/nbmDpr2Dyq-qgp8.html

@footballforlife09 5 ай бұрын

Do I just create the app folder like any normal folder and NextJS would understand this is the app router pages, right? There's no specific command to create that app folder when I'm trying to transition from pages to app router.

@user-lw2qw4cf5r 9 ай бұрын

I can't seem to find documentations using SessionProvider from Next Auth, as it still relies on pageProps which we remove in App Router and replace with children. Any pointers in that regards?

@willydavid_ 4 ай бұрын

When trying to use the app directory and pages directory, when using a link to a route from the other directory, the page reloads.

@charles.direct Ай бұрын

Lee, where did you get that bomber jacket?

@MonteLogic 10 ай бұрын

Dope

@shayantriedcoding Жыл бұрын

Which theme are you using in vs code

@darius5979 Жыл бұрын

One Dark Pro Monokai Darker Theme by Eser Ozvataf

@codinginflow 9 ай бұрын

5:03 Copilot moment 😃

@All-about-te Жыл бұрын

Can anyone tell me... How he is getting auto suggestion/Highlights of codes from the code editor?

@hadibakhshi5506 Жыл бұрын

Github copilot

@ray-lee Жыл бұрын

Still about 100kb javascript with the the newly bootstrapped app with create-next-app.

@duzx4541 11 ай бұрын

So what´s the point of keeping the "pages" directory at all?

@shubhamhdvideo 11 ай бұрын

Why its starting to look more like spring boot ?

@MrPlaiedes Жыл бұрын

I'm not crazy about 'use client' declaration. It gets murky when you have to keep track of which child components have some kind of state. I'd rather explicitly declare client components for each child component that needs.

@leerob Жыл бұрын

More details on "use client" here: github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md

@ashbyrezvani 6 ай бұрын

Its actually not really possible to incrementally move to app, if I was using pageExtensions: [ '.page.tsx']. I have files such as about.page.tsx. and also in my API folder I have /api/duplicateItems.page.tsx - And again this wont be possible inside the /app directory. and that's fine. But that means I cant migrate while I have pageExtensions for my /pages

@eidiazcas 9 ай бұрын

migrating a page using styled-components has been horrible so far because it has that blink of 90's page while the stiles load, horrible indeed

@engine_man 7 ай бұрын

They’re trying to get people to adopt tailwind

@brunoguerra7160 Жыл бұрын

cade as legendas!!!

@greendsnow Жыл бұрын

Don't! it ships miles more KBs which counts against your 1tb bandwidth limit which, when you pass, costs 40 bucks for every additional 100gb.

@GaryLi-bu8mn 11 ай бұрын

Can I add 'use client' at the first line in the app/layout.ts file? I want to use Material UI's ThemeProvider to wrap all content inside the body tag. Help me pls～～～