Specify Client Components with Client-side Routing to "use client" in Next.js App Dir
Just like we did in the Migrate a Next.js Pages Route to App Router we will migrate a nested route of the sales routes to the app router
We see some common errors you may run into as you migrate routes such as using the router from next/router, needing to add the "use client" directive, and more
Instructor: [0:00] In this lesson, we're going do the same thing we just did with the Sales route, with the Customers route. We can come down to our pages/sales/customers route, go to Index, and we want to copy this file. We're just going to copy up to Customer Layout.
[0:18] We can copy, and then in Sales v2 in the App router, we can come here and we need to add a new file. We're going to call this "Customers" and we're going to say layout.tsx. We can paste this here, and we need to remove unused imports.
[0:39] Although this isn't giving us errors, we know that this is a server component, so we need to change this to fit our server component getServerSession() from NextAuth.js. We know, with that, we want the redirect from next/navigation. We can change this to getServerSession().
[1:01] We need to get our authOptions, which comes from our API handler in the Pages directory. We can import authOptions, and then we can remove the router. We just need to wrap the login here in the redirect.
[1:21] Then we can just check if there isn't a session we want to redirect to the login. Then we can remove this getLayout() function, and we can save this. We know that we'll get an error because we don't have our page yet. We can simply do as we did in the last lesson. Let's copy our customer's page.
[1:47] We can return a fragment and its children and make sure it is the default function. Save that. Lastly, just for consistency, let's name this "Customer's Layout."
[2:11] If we go to our App and go Sales v2 Customers. We're getting this error because, in our Customer Layout Component, we have more components that we need to move to "use client". If we come to components, Customer Layout, "use client, and save, and now it's still looking for the router.
[2:32] You'll see that it gave us this error in a nice way because we have wrapped this Customer layout in an error boundary. We'll get to errors later. In this file, we're using the usePathName hook. It's telling us in this error that the next/router was not mounted. Somewhere, one of our components in this file is trying to use the router.
[2:57] We can come here, let's look at our better addCustomer form, we are using the router. Here, we will just need to make this a client component. We can use from navigation. If we save this and refresh, now everything is working as expected.
[3:17] In review, we created another route under the Sales v2 route for customers. As we did in the last lesson, we simply moved over our Customers Layout to be in our new Sales v2...