1. 10
    Specify Client Components with Client-side Routing to "use client" in Next.js App Dir
    3m 30s

Specify Client Components with Client-side Routing to "use client" in Next.js App Dir

Ben Patton
InstructorBen Patton
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

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

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today