Check out a free preview of the full Build an AI-Powered Fullstack Next.js App, v3 course

The "User Profile Widget" Lesson is part of the full, Build an AI-Powered Fullstack Next.js App, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates how to incorporate a user profile widget provided by the Clerk authentication service.

Preview
Close

Transcript from the "User Profile Widget" Lesson

[00:00:00]
>> Looks more like a dashboard. Now, one cool thing we can do is clerk gives us the ability to add this widget, where a user can go manage their user without us having to do it. So we'll add that in our header. So let's do that. So in our header, I'm gonna add another div in here, and I'm gonna give it a class name of h-full w-full.

[00:00:26]
And I'm gonna give it a padding left and right of, I don't know, 6, which is not 6 pixels, it's almost 2 rems. And I'm gonna make it a flex with an items of center, which will center it vertically. And I'm gonna make it a justify-end, so it pushes all the way to the end.

[00:00:53]
And then from there, I'm just going to use the UserButton component from @clerk/nextjs. I'm just gonna put it right in there, For the free. If I go back, boom, I get this. Dang, you didn't even have to make it. It would've took you three weeks to make that with the animations and for your senior engineer to finally approve it.

[00:01:24]
Get it for the free. Cool, so you can click on this and manage your account and do stuff. So, awesome. It's looking good now, it's looking really good. So now what we wanna do is start working on the journal page, actually starting to populating our journal entries. What does that look like?

[00:01:51]
Everything we gonna need for that, API calls and stuff, but also creating the journal entry and having to deal with state. This is where we're gonna get really creative with how we deal with client components and server components and API routes and how they all work together to create something.

[00:02:07]
So, and I didn't just do it because you can't do it, I literally only did it the way that I'm like this is how I would do it. So everything that we will be doing is truly how I think I would do it. Not because I'm like, how do I integrate this feature in here, that's just not how I build apps.

[00:02:22]
I might do that in a intro course, but not in a course while building a full stack up. So I want you to see how I would do it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now