Build your own sign-up page for your Next.js app with Clerk
By default, the <SignIn /> component handles signing-in or signing-up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the <SignUp /> component with the Next.js optional catch-all route in order to build custom sign-up page for your Next.js app.
If the prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.
Build a sign-up page
The following example demonstrates how to render the <SignUp /> component.
import { SignUp } from '@clerk/nextjs'
export default function Page() {
return <SignUp />
}Make the sign-up route public
By default, clerkMiddleware() makes all routes public. This step is specifically for applications that have configured clerkMiddleware() to make all routes protected. If you have not configured clerkMiddleware() to protect all routes, you can skip this step.
To make the sign-up route public:
- Navigate to your
middleware.tsfile. - Add the sign-up route to your existing route matcher that is making routes public.
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
const isPublicRoute = createRouteMatcher([
'/sign-in(.*)',
'/sign-up(.*)'
])
export default clerkMiddleware(async (auth, request) => {
if (!isPublicRoute(request)) {
await auth.protect()
}
})
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
// Always run for API routes
'/(api|trpc)(.*)',
],
}Update your environment variables
Update your environment variables to point to your custom sign-in and sign-up pages. Learn more about the available environment variables.
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-upVisit your new page
Run your project with the following command:
npm run devyarn devpnpm devVisit your new custom page locally at localhost:3000/sign-up.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application.
Client-side helpers
Learn more about Next.js client-side helpers and how to use them.
Next.js SDK Reference
Learn more about additional Next.js methods.
Clerk components
Learn more about Clerk's prebuilt components that make authentication and user management easy.
Feedback
Last updated on