logowaitly

NextJS Guide

A guide to using the waitly SDK with NextJS. A scenario with a form.

Next JS - SSR component

This is a simple example of how to use the waitly SDK with NextJS. It is a server-side rendered component that fetches the waitlist entries count and displays it.

main.tsx

import { WaitlistForm } from './waitlist-form';
import { createWaitlyClient } from '@go-waitly/waitly-sdk';

async function getWaitlistCount() {
  const client = createWaitlyClient({
    waitlistId: process.env.WAITLY_WAITLIST_ID!,
    apiKey: process.env.WAITLY_API_KEY!
  });
  
  try {
    const count = await client.getWaitlyEntriesCount();
    return count;
  } catch (error) {
    console.error('Error fetching count:', error);
    return 0;
  }
}

export default async function DemoPage() {
  const initialCount = await getWaitlistCount();
  
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full p-8 bg-white rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-center mb-2">
          Join the waitlist
        </h1>
        <p className="text-center text-gray-600 mb-6">
          {initialCount.totalEntries} people already in the waitlist
        </p>
        
        <WaitlistForm initialCount={initialCount} />
      </div>
    </div>
  );
}

Next JS - Client component

Use a client component for the form.

/components/waitlist-form.tsx

'use client';

import { useState } from 'react';
import { createWaitlyClient } from '@go-waitly/waitly-sdk';

interface WaitlistFormProps {
  initialCount: number;
}

export function WaitlistForm({ initialCount }: WaitlistFormProps) {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState<{ position: number } | null>(null);
  const [count, setCount] = useState(initialCount);
  
  const client = createWaitlyClient({
    waitlistId: process.env.WAITLY_WAITLIST_ID!,
    apiKey: process.env.WAITLY_API_KEY!
  });
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    
    try {
      const exists = await client.checkEmailExists(email);
    
      const response = await client.createWaitlyEntry({
        email,
        referredByCode: <code> 
      });
      
      setCount(count + 1);
      setEmail('');
      
    } catch (error: any) {
      setError(error.message || 'Une erreur est survenue');
    } finally {
      setLoading(false);
    }
  };
  
  if (success) {
    return (
      <div className="text-center py-8">
        <div className="text-green-600 text-5xl mb-4">✓</div>
        <h2 className="text-xl font-semibold mb-2">Success !</h2>
        <p className="text-gray-600">You are in position</p>
        <p className="text-3xl font-bold text-purple-600 mt-2">#{success.position}</p>
        <button 
          onClick={() => setSuccess(null)}
          className="mt-6 text-sm text-purple-600 hover:underline"
        >
          Inscrire une autre personne
        </button>
      </div>
    );
  }
  
  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="votre@email.com"
          required
          disabled={loading}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
        />
      </div>
      
      {error && (
        <div className="text-red-600 text-sm">
          {error}
        </div>
      )}
      
      <button
        type="submit"
        disabled={loading}
        className="w-full py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {loading ? 'Checking...' : 'Join the waitlist'}
      </button>
      
      <p className="text-center text-sm text-gray-500">
        {count} people in the waitlist
      </p>
    </form>
  );
}