Self-service account management
A product needs a ready-made account page where signed-in users can update profile and security settings.
Clerk · Component
UserProfile
UserProfile is Clerk’s ready-made account-management UI for profile, security, and billing settings. In Next.js, render it from an optional catch-all route so its internal navigation works.
How it works
UserProfile renders a complete account-management interface for a signed-in user. It provides profile and security settings, and in supported configurations also includes billing settings; in Next.js it belongs in an optional catch-all route so its internal navigation can resolve.
Syntax
<UserProfile />Returns
A rendered account-management UI component.
Key points
- UserProfile supplies a complete account-management interface rather than requiring separate screens for each account task.
- Its documented scope covers profile, security, and billing settings.
- Next.js integrations require the optional catch-all route for UserProfile routing.
- The documented Next.js page location uses an optional catch-all segment named user-profile.
- The Next.js integration imports UserProfile from the @clerk/nextjs package.
- The documentation also points to composable profile building blocks when a fully custom account page is needed.
Common mistakes
- In Next.js, placing the component outside an optional catch-all route can prevent its internal routing from working.
Example: Render UserProfile in Next.js
import { UserProfile } from '@clerk/nextjs'
export default function UserProfilePage() {
return <UserProfile />
}Render the profile-management UI from a Next.js optional catch-all route so the component's internal routing works.
When to use it
Centralized billing and settings
An application wants billing controls alongside profile and security controls in one Clerk-provided interface.
Composable profile experience
A team needs a customized account area rather than the complete prebuilt interface.
Interview questions
QWhat problem does UserProfile solve, and how is it rendered in Next.js?
UserProfile is a prebuilt account-management UI that lets users manage profile and security settings, with billing settings included in the documented component experience. In Next.js, render it from a page using the Clerk Next.js package.
Follow-up: Why use an optional catch-all route? The component needs that route shape so navigation among its internal profile pages can resolve correctly.
QHow should a Next.js application route UserProfile?
Create a page at app/user-profile/[[...user-profile]]/page.tsx, import UserProfile from @clerk/nextjs, and return the component from the page function. This gives the component the route structure required by the documentation.
Follow-up: What happens if the route is not catch-all? Internal UserProfile navigation may not work because nested profile paths will not match the page.
QWhat functionality does UserProfile provide?
The component is a ready-made account area rather than only a single profile form. It centralizes profile, security, and billing-management UI for the user.
Follow-up: When might a developer choose another approach? If the application needs a custom account-management layout, use the documented composable profile building blocks instead of rendering the complete component.
Related
UserProfileProviderUserProfile componentNext.js optional catch-all route