Build your own sign-in and sign-up pages for your Next.js app with Clerk

Build a sign-up page

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 path="/sign-up" />;
}

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

Build a sign-in page

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 path="/sign-in" />;
}

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

Update your environment variables

In the previous steps, a path prop is passed to the <SignIn /> and <SignUp /> components. This is because the components need to know which route they are originally mounted on.

In Next.js applications, you can either pass the path prop, or you can define the NEXT_PUBLIC_CLERK_SIGN_IN_URL and NEXT_PUBLIC_CLERK_SIGN_UP_URL environment variables, like so:

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

Visit your new pages

Run your project with the following terminal command from the root directory of your project:

terminal
npm run dev

terminal
yarn dev

terminal
pnpm dev

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