SounnyForms
API Online
Client Portal
▲ NEXT.JS 14 & 15 INTEGRATION

Next.js Form Handling Without Server Actions

Eliminate the boilerplate of configuring API routes, SMTP transports, rate limiters, and database models. Handle forms cleanly in Next.js App Router with 1 line of client code.

Get Your Next.js Endpoint View Next.js Component
📦 1. Install SDK via npm 
npm install sounny-forms
▲ 2. app/contact/page.tsx (Next.js App Router Client Component) 
'use client';

import React from 'react';
import { useSounnyForm } from 'sounny-forms/react';

export default function ContactPage() {
  const { submitting, succeeded, error, handleSubmit } = useSounnyForm('hello@yourcompany.com');

  if (succeeded) {
    return (
      <div style={{ padding: '24px', background: '#ecfdf5', color: '#065f46', borderRadius: '12px', border: '1px solid #a7f3d0' }}>
        <h3 style={{ fontSize: '18px', fontWeight: 700, marginBottom: '6px' }}>Message Delivered!</h3>
        <p>Thanks for reaching out. We will get back to you shortly.</p>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '500px', margin: '0 auto', padding: '32px 16px' }}>
      <h2 style={{ fontSize: '24px', fontWeight: 800, color: '#0f172a', marginBottom: '20px' }}>Contact Our Team</h2>
      
      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
        <div>
          <label style={{ display: 'block', fontSize: '14px', fontWeight: 600, color: '#334155', marginBottom: '4px' }}>Full Name</label>
          <input
            type="text"
            name="name"
            required
            style={{ width: '100%', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }}
          />
        </div>

        <div>
          <label style={{ display: 'block', fontSize: '14px', fontWeight: 600, color: '#334155', marginBottom: '4px' }}>Email Address</label>
          <input
            type="email"
            name="email"
            required
            style={{ width: '100%', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }}
          />
        </div>

        <div>
          <label style={{ display: 'block', fontSize: '14px', fontWeight: 600, color: '#334155', marginBottom: '4px' }}>Message</label>
          <textarea
            name="message"
            rows={4}
            required
            style={{ width: '100%', padding: '10px 14px', borderRadius: '8px', border: '1px solid #cbd5e1' }}
          ></textarea>
        </div>

        {error && <p style={{ color: '#dc2626', fontSize: '14px', fontWeight: 500 }}>{error.message}</p>}

        <button
          type="submit"
          disabled={submitting}
          style={{
            background: '#ff4d00',
            color: '#fff',
            fontWeight: 700,
            padding: '12px 24px',
            borderRadius: '8px',
            border: 'none',
            cursor: 'pointer',
            marginTop: '6px'
          }}
        >
          {submitting ? 'Transmitting...' : 'Send Message'}
        </button>
      </form>
    </div>
  );
}
🚀
No Server Cold Starts
Deploy to Vercel, Netlify, or Cloudflare Pages without worrying about serverless cold starts delaying critical inquiries.
🛡️
Auto Honeypot Protection
No recaptcha scripts slowing down your Next.js Core Web Vitals score. Honeypots and timestamps filter spam invisibly.
✉️
Instant Email with 1-Click Reply
Replies go straight to the visitor via SMTP. Hit "Reply" in Gmail or Outlook to engage leads immediately.
HELP & FAQS

Next.js Integration FAQ

Does this work with Next.js Static Site Generation (SSG / output: export)?

Yes! Because SounnyForms works entirely over standard HTTPS client requests, it is 100% compatible with fully static Next.js deployments (e.g. GitHub Pages, AWS S3, Cloudflare Pages).

Can I send submissions from a Next.js Server Action if I want server-side processing?

Yes! You can call submitForm() inside a Server Action or route handler using Node.js without needing any client script.