Incrementally adopt the Next.js App Router

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

[@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! kzbin.info/www/bejne/f4bCoqSVmMSfgaM

[@Hedenica]

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

[@faizanahmed9304]

Thank you, Lee! You simply explain things.

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

[@erayates310]

Simple and clean explaining! Awesome.

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

[@bassam.2023]

Extremely useful. Thanks!

[@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]

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

[@krubex]

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

[@ghulammujtaba9236]

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

[@idanmasas]

Thank you so much, Lee!

[@rockNbrain]

Great job Lee ... tks a lot 🎉

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

[@jullweber508]

Loving the ssr pattern ❤

[@ahmedabdelrahman4034]

simple and on the target 👍👍

[@sangeethreddychejerla6527]

Thank you; that was great.

[@CineMovil-ul6be]

This is amazing. Thanks a lot

[@aleksandarhristov2918]

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?

[@mgonline86]

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

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

[@adarshsrivastava5746]

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

[@martiananomaly]

Great video.

[@eliuddyn]

Amazing 🔥🔥

[@davs23]

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

[@user-mn9rd8rn2j]

What are you using for file and folder icons?

[@user-gm2rv8tv4e]

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?

[@ayushgogna9732]

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

[@spongebob93lover]

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?

[@Siddu7987]

very clear

[@vidhanshuborade5977]

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?

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

[@whoman7930]

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

[@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_]

Yeah, client shouldn’t have async

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

[@Gumshoe21]

Thank you.

[@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)

[@SandraWantsCoke]

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

[@user-tv5hs1rw7m]

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

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

[@footballforlife09]

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.

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

[@user-lw2qw4cf5r]

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_]

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

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

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

[@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]

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?

[@charles.direct]

Lee, where did you get that bomber jacket?

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

[@user-zm7tb9ky7t]

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.

[@ShayansCodeCommunity]

Which theme are you using in vs code

[@darius5979]

One Dark Pro Monokai Darker Theme by Eser Ozvataf

[@user-wk3qs3mb5t]

I'll try🙂

[@linhvu5857]

Nice

[@user-xr4oo2xp7q]

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.

[@AleksRG]

Super

[@duzx4541]

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

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

[@MonteLogic]

Dope

[@runonce]

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

[@leerob]

kzbin.info/www/bejne/nYS2pI2Imq55iM0

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

[@JohnMcclaned]

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

[@zivtamary]

um, no. he works for Vercel

[@ashbyrezvani]

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

[@shubhamhdvideo]

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

[@codinginflow]

5:03 Copilot moment 😃

[@eidiazcas]

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]

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]

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