Skip to main content
Docs

Set up a waitlist in your Next.js app

In Waitlist mode, users can register their interest in your app by joining a waitlist. This mode is ideal for apps in early development stages or those wanting to generate interest before launch. This guide shows you how to get Clerk integrated and how to add a waitlist to your Next.js application.

Install @clerk/nextjs

The Clerk Next.js SDKNext.js Icon gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

terminal
npm install @clerk/nextjs
terminal
yarn add @clerk/nextjs
terminal
pnpm add @clerk/nextjs
terminal
bun add @clerk/nextjs

Set your Clerk API keys

.env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Enable Waitlist mode

To enable Waitlist mode, follow these steps:

  1. In the Clerk Dashboard, navigate to the Restrictions page.
  2. Under the Sign-up modes section, enable Waitlist.

To manage users on your waitlist:

  1. In the Clerk Dashboard, navigate to the Waitlist page.
  2. On the right-side of a user's row, select the menu icon (...).
  3. Select Invite to invite the user to your application. Select Deny to deny the user access to your application.

Add the <Waitlist /> component

The <Waitlist /> component renders a form that allows users to join for early access to your app.

The following example includes a basic implementation of the <Waitlist /> component hosted on the / route (the home page). You can use this as a starting point for your own implementation.

app/page.tsx
import { Waitlist } from '@clerk/nextjs'

export default function Page() {
  return <Waitlist />
}

Add <ClerkProvider> to your app

The <ClerkProvider> component provides session and user context to Clerk's hooks and components. It's recommended to wrap your entire app at the entry point with <ClerkProvider> to make authentication globally accessible. See the reference docs for other configuration options.

To use the <Waitlist /> component in your app, you must provide the waitlistUrl prop, which points to the URL of your waitlist page.

app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider waitlistUrl="/">
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

Add sign-in functionality

To allow users to sign in once they've been approved from the waitlist, you must:

Add clerkMiddleware() to your app

clerkMiddleware()Next.js Icon grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add clerkMiddleware() to your app, follow these steps:

  1. Create a middleware.ts file.
  • If you're using the /src directory, create middleware.ts in the /src directory.
  • If you're not using the /src directory, create middleware.ts in the root directory alongside .env.
  1. In your middleware.ts file, export the clerkMiddleware() helper:
middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}
  1. By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() referenceNext.js Icon to learn how to require authentication for specific routes.

Add a sign-in page

The following example demonstrates how to render the <SignIn /> component.

app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs'

export default function Page() {
  return <SignIn />
}

Update your environment variables to point to your custom sign-in page. For more information on building a custom sign-in-or-up page, see the dedicated guideNext.js Icon.

.env
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on