Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<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;

Properties

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.
afterSignInUrlstringThe full URL or path to navigate after a successful sign in.
afterSignUpUrlstringThe full URL or path to navigate after a successful sign up.
initialValuesSignUpInitialValuesThe values used to prefill the sign-up fields with.

What did you think of this content?

Clerk © 2024