Build your own sign-up page for your Next.js app with Clerk

Build a sign-up page
Make the sign-up route public
Update your environment variables
Visit your new page
Next steps

Available in other SDKs

By default, the <SignIn /> component handles signing in and signing up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the <SignUp /> component to build a custom sign-up page.

To set up a single sign-in-or-up page, follow the custom sign-in-or-up page guide.

Note

Just getting started with Clerk and Next.js? See the quickstart tutorial!

The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page using the Next.js optional catch-all route.

app/sign-up/[[...sign-up]]/page.tsx

import { SignUp } from '@clerk/nextjs'

export default function Page() {
  return <SignUp />
}

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.

Important

If you're using Next.js ≤15, name your file middleware.ts instead of proxy.ts. The code itself remains the same; only the filename changes.

To make the sign-up route public:

Navigate to your proxy.ts file.
Add the sign-up route to your existing route matcher that is making routes public.

proxy.ts

  import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
  
  const isPublicRoute = createRouteMatcher([
    '/sign-in(.*)',
+   '/sign-up(.*)'
  ])
  
  export default clerkMiddleware(async (auth, req) => {
    if (!isPublicRoute(req)) {
      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

Set the CLERK_SIGN_UP_URL environment variable to tell Clerk where the <SignUp /> component is being hosted.
Set CLERK_SIGN_UP_FALLBACK_REDIRECT_URL as a fallback URL incase users visit the /sign-up route directly.
Set CLERK_SIGN_IN_FALLBACK_REDIRECT_URL as a fallback URL incase users select the 'Already have an account? Sign in' link at the bottom of the component.

Learn more about these environment variables and how to customize Clerk's redirect behavior in the dedicated guide.

.env

NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/

Visit your new page

Run your project with the following command:

npm

pnpm

yarn

bun

terminal

npm run dev

terminal

pnpm run dev

terminal

yarn dev

terminal

bun run dev

Visit your new custom page locally at localhost:3000/sign-up.

Edit on GitHub

Build your own sign-up page for your Next.js app with Clerk

Update your environment variables

Visit your new page

Next steps

Protect content and read user data

Client-side helpers

Prebuilt components

Customization & localization

Clerk Next.js SDK Reference

Build your own sign-up page for your Next.js app with Clerk

Feedback