{"id":15118404,"url":"https://github.com/lmsqueezy/nextjs-billing","last_synced_at":"2025-04-25T20:40:07.130Z","repository":{"id":196990234,"uuid":"610783024","full_name":"lmsqueezy/nextjs-billing","owner":"lmsqueezy","description":"Next.js billing app with Lemon Squeezy","archived":false,"fork":false,"pushed_at":"2024-08-19T21:20:28.000Z","size":426,"stargazers_count":667,"open_issues_count":3,"forks_count":94,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-01-18T06:32:36.196Z","etag":null,"topics":["authjs","drizzle","neon","nextjs-starter","nextjs-template","nextjs14","tailwindcss","wedges"],"latest_commit_sha":null,"homepage":"https://lemonsqueezy.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lmsqueezy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-07T13:27:09.000Z","updated_at":"2025-01-12T04:21:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"618c1f44-bdc4-448e-8820-e83a307c447e","html_url":"https://github.com/lmsqueezy/nextjs-billing","commit_stats":null,"previous_names":["lmsqueezy/nextjs-billing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmsqueezy%2Fnextjs-billing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmsqueezy%2Fnextjs-billing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmsqueezy%2Fnextjs-billing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmsqueezy%2Fnextjs-billing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lmsqueezy","download_url":"https://codeload.github.com/lmsqueezy/nextjs-billing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250894338,"owners_count":21504144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authjs","drizzle","neon","nextjs-starter","nextjs-template","nextjs14","tailwindcss","wedges"],"created_at":"2024-09-26T01:46:15.143Z","updated_at":"2025-04-25T20:40:07.097Z","avatar_url":"https://github.com/lmsqueezy.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","App"],"sub_categories":[],"readme":"# Next.js Billing App with Lemon Squeezy\n\nThis Next.js demo app can be used as a base for building subscription-based SaaS apps.\n\nJust clone this repo and build your app alongside the ready-made auth and billing.\n\nUsing the following stack:\n\n- Framework - [Next.js 14](https://nextjs.org)\n- Language - [TypeScript](https://www.typescriptlang.org)\n- Billing - [Lemon Squeezy](https://lemonsqueezy.com)\n- Auth (GitHub OAuth) - [Auth.js v5](https://authjs.dev)\n- ORM - [Drizzle](https://orm.drizzle.team/)\n- Styling - [Tailwind CSS](https://tailwindcss.com)\n- Components - [Wedges](https://www.lemonsqueezy.com/wedges/docs)\n- Serverless Postgres - [Neon](https://neon.tech/)\n- Linting - [ESLint](https://eslint.org)\n- Formatting - [Prettier](https://prettier.io)\n\nThis template uses the [Next.js App Router](https://nextjs.org/docs/app). This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.\n\nCompatbile with [Vercel Edge Functions](https://vercel.com/docs/functions/runtimes/edge-runtime) and serverless deployments.\n\n## Customer Portal vs Integrated Billing\n\nKeep in mind that Lemon Squeezy comes with inbuilt [Customer Portal](https://www.lemonsqueezy.com/features/customer-portal) that covers all the features from this app and more.\n\nNonetheless, should you seek a billing solution more closely integrated with your SaaS platform, this template serves as a foundation for creating a seamless, integrated SaaS billing system.\n\n## Prerequisites\n\n### 1. Lemon Squeezy Account and Store\n\nYou need a Lemon Squeezy account and store. If you don't have one already, sign up at [Lemon Squeezy](https://app.lemonsqueezy.com/register).\n\n### 2. Neon Account\n\nThis template uses Neon + Drizzle ORM for serverless Postgres, making it compatible with the Vercel Edge functions. If you don't have an account, you can sign up for free at [Neon](https://neon.tech/).\n\n## Getting Started\n\n### 1. Clone the Repo\n\nStart by cloning this repo to your local machine and navigating into the directory.\n\n### 2. Install Dependencies\n\nThen, install the project dependencies:\n\n```bash\npnpm install\n```\n\n### 3. Set Environment Variables\n\nCopy the `.env.example` file to `.env`:\n\n```bash\ncp .env.example .env\n```\n\nThen, fill in the environment variables:\n\n```\nLEMONSQUEEZY_API_KEY=\nLEMONSQUEEZY_STORE_ID=\nLEMONSQUEEZY_WEBHOOK_SECRET=\n\nWEBHOOK_URL=\n\nPOSTGRES_URL=\n\nAUTH_GITHUB_ID=\nAUTH_GITHUB_SECRET=\n\nAUTH_SECRET=\n\nAUTH_URL=\n\nNEXT_PUBLIC_APP_URL=\n```\n\n#### Lemon Squeezy\n\nOnce you have created an account and store on Lemon Squeezy, make sure you're in **Test mode**, then go to [Settings \u003e API](https://app.lemonsqueezy.com/settings/api) and create a new API key. Copy the key and paste it into `.env` file where it says `LEMONSQUEEZY_API_KEY=`.\n\nYou will also need the store ID from Lemon Squeezy for `LEMONSQUEEZY_STORE_ID`, which you can find in the list at [Settings \u003e Stores](https://app.lemonsqueezy.com/settings/stores).\n\nFinally, you will need to add a random webhook secret in `LEMONSQUEEZY_WEBHOOK_SECRET`. A webhook secret is a security key that ensures data received from a webhook is genuine and unaltered, safeguarding against unauthorized access.\n\n#### Webhook URL\n\nYour local app will need to be able to receive webhook events, which means creating a web-accessible URL for your development project.\n\nThis is not available when running your site on its local server without some sort of tunnel.\n\nAn easy way to set one up is using a service like [ngrok](https://ngrok.com/) or an app like [LocalCan](https://www.localcan.com/).\n\nOnce you are provided a URL by these services, simply add that in your `.env` file where it says `WEBHOOK_URL=`.\n\n#### Postgres URL\n\nYou can get the Postgres URL from your Neon account. For more information refer to the [Neon documentation](https://neon.tech/docs/connect/connect-from-any-app).\n\n#### Auth\n\nYou will need to set up a GitHub OAuth app in order to obtain `GITHUB_SECRET` and `GITHUB_ID` to handle authentication.\n\nRefer to the [GitHub documentation](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) for setting up GitHub OAuth.\n\nOnce you have set up the OAuth app, you will need to add the `AUTH_GITHUB_SECRET` and `AUTH_GITHUB_ID` to your `.env` file.\n\nAdditionally, you need to add a random secret for `AUTH_SECRET` in your `.env` file. On Linux or macOS, you can generate a random secret using the following command:\n\n```bash\nopenssl rand -hex 32\n```\n\nor go to https://generate-secret.now.sh/32 to generate a random secret.\n\nNext, you need to provide the URL of your app in `AUTH_URL` in format `https://your-app-url.com/api/auth`. For local development, you can use `http://localhost:3000/api/auth`.\n\nFinally, you will need to add the URL of your app in `NEXT_PUBLIC_APP_URL`. For example, `http://localhost:3000`.\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 4. Set Up the Database\n\nRun the following command to set up the database:\n\n```bash\npnpm db:push\n```\n\nWith Drizzle ORM, you can access the database with [Drizzle Studio](https://orm.drizzle.team/drizzle-studio/overview). Run the following command to open Drizzle Studio:\n\n```bash\npnpm db:studio\n```\n\nGo to https://local.drizzle.studio/ to access the database.\n\n### 5. Run the Development Server\n\nStart the development server:\n\n```bash\npnpm dev\n```\n\nThat's all, you're ready to go!\n\n## How to set up Webhooks\n\n**This is a required step.**\n\nFor your app to receive data from Lemon Squeezy, you need to set up webhooks in your Lemon Squeezy store at [Settings \u003e Webhooks](https://app.lemonsqueezy.com/settings/webhooks).\n\n**In the app we have provided an action (Setup webhook button) that demonstrates how you can create a webhook on Lemon Squeezy using the Lemon Squeezy SDK.**\n\nWhen you create a webhook, you should check at least these two events:\n\n- `subscription_created`\n- `subscription_updated`\n\nThis app demo only processes these two events, but they are enough to get a billing system in place. You could, for example, extend the app to handle successful payment events to list invoices in your billing system (by subscribing to `subscription_payment_success`).\n\nThe webhook endpoint in your app is `/api/webhook`, which means if you are manually setting up the webhook, you need to append `/api/webook` to your webhook URL on Lemon Squeezy. For example, `https://your-app-url.com/api/webhook`\n\nThe server action for creating a webhook via SDK will do that automatically for you.\n\nIn the webhook form you need to add a signing secret. Add the same value you use in the form in the `LEMONSQUEEZY_WEBHOOK_SECRET` environment variable.\n\n## Production\n\nThere are a few things to update in your code to go live.\n\nYou need to turn off the **Test mode** in your Lemon Squeezy store and add a new live mode API key. Add this API key as an environment variable in your live server, using the same name `LEMONSQUEEZY_API_KEY`. Your store ID remains the same in both test and live mode, so add that to your server environment variables, as you did for your development site.\n\nYou also need to create a new webhook in your live store. Make sure you add the signing secret into the `LEMONSQUEEZY_WEBHOOK_SECRET` variable on your server.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmsqueezy%2Fnextjs-billing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flmsqueezy%2Fnextjs-billing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmsqueezy%2Fnextjs-billing/lists"}