Next.js App Router

npm install @clndr-pro/react @clndr-pro/sdk server-only

NEXT_PUBLIC_CLNDR_PUBLISHABLE_KEY=clndr_pk_...
CLNDR_SECRET_KEY=clndr_sk_...

'use client';
 
import { ClndrProvider } from '@clndr-pro/react';
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ClndrProvider publishableKey={process.env.NEXT_PUBLIC_CLNDR_PUBLISHABLE_KEY!}>
      {children}
    </ClndrProvider>
  );
}

import { Providers } from './providers';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

import 'server-only';
import { Clndr } from '@clndr-pro/sdk';
 
if (!process.env.CLNDR_SECRET_KEY) {
  throw new Error('Set CLNDR_SECRET_KEY (a clndr_sk_ key) in .env.local');
}
 
/** Server-only client. The secret key never reaches the browser bundle. */
export const clndr = new Clndr(process.env.CLNDR_SECRET_KEY);

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { cache } from 'react';
import { ClndrError } from '@clndr-pro/sdk';
import { clndr } from '@/lib/clndr';
import { BookingWidget } from './booking-widget';
 
// Re-render each booking page at most every 5 minutes. Slots aren't part of
// this HTML (the widget fetches them live), so only the title and
// description can be up to 5 minutes stale.
export const revalidate = 300;
 
// One API call per request, shared by generateMetadata and the page.
const getBookingPage = cache(async (slug: string) => {
  try {
    return await clndr.bookingPages.get(slug);
  } catch (err) {
    if (err instanceof ClndrError && err.status === 404) return null;
    throw err;
  }
});
 
export async function generateStaticParams() {
  const pages = await clndr.bookingPages.list();
  return pages.filter((p) => p.is_active && p.visibility === 'public').map((p) => ({ slug: p.slug }));
}
 
function summary(markdown: string | null, fallback: string) {
  const text = markdown?.replace(/[#*_`>[\]()]/g, '').replace(/\s+/g, ' ').trim();
  return text ? text.slice(0, 160) : fallback;
}
 
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const page = await getBookingPage(slug);
  if (!page) return {};
  const { bookingPage, userProfile } = page;
  const host = userProfile.full_name ?? userProfile.username;
  return {
    title: `${bookingPage.title} with ${host}`,
    description: summary(bookingPage.description, `Book ${bookingPage.duration_minutes} minutes with ${host}.`),
  };
}
 
export default async function BookingPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = await getBookingPage(slug);
  // Your key can read your private and team pages too. Only show public ones.
  if (!page || page.bookingPage.visibility !== 'public') notFound();
 
  return (
    <main className="mx-auto max-w-2xl px-4 py-12">
      <BookingWidget slug={slug} />
    </main>
  );
}

'use client';
 
import { BookingInline } from '@clndr-pro/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
 
export function BookingWidget({ slug }: { slug: string }) {
  return (
    <BookingInline
      slug={slug}
      components={{ Button, Input, Label, Textarea }}
      classNames={{
        root: 'space-y-6',
        heading: 'text-2xl font-semibold tracking-tight',
        muted: 'text-sm text-muted-foreground',
        label: 'mb-2 block',
        dateInput: 'w-full',
        slotGrid: 'mt-4 grid grid-cols-3 gap-2',
        slotButton: 'bg-background text-foreground border hover:bg-accent hover:text-accent-foreground',
        card: 'space-y-4 rounded-xl border p-6',
        buttonSecondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        error: 'text-sm text-destructive',
      }}
    />
  );
}

import { NextResponse } from 'next/server';
import { clndr } from '@/lib/clndr';
import { auth } from '@/auth'; // your auth library
 
const STATUSES = ['pending', 'confirmed', 'cancelled'] as const;
type Status = (typeof STATUSES)[number];
 
/** GET /api/bookings?status=pending — for your own admin screens only. */
export async function GET(request: Request) {
  // This returns guest names and emails. Never ship it without an auth check.
  const session = await auth();
  if (session?.user?.role !== 'admin') {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
 
  const param = new URL(request.url).searchParams.get('status');
  const status = STATUSES.includes(param as Status) ? (param as Status) : undefined;
 
  const bookings = await clndr.bookings.list({ status, limit: 100 });
  return NextResponse.json({ bookings });
}

import type { AppProps } from 'next/app';
import { ClndrProvider } from '@clndr-pro/react';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <ClndrProvider publishableKey={process.env.NEXT_PUBLIC_CLNDR_PUBLISHABLE_KEY!}>
      <Component {...pageProps} />
    </ClndrProvider>
  );
}

import type { GetStaticPaths, GetStaticProps } from 'next';
import Head from 'next/head';
import { BookingInline } from '@clndr-pro/react';
import { Clndr, ClndrError } from '@clndr-pro/sdk';
 
type Props = { slug: string; title: string };
 
// getStaticProps and getStaticPaths only run on the server, so the secret key stays there.
const clndr = new Clndr(process.env.CLNDR_SECRET_KEY!);
 
export const getStaticPaths: GetStaticPaths = async () => {
  const pages = await clndr.bookingPages.list();
  return {
    paths: pages.filter((p) => p.is_active && p.visibility === 'public').map((p) => ({ params: { slug: p.slug } })),
    fallback: 'blocking',
  };
};
 
export const getStaticProps: GetStaticProps<Props, { slug: string }> = async ({ params }) => {
  try {
    const { bookingPage } = await clndr.bookingPages.get(params!.slug);
    if (bookingPage.visibility !== 'public') return { notFound: true };
    return { props: { slug: bookingPage.slug, title: bookingPage.title }, revalidate: 300 };
  } catch (err) {
    if (err instanceof ClndrError && err.status === 404) return { notFound: true };
    throw err;
  }
};
 
export default function BookPage({ slug, title }: Props) {
  return (
    <>
      <Head>
        <title>{title}</title>
      </Head>
      <main style={{ maxWidth: 640, margin: '48px auto', padding: 16 }}>
        <BookingInline slug={slug} />
      </main>
    </>
  );
}