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.