Incrementally adopt the Next.js App Router

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

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

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

[@kamranayub]

You'll want to take a look at next-intl which supports App Router.

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

[@adarshsrivastava5746]

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

[@faizanahmed9304]

Thank you, Lee! You simply explain things.

[@erayates310]

Simple and clean explaining! Awesome.

[@JohnMcclaned]

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

[@zivtamary]

um, no. he works for Vercel

[@ghulammujtaba9236]

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

[@bassam.2023]

Extremely useful. Thanks!

[@jullweber508]

Loving the ssr pattern ❤

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

[@kamranayub]

Yep, RSC is tagged "Server" in the component tree. You can assume anything not marked Server is a client component.

[@CineMovil-ul6be]

This is amazing. Thanks a lot

[@idanmasas]

Thank you so much, Lee!

[@rockNbrain]

Great job Lee ... tks a lot 🎉

[@aleksbarylo2665]

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.

[@whoman7930]

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

[@adamzajler5041]

Awesome!! Thanks 🙏

[@sangeethreddychejerla6527]

Thank you; that was great.

[@Siddu7987]

very clear

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

[@abdrahman-d7]

simple and on the target 👍👍

[@codinginflow]

5:03 Copilot moment 😃

[@Gumshoe21]

Thank you.

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

[@kamranayub]

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

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

[@martiananomaly]

Great video.

[@eliuddyn]

Amazing 🔥🔥

[@raywachaga]

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.

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

[@SaurabhSrivastava-i1q]

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.

[@mgonline86]

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

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

[@LizNix-z7b]

What are you using for file and folder icons?

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

[@ayushgogna9732]

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

[@charles.direct]

Lee, where did you get that bomber jacket?

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

[@akrishnadevotee]

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

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

[@IINoirII]

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?

[@TusharSinghParmar-l3m]

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.

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

[@ray-j9c3p]

I'll try🙂

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

[@coding-master-shayan]

Which theme are you using in vs code

[@darius5979]

One Dark Pro Monokai Darker Theme by Eser Ozvataf

[@KoalaEucalyptus-m9r]

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?

[@MuhammadBilal-e5g5n]

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

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

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

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

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

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

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

[@vinialves12362]

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?

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

[@linhvu5857]

Nice

[@AleksRG]

Super

[@runonce]

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

[@leerob]

kzbin.info/www/bejne/nYS2pI2Imq55iM0

[@duzx4541]

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

[@ray-lee]

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

[@MonteLogic]

Dope

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

[@All-about-te]

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

[@hadibakhshi5506]

Github copilot

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

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

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]

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

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

[@brunoguerra7160]

cade as legendas!!!

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

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