Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

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

1
import { SignUp } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignUp />;
5
}
1
import { SignUp } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignUp />;
5
}

Build your sign in page

1
import { SignIn } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignIn />;
5
}
1
import { SignIn } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignIn />;
5
}

Update your environment variables

Next, add environment variables for the signIn , signUp and afterSignUp , afterSignIn paths:

.env.local
1

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.

Was this helpful?

Clerk © 2023