Next.js Quickstart

Take your Next.js application to the next level with @cloudterms/nextjs (opens in a new tab). This package provides a seamless terms agreement experience, including a pre-built CloudTermsProvider component and an API handler that eliminates the need for manual CloudTerms API interactions.

Key Features:

  • Includes the @cloudterms/react SDK.
  • Pre-built Agree to Terms Component: A modal window that pops up, disabling your app until the user agrees to the terms.
  • API Handler: Automatically handles CloudTerms API interactions, saving you time and effort.
  • Easy Integration: Simply wrap your app with the CloudTermsProvider component and configure the API handler to get started.
  • Customizable: Tailor the agreement experience to fit your brand and needs.

Streamline term agreements and focus on building your Next.js application with @cloudterms/nextjs!

Example (opens in a new tab)

Setup

Install @cloudterms/nextjs

npm install @cloudterms/nextjs

Set your environment variables

# Your application ID
CLOUDTERMS_APP_ID="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
# Your application secret
CLOUDTERMS_APP_SECRET="sk_live.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

Usage

Create the API handler

Add the following in /app/api/cloudterms/[...cloudterms]/route.ts.

import { CloudTermsHandler } from '@cloudterms/nextjs/server'
 
export const { GET, POST } = CloudTermsHandler()

Add the CloudTermsProvider

Add the following to your root `/app/layout.tsx

Wrap your app with the CloudTermsProvider component.

Props:

  • userId A unique userId that identifies the user to track their agreements.
<CloudTermsProvider userId={userId}>{children}</CloudTermsProvider>