Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<RedirectToSignUp />

The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

Usage

pages/_app.tsx
import { ClerkProvider, SignedIn, SignedOut, RedirectToSignUp, } from "@clerk/nextjs"; import { AppProps } from "next/app"; function MyApp({ Component, pageProps } : AppProps) { return ( <ClerkProvider {...pageProps}> <SignedIn> <Component {...pageProps} /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </ClerkProvider> ); } export default MyApp;

Props

NameTypeDescription
redirectUrlstringFull URL or path to navigate after successful sign-in or sign-up. This is the same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignInUrlstringFull URL or path to navigate after successful sign-in.
afterSignUpUrlstringFull URL or path to navigate after successful sign-up.
initialValuesSignUpInitialValuesThe values used to prefill the sign-up fields with.

What did you think of this content?

Clerk © 2023