Whop Next.js Template

Whop Next.js Template is a Next.js starter project, built on the whop-next-template scaffold from Whop, that shows how to combine Next.js rendering patterns with @whop-sdk/core to gate parts of a site by login state and product ownership. It ships example pages for the pages directory, the Next.js 13 app directory, and an API route.

What is the Whop Next.js Template?

The Whop Next.js Template is a Next.js code scaffold that generates a site where access to pages and API routes is controlled by Whop accounts. It takes a set of Whop environment variables (client ID, client secret, API key, recommended plan ID, required product ID, and a NextAuth secret) and produces working examples of login-gated, product-gated, and middleware-protected routes. It runs on Node.js with the pnpm package manager, and it is published in the Whop GitHub organization at github.com/whopio/next-template.

Key Features

• Next.js framework — a Next.js project with both a pages directory and an app directory, the latter targeting the app router added in next@13.0.0.
• Whop SDK integration — uses @whop-sdk/core to obtain a user-scoped UserService instance from the session.
• NextAuth authentication — configured through NEXTAUTH_URL and NEXTAUTH_SECRET, with login and logout buttons rendered based on session state.
• Server-side rendering examples — pages/ssr/index.tsx attaches the Whop user to page props; pages/ssr/logged-in.tsx redirects logged-out visitors to /ssr.
• Product gating — pages/ssr/product-gated.tsx and app/app/ssr/product-gated/layout.tsx check product ownership and show a purchase button linking to whop.com checkout when access is missing.
• Middleware-protected static pages — pages/ssg/product-gated.tsx and app/app/ssg/product-gated/page.tsx redirect users without access to the checkout page.
• Gated API route — pages/api/product-gated.ts checks product ownership for the authorised user via the session.
• Vercel deploy button — a one-click clone-and-deploy flow that prompts for the required environment variables.

Who is it for?

• Next.js developers selling app access: start from working Whop login and product-gating code instead of wiring authentication and checkout themselves.
• Whop store owners: gate a companion website or dashboard behind a product or plan so only paying members can reach it.
• Teams evaluating the app router: compare equivalent implementations of the same gated page under pages and app side by side.

What can you do with the Whop Next.js Template?

• Gate a members-only page: copy the product-gated layout so users without the required product see a checkout button instead of the content.
• Protect an API endpoint: reuse pages/api/product-gated.ts to verify ownership before returning data.
• Deploy a gated site quickly: use the Vercel button, supply the environment variables listed in .env.example, and launch.

How does Whop Next.js Template work?

1. Set the environment variables, many of which are found in the Whop developer dashboard settings.
2. Install dependencies with pnpm i and run pnpm run dev.
3. Open localhost:3000 to view the example routes, each demonstrating a different gating pattern.

FAQ

Is the Whop Next.js Template free?

Yes, it is an open-source template published on GitHub under the Whop organization, where its repository lists 48 stars. You supply your own Whop client ID, secret, API key, plan ID, and product ID to run it.

What environment variables does it require?

It needs NEXT_PUBLIC_WHOP_CLIENT_ID, WHOP_CLIENT_SECRET, WHOP_API_KEY, NEXTAUTH_URL, NEXTAUTH_SECRET, NEXT_PUBLIC_RECOMMENDED_PLAN_ID, and NEXT_PUBLIC_REQUIRED_PRODUCT.

Does it support the Next.js app directory?

Yes. It includes app-directory examples such as app/app/ssr/page.tsx and a product-gated layout and page under app/app/ssr/product-gated/, plus a middleware-protected static page under app/app/ssg/.