Clerk offers a set of prebuilt components and custom flows that you can use to embed sign in, sign up, and other user management functions into your Next.js application. This guide shows how you use the <SignIn /> and <SignUp /> components with the Next.js optional catch-all route(opens in a new tab).

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

Create a new file that will be used to render the sign-up page. In the file, import the <SignUp /> component from @clerk/nextjs and render it.

app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";
 
export default function Page() {
  return <SignUp />;
}

/pages/sign-up/[[...index]].tsx
import { SignUp } from "@clerk/nextjs";
 
export default function Page() {
  return <SignUp />;
}

Create a new file that will be used to render the sign-in page. In the file, import the <SignIn /> component from @clerk/nextjs and render it.

app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";
 
export default function Page() {
  return <SignIn />;
}

/pages/sign-in/[[...index]].tsx
import { SignIn } from "@clerk/nextjs";
 
export default function Page() {
  return <SignIn />;
}

Update your environment variables

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

.env.local
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

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.

Visit your new pages

Visit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.

Next steps

Customization & Localization

Learn how to customize and localize the Clerk components.

Learn More

Clerk Components

Learn more about Clerk's prebuilt components that make authentication and user management easy.