Build your own sign-in and sign-up pages for your Next.js app with Clerk
This guide shows you how to 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.
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.
import { SignUp } from "@clerk/nextjs";
export default function Page() {
return <SignUp path="/sign-up" />;
}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.
import { SignIn } from "@clerk/nextjs";
export default function Page() {
return <SignIn path="/sign-in" />;
}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:
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-upVisit your new pages
Run your project with the following terminal command from the root directory of your project:
npm run devyarn devpnpm devVisit your new custom pages locally at localhost:3000/sign-in and localhost:3000/sign-up.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application.
Client Side Helpers
Learn more about Next.js client side helpers and how to use them.
Next.js SDK Reference
Learn more about additional Next.js methods.
Clerk Components
Learn more about Clerk's prebuilt components that make authentication and user management easy.