Planship Next.js Clicker Demo

Welcome to the Planship demo app built with Next.js. This app demonstrates the use of Planship for implementing subscription plans with feature and usage-based entitlements.

This app uses @planship/fetch client library for the server-side calls, and @planship/react context provider on the client side.

What is the Clicker Demo app?

Clicker Demo is a hypothetical app that provides its customers with a few simple features, most notably buttons that can be clicked to generate clicks. The app offers three subscription plans, Small, Medium and Large, that provide access to different features and limits on the number of allowed clicks.

All of the pricing logic including subscription management, feature and usage entitlements, and usage metering, is implemented with Planship.

Getting started

To get started, sign up for Planship and navigate to the default organization automatically created for you. You will then see a Clicker Demo product and default Planship API credentials.

Next, clone this repository and create a .env file in the project root directory.

git clone [email protected]:planship/planship-nextjs-demo.git
cd planship-nextjs-demo
touch .env

Then, add your Planship API credentials to the .env file.

PLANSHIP_API_CLIENT_ID=QNR32DJSDZ3ZI3ZJLMT6
PLANSHIP_API_CLIENT_SECRET=lCiTw5CBhO3RZvbC0fBGB89zMMF2jNf9

Finally, install all dependencies and run the app.

pnpm install
pnpm dev

Next steps

To get started with Planship for your own product, check out the Planship integration guide. You may also want to read more about core concepts like feature levers, metered usage, and plans.