Install @clerk/nextjs
Set your Clerk API keys
Enable Waitlist mode
Add the <Waitlist /> component
Add <ClerkProvider> to your app
Add sign-in functionality

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`

Clerk's Next.js SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

npm

yarn

pnpm

terminal

npm install @clerk/nextjs

terminal

yarn add @clerk/nextjs

terminal

pnpm add @clerk/nextjs

Set your Clerk API keys

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

Enable Waitlist mode

To enable Waitlist mode, follow these steps:

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

To manage users on your waitlist:

In the Clerk Dashboard, navigate to the Waitlist page.
On the right-side of a user's row, select the menu icon (...).
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>
  )
}

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

Add clerkMiddleware() to your app.
Add a sign-in page.

Add `clerkMiddleware()` to your app

clerkMiddleware() 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:

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.local.

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)(.*)',
  ],
}

By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() reference to learn how to require authentication for specific routes.

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 custom sign-in and sign-up pages, see the dedicated guide.

.env.local

NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"

Edit this page on GitHub

Last updated on Dec 6, 2024

Set up a waitlist in your Next.js app

Feedback