Migrate a Next.js Pages Route to App Router
We will migrate the sales/index.tsx route to the app router by creating a salesv2/layout.tsx file.
We are labeling it salesv2 for now because if we name it sales as well we will get an application error because we would have two identical routes
As we do we find that we can make use of server components and nested layouts. What code we need to write in the app directory will be a little different.
One thing you'll need to get used to now that you are working 'on the server' and 'on the client' is how you get data changes. Our Sales route requires session data which we were loading via a hook on the client. In the app dir we'll need to use getServerSession from NextAuth for this functionality to work the same.
Similarly navigation will change. Next.js gives us the next/navigation module to use on both the client and server with some key changes like the usePathname hook.
Instructor: [0:00] Let's get started moving one of our routes over from our pages router by moving over our sales route. If we come into sales in the pages router and we come to our index, let's just copy all of the page information right here. Now, we can come back into our app router and let's add a new file and let's call it salesv2.
[0:22] We're calling it salesv2 so that it doesn't conflict with our sales route in the pages router and then let's give it a layout.tsx file. Here we can simply paste the code we copied. Let's go ahead and import our sales nav.
[0:37] First, this session. One we didn't copy over the hook that we have in the sales page in the pages router, but that's because we also don't have the session provider in the route layout for the app router.
[0:51] We don't need it because if you remember our React server components, which pages and layouts are by default, have access to server methods. We can remove this useSession and we can actually just replace it with getServer session.
[1:08] We can import this from NextAuth. This takes a parameter of Auth options. This will come from our pages API AuthNext.js file. Then this router will not work in our app router and so we need to change this to Next navigation.
[1:28] Since we're just pushing the user to log in if there's not a session, we can use redirect from Next navigation. Then add this here, redirect. We can remove the router.
[1:43] Status doesn't exist on this session. We can just remove this and say if there's not a session, redirect to log in. Now, we can get rid of this sales page.get layout because if you remember, the layout from our root layout, which is this nav bar, gets persisted to our sub routes.
[2:06] This layout will receive the nav bar and then it'll also add the sales nav. We can remove this. Let's name this sales layout for consistency. Then we can remove our layout component. We can save this.
[2:28] If we come back to our app and we go to salesv2, we'll get the error because there is no page for this route. We have the layout, but we don't have the page.
[2:42] Let's just copy this function, and we can come to salesv2, add the new file of page.tsx, and paste sales layout. I'm going to export default function. We'll call it sales page. Then we can just remove all of this and make this a fragment.
[3:07] If we save that and come back, now we're getting the error that in our sales nav, we are using the router from the next router. We can come into our components.
[3:19] Sales nav, index, and we can change this to next navigation. Now, we get the error that path name doesn't exist on the router. We actually get another hook called use path name from next navigation. We can change this to use path name.
[3:40] We'll change this to path name. Then all places where we call the router, we can select them with command D and just remove those.
[3:52] Now that file is good. We can come back to our app and we see that we need to make this a client component. Before we were only using it in the pages directory, which meant that it was a client component by default and we don't have to specify anything.
[4:08] Now that we are using it in the app directory, we need to add the use client directive. If we save this, and we come back, we are now getting our sales nav for the salesv2 route.