Build your Sign Up and Sign In pages
Clerk offers a set of prebuilt components that you can use to embed sign in, sign up, and other user management functions into your Next.js application. We are going to use the <SignIn />
,<SignUp />
components by utilizing the Next.js optional catch all route.
Build your sign up page
1import { SignUp } from "@clerk/nextjs";23export default function Page() {4return <SignUp />;5}
1import { SignUp } from "@clerk/nextjs";23export default function Page() {4return <SignUp />;5}
Build your sign in page
1import { SignIn } from "@clerk/nextjs";23export default function Page() {4return <SignIn />;5}
1import { SignIn } from "@clerk/nextjs";23export default function Page() {4return <SignIn />;5}
Update your environment variables
Next, add environment variables for the signIn
, signUp
and afterSignUp
, afterSignIn
paths:
.env.local1
These values control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.