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.
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 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
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?
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
This is a really good guide. Thanks man. Would you kindly share the repository for this? Where both app and page routes are co-existing harmoniously. I think that would be a good resource to guide developers' migration efforts.
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
App router; if you want to learn Next.js I would treat App Router vs. Pages as Class Components vs. Hooks -- in other words, there's going to be a primary preference in docs, libraries, and tutorials on using App Router from now on just like the React community has moved on from Class components. You can still learn that stuff but I'd start with App Router. You may end up learning about Pages for migrating "legacy" code/libraries (even calling it "legacy" should give you a hint).
I looks nice form first view. But if you had localisation with page router, that comes out of the box in Next 12, you won't have possibility for incremental transfer you routes from pages to app architecture. You can imagine that you have app with 2-3 years of developing by 6-9 developers, and now you should swap in one step all your entire code base to the new app router.
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?
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?
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.
What if we need data inside Client component that has React state to be discoverable by SEO? Do we need to wrap the text in Server component and use composition?
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()?
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?
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?
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)
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.
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?
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.
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?
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?
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
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
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.
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.
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.
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
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.
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～～～
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.
Your videos are usually good addition to the docs. I encourage you to make more.
Just made another! ua-cam.com/video/IU_qq_c_lKA/v-deo.html
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)"
i am scratching my head over this topic too. Did you manage it at last?
@@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
How does is work with i18n and pluralization? Since from what I gather it’s not possible to use the next-i18n library anymore.
You'll want to take a look at next-intl which supports App Router.
How can I access the pageProps as I used to access in next js 12 in any file inside the pages/ directory?
Thank you, Lee! You simply explain things.
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!
Simple and clean explaining! Awesome.
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?
Yep, RSC is tagged "Server" in the component tree. You can assume anything not marked Server is a client component.
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
This is a really good guide. Thanks man.
Would you kindly share the repository for this? Where both app and page routes are co-existing harmoniously.
I think that would be a good resource to guide developers' migration efforts.
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
I’m on the same boat.
Great Video.
You should make a project video using the latest features of NextJS.
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?
App router; if you want to learn Next.js I would treat App Router vs. Pages as Class Components vs. Hooks -- in other words, there's going to be a primary preference in docs, libraries, and tutorials on using App Router from now on just like the React community has moved on from Class components. You can still learn that stuff but I'd start with App Router. You may end up learning about Pages for migrating "legacy" code/libraries (even calling it "legacy" should give you a hint).
I looks nice form first view. But if you had localisation with page router, that comes out of the box in Next 12, you won't have possibility for incremental transfer you routes from pages to app architecture. You can imagine that you have app with 2-3 years of developing by 6-9 developers, and now you should swap in one step all your entire code base to the new app router.
Extremely useful. Thanks!
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?
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?
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.
Can you also make a video on Auth patterns and different approaches in app router.
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.
What if we need data inside Client component that has React state to be discoverable by SEO? Do we need to wrap the text in Server component and use composition?
Loving the ssr pattern ❤
Thanks for the great explanation, if I may ask, how to have metadata like the title on client type?
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()?
Thank you so much, Lee!
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?
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?
What are you using for file and folder icons?
This is amazing. Thanks a lot
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.
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?
Lee, where did you get that bomber jacket?
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)
Great Video really helpful. what do you think about auth can you make video on that?
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.
What about caching of data which does not use fetch (like ORM) or which are POST request.
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?
Great job Lee ... tks a lot 🎉
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.
When trying to use the app directory and pages directory, when using a link to a route from the other directory, the page reloads.
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?
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?
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
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
Of course it's slow. The performance is also twice as slow than pages router.
Thank you; that was great.
simple and on the target 👍👍
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.
Yeah, client shouldn’t have async
very clear
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.
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?
It's currently a hard navigation, but we're exploring ways to potentially make this a soft navigation.
Which theme are you using in vs code
One Dark Pro Monokai Darker Theme by Eser Ozvataf
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.
More details on "use client" here: github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md
Thank you.
Awesome!! Thanks 🙏
So what´s the point of keeping the "pages" directory at all?
I swear Lee works for every company. He literally appears everywhere.
um, no. he works for Vercel
Amazing 🔥🔥
Very helpful. I would have wished that it would go a little deeper on the layouts.
ua-cam.com/video/gSSsZReIFRk/v-deo.html
Great video.
Dope
5:03 Copilot moment 😃
I'll try🙂
Nice
Still about 100kb javascript with the the newly bootstrapped app with create-next-app.
Can anyone tell me... How he is getting auto suggestion/Highlights of codes from the code editor?
Github copilot
Super
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
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.
More details on "use client" here: github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md
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
They’re trying to get people to adopt tailwind
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.
cade as legendas!!!
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～～～
can I use a radix ui dialog in a server component? note that it renders in a react portal.
try it then see if it blows up or not