Next steps

This guide shows how you use the <SignIn /> and <SignUp /> components with the Next.js optional catch-all route in order to build custom sign-in and sign-up pages for your Next.js app.

If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, check out the custom flows guides.

Note

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 Router

Pages Router

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 Router

Pages Router

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.