Migrate a Next.js Pages Router Component utilizing getServerSideProps to the App Router
Our deposit route currently makes use of getServerSideProps. To migrate this route to the app router we can create our first async server component for data fetching.
The data flow of our components becomes a lot more straight forward in the App directory. We just await our requests and when the server gets the data it will pass it off to the client components that need it.
No more boilerplate getServerSideProps is involved.
Note: You may notice that routes are already migrated over in this video.
As noted in the Course Description & Project Walkthrough video, this course is focus on showing "how to" by migrating a few routes and leaves room for you to migrate the rest of the app or not.
If you would like to follow along in the Next Migration Extras Course check out the lessons "Migrate Invoice Routes" and "Migrate Remaining Pages to App Router".
If you want to look at the code at any time you can run git checkout solution
Instructor: [0:00] Our last route to move over from our sales routes in the pages router is our deposit route. Let's go ahead and copy this route. We come into our Sales v2 and let's add deposits, depositID. We can paste this here.
[0:19] Now, here you notice we're using getServerSideProps and we don't need this anymore within the app router. We can copy our logic, and we can get rid of this function. Then we can remove our layouts. We can remove the props. Then let's paste that logic.
[0:43] The first thing you notice now is that we are getting await errors. That's because Await can only be used within an asynchronous function. With server components, we can now make the component an Async component. All we have to say is Async here, then our await errors go away.
[1:02] Now we can also remove the context. We can remove that here as well. Then all we need to get is the params from the page. Now if we save this and we come back to Sales v2, and let's try to go to Sales v2 invoices. Let's go to this invoice. We already have a deposit here. Now we want to navigate to this deposit.
[1:31] We'll have to change our URL to Sales v2. We are getting error with our server component. That's because, in our server component, we're trying to use a component that makes use of client APIs. If we come look at our server component, we see we have this delete deposit form.
[1:55] If we come find our delete deposit form under components forms, delete deposit form, we can add our "use client" directive, and then we can change our next/router to next/navigation, and save. Then if we come back to our app, we see that it is working as we expected.
[2:21] One thing you may have noticed is that in this delete deposit form, we are making use of data from this server component. That's one of the really great benefits of server components is that it works as you would expect with normal components in React.
[2:37] That, in this server component, the main difference is that it's asynchronous, and we can interact directly with our server. Then, any data that we get within the server component, we can pass and make use of in our client components.
Terrific, practical examples