How to build a Waitlist in Next.js 15 App Router

Next.js 15 brings powerful new caching and routing paradigms, but handling simple form submissions can still be surprisingly verbose if you build it from scratch.

In this tutorial, we'll build a beautiful, glassmorphism-styled waitlist form using Tailwind CSS and Rinnode for the backend.

Step 1: Get your Rinnode Endpoint

Head to your Rinnode dashboard and create a new Waitlist endpoint. You'll instantly get an endpoint URL like https://rinnode.com/api/v1/f/your-endpoint.

Step 2: The React Component

Using Server Actions or simple client-side fetch, you can wire up your form in seconds:

export default function WaitlistForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    await fetch('https://rinnode.com/api/v1/f/your-endpoint', {
      method: 'POST',
      body: JSON.stringify(Object.fromEntries(formData)),
      headers: { 'Content-Type': 'application/json' }
    });
    alert('Joined successfully!');
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <input name="email" type="email" required className="input" />
      <button type="submit" className="btn">Join Waitlist</button>
    </form>
  );
}

That's it! Rinnode handles the spam protection, analytics, and email alerts automatically.